WebStormでTypeScriptを使おう

2013.03.07

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

WebStorm6がリリース

最強のJavaScript用IDEと名高いWebStromが、先日メジャーバージョンアップして6.0になりました。
いろいろな機能が追加されてます。

  • TypeScript coding support
  • Debugging with source maps
  • Convenient to use JS libraries
  • Fresh IDE look and feel & dark UI

今回のバージョンアップでTypeScriptもサポートされました。
こんな感じでシンタックスハイライトもできますし、補完も効くようになってます。

img2

環境構築方法

今回使用した動作環境は以下のとおりです。

  • OS : MacOS X 10.7.4
  • WebStorm : 6.0
  • Node.js : v0.8.15
  • npm : 1.1.66
  • node管理ツール : nvm

サンプル用ディレクトリをつくっておきます。 また、今回はTypeScriptを利用するので、グローバルオプションをつけてインストールしておきましょう。

% mkdir sample
% npm install -g typescript

TypeScriptを自動でコンパイルできるようにする

File→Open Directoryで、先程作成したsampleディレクトリを指定します。
New→TypeScriptFileを選択し、greet.tsファイルを作成しましょう。
そして、greet.tsをこんなふうに記述します。
img3

class Greeter {
   constructor(public greeting: string) {
    console.log("constructor");
   }
   greet() {
       return this.greeting;
   }
};

var greeter = new Greeter("Hello, world!");
var str = greeter.greet();
console.log(str);

Preferences→File Watchersを選択し、tsファイルに対してFile Watcherを作成します。
Programにはtscコマンドのパス、Environment variablesにはPATH環境変数で、nodeのパスを指定しましょう。
img4

tsファイルを何か変更して保存してみてください。tscコンパイルされてjsファイルが生成されます。
greet.tsをドリルダウンするとjsファイルとsourceMapファイルが見れますね。

まとめ

WebStormは有料のIDEですが、30日の試用版もあります。
よろしければ試してみてください。

参考サイトなど