TypeScript 1.8 + Visual Studio Code という環境でゲームを開発しています。その時の設定や利用方法をメモしておきます。これが最適な使い方ではないとは思いますが、何かしらの参考になれば。

ゲームは GitHub で公開しています → リポジトリとデモ

TypeScript 1.8 + Visual Studio Code

TypeScript 1.8 がリリースされました。「変数キャプチャの改善」の恩恵を受けたかったので、Visual Studio Code が参照するバージョンを差し替えて最新版を利用することにしました。

TypeScript は npm 版をインストールします。Visual Studio 用の TypeScript パッケージでは必要になる tsserver.js が付属しないようです。

npm install -g typescript

次に、Visual Studio Code の設定を変更します。メニュー > File > Preferences > User Settings を開き、typescript.tsdkを指定します。Windowsであれば以下のようなパスになります。
"typescript.tsdk": "C:\\Users\\ユーザ名\\AppData\\Roaming\\npm\\node_modules\\typescript\\lib"
ビルドの際に tsc を起動することになるので、PATHを修整して適切な tsc が選択されることを確認します。Windows標準のコマンドプロンプトから検索パスを確認するにはwhereコマンドが使えます。（bashのwhichからあえて名前を変えているのか？）
where tsc

Visual Studio Code でのプロジェクト設定

VS Code の機能はテキストエディタ + 外部タスク実行に特化しており、本家 Visual Studio と比べると機能の数は少ないと思われます。ただ、TypeScript で開発するにあたっては、インテリセンスやリファクタリング等、十分な機能があるため VS から乗り換えました。VS にも TypeScript プロジェクトの雛型はあるのですが、C# プロジェクト (.csproj) を間借りしているようなので、いまいちすっきりしなかったのもあります。

開発にあたって、tasks.json を設定して頻繁に実行する操作を登録しておくと便利です。今回は以下のようなタスク設定にしました。

tasks.json

{
    "version": "0.1.0",
    "command": "cmd",
    "isShellCommand": true,
    "showOutput": "silent",
    "args": [],
    "tasks": [
        {
            "taskName": "build",
            "suppressTaskName": false,
            "args": [ "/C tsc -p src --outFile bld/main.js" ],
            "problemMatcher": "$tsc"
        },
        {
            "taskName": "release",
            "suppressTaskName": false,
            "args": [ "/C tools\\release.cmd" ],
            "showOutput": "silent"
        },
        {
            "taskName": "test",
            "suppressTaskName": false,
            "args": [ "/C start index-debug.html" ],
            "showOutput": "never"
        }
    ]
}

デフォルトのビルドコマンド (workbench.action.tasks.build) は taskName="build" もしくは isBuildCommand=true のタスクを実行します。テストコマンド (workbench.action.tasks.test) は taskName="test" もしくは isTestCommand=true のタスクです。なお、テストコマンドでは本来はデバッガを起動できるのですが、上記の設定では単にブラウザでページを開くだけです。

追加した release コマンドはワンボタンでは実行できません。タスク選択コマンド (workbench.action.tasks.runTask) からタスク名を選択して実行します。TypeScript の出力は非常に素直で、ほぼ型情報を削っただけのコードが書き出されます。リリース時にはそれを Google Closure Compiler で圧縮するようにしてみました。その際、より圧縮が効くよう (function() { と })(); で囲むだけのヘッダとフッタで挟んでいます。これは本来もっと適切な方法があるような気はしますが……。

release.cmd

copy /B tools\header.js + %OUTNAKED% + tools\footer.js %OUTWRAPPED% > NUL
java -jar tools/compiler.jar --js %OUTWRAPPED% --js_output_file %RELEASED%

その他

Color Theme は Dark (Visual Studio) になっていましたが、Dark+ (default dark) に切り替えたほうが、キーワードの色付けが適切なように感じました。Dark+ だと Dark の時に色付けされなかった引数の型なども色分けされました。

TypeScript 1.8 + Visual Studio Code での開発

TypeScript 1.8 + Visual Studio Code

Visual Studio Code でのプロジェクト設定

その他