JavaScript中級編 型付け TypeScriptの入門 環境構築わかりやすく解説

JavaScriptは成約があまりなく、学習コストが比較的低い言語です。
JavaScriptのようなスクリプト言語はデータの型をあらかじめ設定する必要がありません。このような言語は動的型付け言語によくある仕様です。

しかし、最近ではあらかじめ型をつける静的型付け言語が脚光を浴びています。JavaScriptにも、型を付ける言語がはやり始めています。
事実、企業が求めるスキルセットとして、TypeScriptが求められている場合が多く、特にモダンな環境を導入している企業に多く見られます。

そこで、今回は静的型付けのJavaScript、TypeScriptについてわかりやすく解説していきます。

TypeScriptの概要

TypeScriptはあの、MicroSoftが開発したプログラミング言語のひとつです。TypeScript(以降、TS)はJavaScriptを拡張させたものです。なので、基本的に文法はJavaScript全く同じです。

TypeScriptはC言語やC++、Javaといった静的型付けができる言語になります。JavaScriptは型を宣言する必要はなく、自由度が比較的高めのスクリプト言語になります。しかし、TypeScriptは明示的に型を宣言することで、開発時点での型を確認しやすくなります。

なので未然にエラーを防ぐことができます。

もう一つの特徴として、クラスベースオブジェクト指向であります。クラスを用いますので、開発規模が大きくなればなるほど、開発コストを下げることができるメリットもあります。

JavaScriptとの互換性は100％であり、文法的には全く同一なので、JavaScriptを習得しているのならば、習得することは難しくはありません。ただ、型宣言する必要があるため、その分の学習コストは上昇します。なので、プログラミング初学者の方がいきなりTSから始めるのは少々ハードルが高いといえます。

TypeScriptの環境構築

TypeScriptの環境構築にやり方を解説していきます。TypeScriptを扱うための前提として下記の環境を前もって準備します。

$ node -v
v16.14.0

$ npm -v
8.13.1

$ echo $SHELL
/bin/zsh // MacOS

TypeScriptの環境構築はnpmを使います。もし、それらの環境が整っていない場合は下記を参考にしてください。

TypeScriptをインストールするには下記コマンドをターミナルで実行してください。

$ npm install -g typescript

これだけです。

あとは、インストールができたことを確認するのみです。

$ tsc -v

TypeScriptコマンドの使い方

TypeScriptを実行するには、C言語やJavaのようにコンパイル作業が必要です。コンパイルというのは、CやJavaでは機械語に翻訳することですが、TypeScriptではJavaScriptに翻訳します。

$ tsc script.ts

カレントディレクトリのTypeScriptファイルをコンパイルできます。

$ tsc script.ts main.ts

複数ファイルも一度にコンパイルできます。

$ tsc *.ts

カレントディレクトリ内のすべてのTSファイルをコンパイルできます。

$ tsc script.ts --watch

–watchオプションをつけることで、指定したファイルを自動コンパイルすることが可能。

まとめ

では、今回のまとめに入ります。
今回は下記のことについて解説しました。

今回はここまでになります。
お疲れさまでした。

参考サイト

http://TypeScript icon by Icons8