TypeScriptの開発環境のセットアップを行う

この記事ではTypeScriptの開発環境の構築手順をまとめています。

前提として、Node.jsがインストールされている必要があります。

・ダウンロード|Node.js

・MacにNode.jsをインストール

Node.jsと一緒にnpmと呼ばれるパッケージマネージャーが提供されます。
TypeScriptの開発環境はnpmを利用して構築していきます。

TypeScriptの開発ディレクトリで以下のコマンドを実行します。

npm init 
npm install --save-dev typescript tslint @types/node

ユーザー名など聞かれますが、原則として表示されるプロンプトに従います。

tsconfig.jsonの作成

次にプロジェクトのルートディレクトリにtsconfig.jsonを作成します。

tsconfig.jsonはどのファイルをコンパイルするべきか、コンパイル結果をどのディレクトリに格納するか、どのバージョンのJavaScriptを出力するかなどを定義しています。

{
  "compilerOptions": {
    "lib": ["ES2015"],
    "module": "CommonJS",
    "outDir": "dist",
    "sourceMap": true,
    "strict": true,
    "target": "ES2015"
  },
  "include": [
    "src"
  ]
}

lib	コードを実行する環境にどのAPIが存在しているとTSC(TypeScriptコンパイラー)が想定するか
module	TSCがコードをどのモジュールシステムにコンパイルするか
outDir	生成するJavaScriptコードをどのフォルダに格納するか
target	TSCがコードをどのJavaScriptバージョンにコンパイルするか
include	TSCがTypeScriptファイルを見つけるためにどのフォルダを探すか

tslint.jsonを作成する

一貫したコーディングスタイルを強制するためにtslint.jsonを作成します。
以下のコマンドでTSLintのデフォルト設定を持ったtslint.jsonファイルが生成されます。

./node_modules/.bin/tslint --init 

コマンドを実行すると、以下のようなtslint.jsonファイルが作られます。

{
    "defaultSeverity": "error",
    "extends": [
        "tslint:recommended"
    ],
    "jsRules": {},
    "rules": {},
    "rulesDirectory": []
}

上記はデフォルトのtslint.jsonですが、上書きもできます。

下は上書きした一例です（『プログラミングTypeScript』を参考にしています）

{
    "defaultSeverity": "error",
    "extends": [
        "tslint:recommended"
    ],
    "rules": {
        "semicolon": false,
        "trailing-comma": false
    }
}

index.tsを作成する

次にsrcフォルダを作りましょう。
srcフォルダ内にindex.tsを作成します。

そのindex.tsに以下のようなコードを書きましょう。

// tslint:disable-next-line:no-console
console.log('Hello! TypeScript!')

コードを作成したら、以下のコマンドでコンパイルできます。

./node_modules/.bin/tsc

これで開発環境の準備は完了です。

Node.jsを使ってコードを実行してみましょう。

node ./dist/index.js
Hello! TypeScript!

以上となります。