TypeScriptをインストールし、JavaScriptへのコンパイル（トランスパイル）、および静的型付けによる型チェックについて説明します。
インストール
TypeScriptコンパイルは、Node.jsのパッケージ管理であるnpmでインストールします。
|
1 |
$ npm install -g typescript |
これでtscコマンドが利用できるようになりました。バージョンを確認してみます。
|
1 2 |
$ tsc -v Version 3.5.2 |
プロジェクトのための適当なディレクトリを作成します。
|
1 2 |
$ mkdir sample-project $ cd sample-project/ |
まずトランスパイル（コンパイル）のための設定ファイルを作成します。
|
1 |
$ tsc --init |
成功すると「tsconfig.json」というファイルが生成されます。このファイルにトランスパイル時の様々な設定を記述することができます。本記事では多くは説明しません。
次に拡張子が ts であるTypeScriptファイルを作成し、下記のように記述します。ファイル名は sample.ts にしました。TypeScriptの記述は基本的にはJavaScriptと変わりません。
|
1 2 |
let message: string = "Hello World" console.log(message) |
トランスパイルします。
|
1 |
$ tsc |
成功すると sample.js というJavaScriptファイルが生成されます。
|
1 2 3 |
"use strict"; var message = "Hello World"; console.log(message); |
Strictモードになっていることが確認できます。また変数宣言もvarに変わっています。これは上述したtsconfig.jsonファイルによるものです。
仮に、tsconfig.jsonファイルの「”strict”: true」を「”strict”: false」に、「”target”: “es5″」を「”target”: “ES2015″」に変更して再度トランスパイルすると、下記のように結果が変わります。
|
1 2 |
let message = "Hello World"; console.log(message); |
TypeScriptファイルの編集し保存した場合に、自動でコンパイルしてくれる監視モードを起動させることもできます。
|
1 |
$ tsc -w |
静的型付けによるチェック
TypeScriptでは「静的型付け」です。型を厳密にすることにより、バグを極力少なくすることが可能となります。「: string」のような記述をアノテーションと呼びます。
仮に上記で記述したstring型のmessageに「7」を代入してみます。
|
1 2 |
let message: string = 7 console.log(message) |
この時点で、Visual Studio Codeでは下記のように注意されます。
実際にトランスパイルしようとすると、エラーとなります。
|
1 2 3 4 5 6 7 8 |
$ tsc sample.ts:1:5 - error TS2322: Type '7' is not assignable to type 'string'. 1 let message: string = 7 ~~~~~~~ Found 1 error. |
下記コードは、関数の引数にアノテーションを指定しています。
|
1 2 3 4 |
const getSquare = (height: number, width: number) => height * width; let ans: number = getSquare(3, 4); console.log(ans); |
トランスパイルすると下記のように書き換えられました。
|
1 2 3 4 |
"use strict"; var getSquare = function (height, width) { return height * width; }; var ans = getSquare(3, 4); console.log(ans); |
もちろん引数に文字列を渡すとエラーになります（3行目）。
