しおしお

IntelliJ IDEAのことなんかを書いてます

TypeScriptもやっぱりIntelliJだよね

JetBrains IntelliJ IDEA Blogにあるように、IntelliJ IDEA12(build 122.694)でTypeScriptがサポートれました。

現状は、ファイルタイプが対応している程度で、コンパイル(JavaScript)への変換や型チェックなどは対応していないようです。

ただ、せめてIDE上でコンパイルできたら楽だと思うので、やり方まとめてみました。
なお、この手順はMacまとめているのでその他の環境の場合はディレクトリなどを良さげに置き換えてください。

前提

NodeとTypeScriptのインストールは終了していることが前提です。

外部コマンドとしてTypeScriptコンパイラ(tsc)を追加する

Settings -> External Toolsで新しい外部コマンドの追加画面を開く

f:id:sioiri:20121103233518p:plain

コンパイルのコマンドを設定する

下の画像のようにコンパイルコマンドを設定します。
ProgramにはNodeコマンドを設定し、引数にはtscと現在のエディタで開いているファイルのパスを現す$FilePath$を設定します。
また、コンパイル結果を確認できるようにOpen consoleのチェックは入れておきましょう。
f:id:sioiri:20121103233550p:plain

これで、コンパイルコマンドの設定は終わりです。

TypeScriptなファイルを作成する

TypeScriptなファイルは、ファイル作成時に拡張子を「ts」で作成します。
これで、TypeScript用のカラースキーマが適用されます。(現時点では、色設定の変更などはできません。)

コンパイルをしてみよう

TypeScript - Tutorialのサンプルコードを使って試しています。

コンパイルは、コンパイル対象のファイルをひらいて右クリックすると、さっき登録した外部コマンドがでてくるので、それを選択すると行えます。
下の画像のようにtypescript(外部コマンドのグループ名)配下に、コンパイルコマンドが出てきます。
f:id:sioiri:20121103234154p:plain

コマンドを実行すると下の画像のようにコンソールにコンパイル結果が表示されます。この例だとコンパイルエラーが出ていないのでコンパイル成功ですね。TypeScriptと同じディレクトリを見てみると、JavaScriptが出力されているはずです。
f:id:sioiri:20121103234323p:plain

チュートリアルのコンパイルエラーが発生するコードに変えてみると、ちゃんとコンソールにコンパイルエラーが表示されます。
f:id:sioiri:20121103234617p:plain

近いうちにコンパイル(エディター上でのリアルタイムのエラーレポートなども)がサポートされると思うので、それまで我慢出来ない場合に使ってみるのはありかなと。

終わり。