TypeScriptのインストール

TypeScriptコンパイラの取得

TypeScriptを利用するためには、TypeScriptのコンパイラが必要となる。 コンパイラはnpmで配布されているものを取得する方法が公式でも推奨されているため、まずはnpmが自身の環境で利用できるかどうかを確認する必要がある。

npmとは

npm(Node Package Manager)とは、サーバーサイドJavaScript環境であるNode.jsのパッケージ管理システムである。 Node.jsをインストールするとバンドルされている。

Node.jsがインストールされているかどうかは以下のコマンドで確認する。

% node --version    # Node.jsのバージョン確認用コマンド
% npm --version     # npmのバージョン確認用コマンド

インストールされていない場合は、公式サイトからインストーラをダウンロードするか、Macの場合はHomebrewなどでインストールする。

npmによるTypeScriptコンパイラの取得

npmが利用できる状態であれば、以下のコマンドでTypeScriptのコンパイラをインストールすることができる。

% npm install -g typescript

TypeScriptのコンパイラは、tscコマンドで実行が可能となる。 npmでのインストールが完了しているか確認するためには、以下のバージョン確認用コマンドを利用する

tsc --version

TypeScript対応エディタ

TypeScriptの対応エディタとしては、基本的にはJavaScriptに対応しているものであれば問題はない。 現在、TypeScriptを開発・メンテナンスしているのがMicrosoftであるため、

のどちらかを利用すると良いだろう。VisualStudioシリーズ公式サイト

他にも、

などのIDEや、

などの高機能エディタも対応している。

ちなみに、VisualStudio2019はNode.jsを自動インストールするため、マシンスペックなどに余裕がある場合はVisualStudio、単純に動かすだけで良い・環境構築は自分でできるということであればVisualStudio Codeという選択をお勧めする。

TypeScriptの実行

TypeScriptの実行は、以下の手順で行う。

graph LR; A[TypeScriptによる
コードの作成] --> B[コンパイラでJavaScriptの
jsファイルへ変換] B --> C[JavaScript実行環境へ
作成されたjsファイルの反映]

最終的にはJavaScriptとして実行されることに注意。

JavaScriptとして実行するため、JavaScriptのフレームワークであるReact.jsやVue.js、AngularJSなどの開発で利用することが可能。 特にVue.jsではTypeScript対応のプロジェクトテンプレートも追加され、追加ツールなども不要となった。