読者です 読者をやめる 読者になる 読者になる

Visual Studio CodeでExpress4をTypeScriptデバッグする方法

f:id:MSitter29:20150606222438p:plain
最近、本気なマイクロソフトが出したマルチプラットフォームな無料エディタVisula Studio Code。
これでNodejs Express4をTypeScriptデバッグしてみました。

バージョン

Windows7
Visual Studio Code v0.3.0
Node.js v0.12.4
Express v4.12.4
TypeScript v1.5.0beta

準備

Node.js

Node.js
公式からダウンロードしてインストール
f:id:MSitter29:20150606222513p:plain
インストーラは素直に「次へ」でどんどん進めていってOK。

> node -v
v0.12.4

> npm -v
2.10.1

となっていればインストール成功。

TypeScript

TypeScriptはnpmでインストールが簡単。

> npm install -g typescript
> tsc -v
message TS6029: Version 1.5.0-beta

tscとは、TypeScriptコンパイラのこと。
tscコマンド単体で、TypeScript => JavaScriptビルドすることもできます。


Express

Express4からは、generatorで生成できるようになったので、Expressとひな形生成ツールをインストール。

> npm install -g express
> npm install -g express-generator
> express --version
4.12.4

という感じになればインストール成功。

Visual Studio Code

https://code.visualstudio.com/
公式からダウンロードしてインストール
f:id:MSitter29:20150606222734p:plain

インストールしようとすると、.NET 4.5が必要なようなので聞かれたら一緒にインストール。
f:id:MSitter29:20150606222747p:plain
f:id:MSitter29:20150606222759p:plain

Express4 JavasScript

まずはgeneratorで素のJS Expressアプリを生成します。

> express exApp

任意の場所でアプリを生成。

> cd exApp
> npm install

中に入って、必要なパッケージをnpmインストール。

Visual Studio Code

Visual Studio Code起動。

> cd exApp
> code .

codeコマンドでもVisual Studio Codeできます。
「.」指定で、今いるフォルダをまるっとプロジェクトとして起動してくれる。
起動は案外早い。

app.js

f:id:MSitter29:20150606222847p:plain
__dirnameが未定義だとワーニングが出る。
__dirnameをクリックし、電球アイコンが出てくるのでクリック。
「Add /// reference to 'node/node.d.ts'」を選択する。

f:id:MSitter29:20150606222913p:plain
すると、typings/node/node.d.tsが追加され、app.js先頭にnode.d.tsがコメントアウト定義され、ワーニングがなくなる。

tsconfig.json

TypeScript設定ファイルをルート直下に作成。
f:id:MSitter29:20150606222932p:plain

  • target: ES5
  • module: amd
  • sourceMap: true

で作成。

task.json

「Ctrl」+「Shift」+「B」で、本来はTypeScriptビルドが走る。
f:id:MSitter29:20150606222943p:plain
しかし、未設定なので「Configure Task Runner」を選択。
ひな形task.jsonが生成される。
f:id:MSitter29:20150606222953p:plain

を設定。

再度「Ctrl」+「Shift」+「B」で、ビルドするとエラー発生。
f:id:MSitter29:20150606223020p:plain

  • Cannot find name 'DataView'
  • Cannot find name 'Map'
  • Cannot find name 'Set'
  • Cannot find name 'WeakMap'

これらはnode.d.ts内で定義されているES6機能を、TypeScript1.5.0betaが解釈できていないようです。
f:id:MSitter29:20150606223035p:plain
アプリ内でこのクラスを使わなければいいので、typings/node.node.d.tsで該当箇所をコメントアウトする。

f:id:MSitter29:20150606223050p:plain
「Ctrl」+「Shift」+「B」してもビルドエラーなしに。

js -> ts

  • app.js -> app.ts
  • routes/index.js -> routes/index.ts
  • routes/users.js -> routes/users.ts

jsファイルをtsへリネームする。

app.tsでビルドエラーがでるので
f:id:MSitter29:20150606223107p:plain

var err:any = new Error('Not Found');

f:id:MSitter29:20150606223122p:plain
とany型にして無理矢理ビルドエラーを解消。

index.tsとusers.tsの先頭行にもd.ts定義を追加。

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

「Ctrl」+「Shift」+「B」ビルドすると各種jsとjs.mapファイルが生成される。
Visual Studio Codeはjs.mapをたよりに、TypeScriptデバッグを実現させているようです。

www.ts

Express4ではbin/wwwが起動用のJSのようです。
これをコピーしてbin/www.tsを作成。
ファイル先頭行の

#!/usr/bin/env node

はTypeScript解釈できないので削除してください。

launch.json

Debugを開いて、Configureをクリックしてlaunch.jsonひな形を作成。
f:id:MSitter29:20150606223144p:plain

  • proguram: ./bin/www.ts
  • sourceMaps: true(2カ所とも)

f:id:MSitter29:20150606223155p:plain
設定できたら、デバッグ開始。


最初はwww.tsでいったん止まるので、Continueしてください。

f:id:MSitter29:20150606223211p:plain

index.tsにブレイクポイントをはって、http://localhost:3000にアクセスすると見事ブレイクポイントで止まりました!
f:id:MSitter29:20150606223224p:plain
変数の値もちゃんと見えます。
ちょいちょいハマりましたが、プレビュー版という割には案外キチンと動きます。
v1.0ではどうなっているのか楽しみですね。