Edited at

TypeScript on VisualStudio Code

More than 3 years have passed since last update.

Buildで発表されたVisualStudio Codeがにわかに盛り上がっているみたいなので、自分のMacbookにインストールしてTypeScriptを試してみた.


Install

ここから自分のプラットフォームに合わせて選択すべし.


使ってみる


.tsファイルのコード補完

適当にTypeScriptのプロジェクトを"Open"でフォルダとして開く.

おお、ちゃんと DefinitelyTyped からとってきた.d.ts使って補完が有効化されている。

vsc_tscode01.png


tsconfig.json

tsconfig.jsonに関しても, キーやvalue(modulecommonjs 等)が補完されます。これは便利ですねー。

vsc_tsconfig01.png

この挙動については, VSCの設定ファイルを開くと, 下記の部分にぶつかる.


DefaultSettings

"json.schema": [

// 中略
{
"fileMatch": [
"/tsconfig.json"
],
"url": "http://json.schemastore.org/tsconfig"
}

JSON Schema Store からSchemaを持ってきて, JSON Schemaを使って補完してるようですね。

json.schema には, tsconfig以外にもpackage.jsonやbower.jsonについてのエントリも記載されていたため, これらのファイルでもJSON補完が使えると思われる


変数名の置換

VSなので, 適当に変数名選択してF2を押すと, renameされる。

vsc_tscode02.png


裏の仕組み

VSCにおけるTypeScript関連の機能(補完やジャンプ)はVSCにバンドルされたTSServerが動作していることをpsコマンドにて確認.

(TSServerについては, この記事読んでね)

注意として, 現状のTSServerは、tsファイルの編集を開始してから, tsconfigを更新しても、その変更が反映されない。

VSCでもこの現象に引っ掛かることがあって、ソース中でDecoratorsのような機能を使ってから, 「あ、"target": "es5" 書かなきゃ」としても、エラーが残り続けた。

VSC自体を再起動したらちゃんと反映される。


その他

ちなみに, https://code.visualstudio.com/Docs/nodejs 等にある通り, TypeScriptでなくても, 通常のNode.jsのコードであっても, /// <reference path="... /> を使ってTypeScriptライクなcode補完がJavaScript上で出来たりします.


所感

MSがTypeScriptにTSServer突っ込んできたり, tsconfigのschemaをSchema Storeにcommitしてた辺りから, 相当エディタのマルチプラットフォーム化を見越してる感があったので、今回のbuildで何かくるかな、と思ってたけど、やっぱり完成度高いなー。

TypeScript or JavaScriptのコーディングツールとしては結構好いかも。