らこらこブログ

唐揚げとアニメとプログラミングが大好きです

WebStormのTypeScript統合機能

JetBrains IDE Advent Calendar1日目の記事です。 主催しましたが思った以上に集まらなかったのでちょっと残念です。 埋めるのも大変なので登録してくれた分だけ見られたらいいかなという気持ち。

本稿ではWebStormのTypeScript統合機能についてまとめます。 結構前からサポートされてますが、バージョンアップと共に少しずつ強化されてるので、 どこまでできるようになっているのかを確認しようと思います。

プラグインはデフォルトで有効

WebStorm 11.0.0 Help :: TypeScript Support

TypeScriptサポート機能は「JavaScript Support」プラグインと「Node.js」プラグインの2つに含まれており、TypeScriptで独立したプラグインはありません。つまりWebStormでJavaScriptを書いていれば何をしなくてもその恩恵を受けることができます。

コードアシスト機能

基本的なエディタ機能(メソッドやフィールドの補完、定義元へのジャンプ、リネームなど)はJavaScriptと同じように行なえます。 むしろTypeScriptは型情報があるぶん補完に関しては、プロジェクト中に存在する型定義ファイル(d.ts)を利用してくれるので、 より高い精度でサジェストしてくれます。

特筆すべきはJavaScriptの編集中にも型定義ファイルを内部で利用してくれることで、 ソースコード側に型情報がなくても変数名からそれらしい型定義を探してきて補完候補に含めてくれます。 そのため、TypeScriptでの開発でなくても型定義ファイルだけは利用したい人向けに d.tsファイルをWeb上からインストールする「JavaScript Libraries」機能があります。 プロジェクトごとに分かれた内部のスコープに導入されるので、開発中のプロジェクトに余計なファイルを含めることなく恩恵をうけられます。

f:id:laco0416:20151129232313p:plain

f:id:laco0416:20151129232349p:plain

トランスパイル

TypeScriptはAltJSでありブラウザやNode.js上でそのまま実行することができないので、 JavaScriptにトランスパイルしないといけません。

WebStorm 11.0.0 Help :: Transpiling TypeScript to JavaScript

WebStormにはFile Watcherという機能があり、ファイルの変更を監視して何かしらの処理を行うことができます。 TypeScriptのコンパイルに関するFile Watcherは最初から組み込まれており、.tsファイルを開くと有効にするかどうかを尋ねられますし、 設定画面からもすぐに有効にできます。 チェックボックスを有効にするだけでプロジェクト内の.tsファイルは自動でトランスパイルされるようになってとても便利です。 デフォルトではWebStorm側の設定でトランスパイルするようになっていますが、tsconfig.jsonという公式の設定ファイルを利用するように変更するのがオススメです。

私は以前まで、TypeScriptのトランスパイルはプロジェクト側が責任をもつべきだと考えており、 WebStormのようなIDE側で行うのは否定的でした。 しかしTypeScriptがtsconfig.jsonというコンパイル設定の外部化をサポートしたので、 tsconfig.jsonを参照しさえすればどのツールを使っても同じ結果が得られるようになりました。 そして最新のWebStormがtsconfig.jsonを使ってくれるようになったので、 今までgulpやgruntで監視タスクを書いていたのをWebStormのwatcherに任せようかと思い始めています。

f:id:laco0416:20151129233556p:plain

また、一番上のチェックボックスを有効にすればtsconfig.jsonのfilesに含まれるファイルだけを補完候補の抽出に使ってくれるようになります。

TSLint

TypeScriptのLintツールにtslintというものがあります。WebStormはTSLintからのメッセージをエディタ上に統合してくれます。

WebStorm 11.0.0 Help :: Using TSLint Code Quality Tool

プロジェクトにtslintをインストールした後、設定画面からTSLint連携を有効にします。

f:id:laco0416:20151129234529p:plain

Reactとの連携

最新のTypeScriptにはReactのJSXをTypeScript中で使えるようにするTSXという機能がついています。 TSXは.tsxファイル中で使用可能ですが、WebStormでも.tsxファイル中ではTSXを解釈してくれます。

WebStorm 11.0.0 Help :: Using ReactJS in JavaScript and TypeScript

まとめ

TypeScriptは動的型付け言語であるJavaScriptに型アノテーションをつけたものであり、実行時には型情報は消えてしまいます。 逆に言えば型情報は開発時に利用するだけに使われるものであり、それを活用するのがIDEです。 WebStormのTypeScriptサポートは非常に優秀で、バージョンアップへの追従も比較的早いです。

しかしAtomプラグインであるatom-typescriptはbasarat氏が開発していることもありWebStormよりもさらに強力な機能を備えています。 特筆すべきはLanguage Servicesの利用で、コードの補完やエラー出力の情報をプラグインではなくTypeScriptのコンパイラから受け取っているので、 「エディタ上ではエラーが出ていないのにコンパイルが通らない」ということがありません。 WebStormは内部の独自パーサによって解析しているのでエディタ上でエラーが出ていないのにコンパイルできなかったり、その逆がしばしば発生しているので、この点に関してはまだ課題があります。 ただしプラグインではなく最初から使えること、IDE本体が主要な機能のひとつとしてサポートしていることには大きな価値があると思います。