ゲーム
TypeScript
ゲーム制作
VisualStudioCode

TypeScript 1.8 + Visual Studio Code での開発

More than 1 year has passed since last update.

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 の時に色付けされなかった引数の型なども色分けされました。