WebStormでTypeScript 1.8を使う方法

先日TypeScriptの最新バージョンである1.8がリリースされました。

WebStormではTypeScriptのコンパイラーが内蔵されているため、WebStormさえインストールすればTypeScriptが使えるようになります。ですが、WebStorm 11におけるデフォルトのコンパイラーはTypeScript 1.7です。このコンパイラーを切り替え、TypeScript 1.8を使う方法を紹介します。

必要ファイルをダウンロード

https://github.com/Microsoft/TypeScript/tree/master/lib より、typescriptServices.js、lib.d.ts、lib.es6.d.tsをダウンロードして任意の場所にフォルダを作成し、保存しておきます。

WebStorm側の設定

[WebStorm]→[Preferences]→[Languages & Frameworks]→[TypeScript]を選択し、TypeScriptの設定画面を開きます。[Enable TypeSCript Compiler]にチェックを入れ、TypeScriptのコードが自動でコンパイルされるようにしておきます。

[Compiler version]の箇所で、[Edit]を選択し、コンパイラーの設定画面から[Custom directory]にチェックを入れ、先ほどダウンロードしたファイルが含まれるフォルダを指定します。

[OK]を押して設定画面に戻り、[apply]を押すと設定終了です。

TypeScript 1.8を早速使ってみよう

実際にTypeScript 1.8が使えるか試してみましょう。下記は @vvakame さんの記事「TypeScript 1.8.0-beta 変更点 - Qiita」で紹介されているTypeScript 1.8の「String literal types」という型を使ったコードです。

TypeScript1.8確認用のコード

type Season = "winter" | "spring" | "summer" | "autumn";

function seasonToJapaneseString(s: Season): string {
    switch (s) {
        case "winter":
            return "冬";
        case "spring":
            return "春";
        case "summer":
            return "夏";
        case "autumn":
            return "秋";
    }

    return "???";
}

seasonToJapaneseString("winter");
// ☆下記は型エラー
seasonToJapaneseString("winert");

前述の設定によりTypeScript 1.8が使えるようになったWebStormでは、このコードが自動でコンパイルされ、☆の部分で型エラーを検出してくれるのが分かります。

参考: Transpiling TypeScript to JavaScript