Atomエディタでtypescriptを書くときの設定

Atomエディタでtypescriptを書くときのメモ。

atom-typescriptを設定する

Atomでtypescriptを書く場合、atom-typescriptパッケージを使用します。 github.com

atom-typescriptをインストールする

パッケージマネージャーからatom-typescriptを検索しインストールします。
（インストールには結構時間がかかります。）

tsconfig.jsonファイルを作成

プロジェクトのルートにtsconfig.jsonファイルを作成するため、Atomエディタ上でcmd(cntl)+shift+pでコマンドパレットを表示します。
tsconfigと入力し Typescript: Create Tsconfig.json Project Fileを選択して実行します。
tsconfig.jsonが作成されるのでプロジェクトのルート以外に作成された場合はファイルをルートに移動します。

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "moduleResolution": "node",
        "isolatedModules": false,
        "jsx": "react",
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true,
        "declaration": false,
        "noImplicitAny": false,
        "noImplicitUseStrict": false,
        "removeComments": true,
        "noLib": false,
        "preserveConstEnums": true,
        "suppressImplicitAnyIndexErrors": true
    },
    "exclude": [
        "node_modules",
        "typings/browser",
        "typings/browser.d.ts"
    ],
    "compileOnSave": true,
    "buildOnSave": false,
    "atom": {
        "rewriteTsconfig": false
    }
}

自動コンパイルの設定

初期設定では保存時に自動コンパイルする設定になっているため、もし自分でコンパイルしたい場合はtsconfig.jsonの"compileOnSave": true,をfalseに設定します。

.tsファイルを作成する

拡張子が.tsのファイルを作成します。ここでは以下のようなファイルを作成します。

var foo = 123;
class Bar {
    static bar: number;
    bar: number;
}
var bar = new Bar();

ファイルを保存すると以下の様にjsファイルが自動で作成されます。

var foo = 123;
var Bar = (function () {
    function Bar() {
    }
    return Bar;
}());
var bar = new Bar();

まとめ

atom-typescriptを使用することで、Atomエディタで簡単にtypescriptファイルをコンパイルすることが出来るようになります。