IntelliJ IDEAでTypeScriptの開発環境を作ってみる

最近趣味プログラムのサーバサイドをNode.jsで書いてるんだけど、JavaScriptはどうも好きになれないので逃避先としてTypeScriptを選んでみた。CoffeeScriptでもいいんだけど、文法が似てるほうがソースコピペできたりして楽かなと思ってTypeScriptを選択。

今回使うツールはMac版のIntelliJ IDEAのv13。

必要なプラグインをインストール

以下のプラグインをインストールしておく。

• NodeJS
• File Watchers

IntelliJの設定

• npm install -g typescriptしておく
• 適当にプロジェクトを作る
• File -> Settingsで Node.js and NPMの設定を開き、Node interpreterの設定をしておく。自分はnodebrewを使っていて、/usr/local/nodebrew/current/bin/node にnode.jsがインストールされている。

hello.tsファイルを作成

class Hello {
  message: string;
  constructor(message) {
    this.message = message;
  }

  printMessage() {
    console.log(this.message);
  }
}

var hello = new Hello('hello');
hello.printMessage();

こんな感じのファイルを作ると↓のように出てくるので"Add Watcher"をクリックする。

Cmd + , でPreferencesを開き、File Watchers -> TypeScriptをダブルクリックして下記のようになっていればOK。"Program"のところがtscコマンドのインストール場所に正しくなっていれば大丈夫なはず。(自分はnodebrew使っているので /usr/local/nodebrew/current/bin/tsc)

hello.tsを適当に編集してみる

var hello = new Hello('hello');

の部分を

var hello = new ello('hello');

にしてファイルを保存すると

/usr/local/nodebrew/current/bin/tsc --sourcemap hello.ts
.../server/hello.ts(12,17): error TS2095: Could not find symbol 'ello'.

のようにエラーが出るはず。なお、コンパイルが正常に終われば同じディレクトリにhello.jsとhello.js.mapが出力されている。

hello.jsの実行

hello.jsを右クリックして"Run 'hello.js'"をクリックすれば実行される。

まとめ

意外と面倒くさくなかった。

TypeScriptリファレンス Ver.1.0対応