Visual Studio CodeでExpress4をTypeScriptデバッグする方法
最近、本気なマイクロソフトが出したマルチプラットフォームな無料エディタ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
公式からダウンロードしてインストール
インストーラは素直に「次へ」でどんどん進めていって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
Visual Studio Code - Code Editing. Redefined
公式からダウンロードしてインストール
インストールしようとすると、.NET 4.5が必要なようなので聞かれたら一緒にインストール。
Express4 JavasScript
まずはgeneratorで素のJS Expressアプリを生成します。
> express exApp
任意の場所でアプリを生成。
> cd exApp > npm install
中に入って、必要なパッケージをnpmインストール。
Visual Studio Code
> cd exApp > code .
codeコマンドでもVisual Studio Codeできます。
「.」指定で、今いるフォルダをまるっとプロジェクトとして起動してくれる。
起動は案外早い。
app.js
__dirnameが未定義だとワーニングが出る。
__dirnameをクリックし、電球アイコンが出てくるのでクリック。
「Add /// reference to 'node/node.d.ts'」を選択する。
すると、typings/node/node.d.tsが追加され、app.js先頭にnode.d.tsがコメントアウト定義され、ワーニングがなくなる。
task.json
「Ctrl」+「Shift」+「B」で、本来はTypeScriptビルドが走る。
しかし、未設定なので「Configure Task Runner」を選択。
ひな形task.jsonが生成される。
を設定。
再度「Ctrl」+「Shift」+「B」で、ビルドするとエラー発生。
- Cannot find name 'DataView'
- Cannot find name 'Map'
- Cannot find name 'Set'
- Cannot find name 'WeakMap'
これらはnode.d.ts内で定義されているES6機能を、TypeScript1.5.0betaが解釈できていないようです。
アプリ内でこのクラスを使わなければいいので、typings/node.node.d.tsで該当箇所をコメントアウトする。
「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でビルドエラーがでるので
var err:any = new Error('Not Found');
と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ひな形を作成。
- proguram: ./bin/www.ts
- sourceMaps: true（２カ所とも）
設定できたら、デバッグ開始。
最初はwww.tsでいったん止まるので、Continueしてください。
index.tsにブレイクポイントをはって、http://localhost:3000にアクセスすると見事ブレイクポイントで止まりました！
変数の値もちゃんと見えます。
ちょいちょいハマりましたが、プレビュー版という割には案外キチンと動きます。
v1.0ではどうなっているのか楽しみですね。
