Visual Studio Codeを使ったTypeScript開発 (環境構築)

Visual Studio Code を使った TypeScript 開発のための、環境構築方法などを説明していきます。メモ的な事柄が中心です。


開発対象は、以下のものを目標としています。

  • Web ページ
  • Node.js を使った JavaScript の動作

執筆時点の各環境のバージョンは以下のとおりです。

表1: バージョン
Visual Studio Code 1.10.1
Node 6.5.0
TypeScript 2.2.1

環境のインストール

環境構築の方法は Windows 、Mac 共通かと思いますので、特別記載のない場合はどちらの環境でも共通の操作かと思います。ただし、環境設定等特別違いのある場合は明記しておこうと思います。

Visual Studio Code のインストール

公式サイトからインストーラをダウンロードし、インストールします。特に難しいことは無いと思います。

Node.js のインストール

こちらも、公式サイトからインストーラをダウンロードし、インストールするだけです。

インストーラが PATH を通してくれたため、インストール後に設定は必要ありませんでした。

TypeScript のインストール

Node.js のインストール後、コマンドラインから、以下のコマンドを実行します。

Mac だと、管理者権限が必要かもしれません。そのため、sudo npm ~とした方が良いかもしれません。

Visual Studio Code をアップデートすると、TypeScript も最新のものにアップデートすることを求められることがあります。その場合も、上記コマンドでアップデートできます。

tsconfig.json の記述

TypeScript のトランスパイル用の設定ファイル「tsconfig.json」のメモです。このファイルは、通常、プロジェクトと同じディレクトリに置きます。

Web ページ用

複数の TS ファイルを使って、モジュール化していることを前提にし、HTML 側では、RequireJS を使って読み込みこむことを想定した設定です。「module」に「amd」を指定します。また、HTML ファイルから読み込む対象のファイルを「outFile」に指定しておきます。outFile に指定しておくと、そのファイルにすべてのソースが結合されて出力されるようになります。「module」に「amd」を指定しているため、outFile の設定は必ずしも必要ではありませんが、トランスパイルごとに多くのファイルが生成されて少々邪魔になるため、少なくとも開発中は指定しておくと便利です。ちなみに、module を指定しなければ、outFile にそのまま結合されて出力され、RequreJS も必要なくなります。ただ、次に述べる Node.js 上で利用する際のソースと書き方が異なってしまうため、amd でモジュール化する方針で設定しています。

async/await を使うために、「lib」には「es2015.promise」を追加します。それ以外はデフォルトのものですが、書いておかないとデフォルトの設定まで消えてしまいます。

Node.js 用

型定義ファイルを設定する

この情報は古いため、書き直す必要があります。

適当なディレクトリに移動します。

以上で、jQuery 、jQuery UI 、Node.js 用の型定義ファイルがインストールされます。型情報を使用する場合には、

のように index.d.ts を参照します。