Node.js + TypeScript + Atom 環境を構築する #JavaScript

以下の3つをします。

Node.jsをnodebrewでinstallする
TypeScriptをinstallする
AtomをinstallしてTypeScriptに対応する

Mac OS 10.10.1 で試しています。

Node.js with nodebrew

nodebrew をinstallする。

$ curl -L git.io/nodebrew | perl - setup

パスを通す必要あり。↑のconsole logに出てます。

$ vi ~/.bash_profile

# nodebrew.                                                                     
export PATH=$HOME/.nodebrew/current/bin:$PATH

node, npm をinstallする。

$ nodebrew install-binary latest
$ nodebrew use latest

成功したか確認してみる。

$ npm --version

TypeScript

最新のVersionを見てみる。2015/10/13時点では 1.6.2 みたい。

$ npm info typescript

{ name: 'typescript',
  description: 'TypeScript is a language for application scale JavaScript development',
  'dist-tags': { latest: '1.6.2', next: '1.7.0-dev.20151006' },
  versions: 
   [ '0.8.0',
     '0.8.1-1',
...

TypeScriptをinstallする。

$ npm install -g typescript@1.6.2

成功したか確認してみる。

$ tsc --version

Atom

Atomをダウンロードしてinstall --> 起動する。

プロキシ環境下の方はこちらも。

apm コマンドをinstallする。

Menu --> Atom --> Install Shell Commands

TypeScriptプラグインをinstallする。

$ apm install atom-typescript

コンパイルエラーとかチェックして出したいので、Linterプラグインを入れる。

$ apm install linter
$ npm install -g tslint
$ apm install linter-tslint

その他、便利プラグイン。

# 右上にMinimap表示.
$ apm install minimap

# "ctrl + r" で実行.
$ apm install atom-runner

# "ctrl + alt + b" で整形.
$ apm install atom-beautify

プロジェクトルートにtslint.jsonを置く。エラーチェックとかの設定です。

tslint.json

プロジェクトルートに tsconfig.json を置く。TypeScript用の設定です。

tsconfig.json

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "declaration": false,
        "noImplicitAny": false,
        "removeComments": true,
        "noLib": false
    },
    "buildOnSave": true,
    "filesGlob": [
        "./**/*.ts",
        "!./node_modules/**/*.ts"
    ],
    "files": [
    ],
    "exclude": []
}

Atomを再起動して新規に test.ts を書いてみる。エラー表示が出たら成功。

test.ts

var num: number = 777;

num = 'this is string.';  // Error: Type 'string' is not assignable to type 'number'.