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

Visual Studio Codeを使ったTypeScript開発のための、環境構築方法などを説明していきます。開発者のメモ的な事柄が中心です。開発対象は、以下のものを目標としています。

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

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

Visual Studio Code	1.10.1
Node	6.5.0
TypeScript	2.2.1

[topBannar]

環境のインストール

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

Visual Studio Codeのインストール

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

Node.jsのインストール

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

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

TypeScriptのインストール

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


npm install -g typescript

1

2

3

npm install -g typescript

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

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

Typingsのインストール

TypeScriptからJavaScript用のライブラリを利用する際に必要となる、型定義ファイルを管理してくれるソフトです。jQueryなど有名なJavaScript用のライブラリを使いたい場合には、あると便利です。Node.jsのインストール後、コマンドラインから、以下のコマンドを実行します。


npm install -g typings

1

2

3

npm install -g typings

こちらも、Macでは管理者権限が必要かもしれません。

以上で、必要なソフトのインストールは完了です。

tsconfig.json の記述

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

Webページ用


{
	"compilerOptions": {
	"target": "ES5",
        "module": "amd",
	"sourceMap": true,
	"outFile" : "<出力ファイル名>",
		"lib": [
			"dom",
			"es5",
			"scripthost",
			"es2015.promise"
		]
	}
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

{

"compilerOptions": {

"target": "ES5",

"module": "amd",

"sourceMap": true,

"outFile" : "<出力ファイル名>",

"lib": [

"dom",

"es5",

"scripthost",

"es2015.promise"

]

}

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

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

Node.js用


{
	"compilerOptions": {
		"target": "ES5",
		"module": "commonjs",
		"sourceMap": true,
		"lib": [
			"dom",
			"es5",
			"scripthost",
			"es2015.promise"
		]
	}
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

{

"compilerOptions": {

"target": "ES5",

"module": "commonjs",

"sourceMap": true,

"lib": [

"dom",

"es5",

"scripthost",

"es2015.promise"

]

}

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

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


typings init
typings install --save dt~jquery --global
typings install --save dt~jqueryui --global
typings install --save dt~node --global

1

2

3

4

5

6

typings init

typings install --save dt~jquery --global

typings install --save dt~jqueryui --global

typings install --save dt~node --global

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


/// <reference path="../typings/index.d.ts" />

1

2

3

/// <reference path="../typings/index.d.ts" />

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

[bottomBannar]