この記事ではTypeScriptの開発環境の構築手順をまとめています。
前提として、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!
以上となります。