本記事では、TypeScriptで簡単なプログラムを書き、コンパイルしてWebページで利用する方法を学びます。
コードエディターで新しいファイルを作成し、add.tsと名付け、その中に以下のコードを記述してください。
function addNumbers(a: number, b: number) {
return a + b;
}
var sum: number = addNumbers(10, 15)
console.log('Sum of the two numbers is: ' +sum); 上記のTypeScriptコードは、addNumbers()関数を定義して呼び出し、その結果をブラウザのコンソールに記録しています。
ターミナルを開き、add.tsを保存したパスに移動して、次のコマンドでプログラムをコンパイルします。
$ tsc add.ts上記のコマンドを実行すると、TypeScriptファイルadd.tsがコンパイルされ、同じ場所にadd.jsというJavascriptファイルが作成されます。
add.jsファイルには、以下のコードが含まれています。
function addNumbers(a, b) {
return a + b;
}
var sum = addNumbers(10, 15);
console.log('Sum of the two numbers is: ' + sum);このように、TypeScriptコンパイラはadd.tsのTypeScriptファイルをJavascriptファイルadd.jsにコンパイルしています。これで、scriptタグを使ってadd.jsファイルをWebページで読み込み、ブラウザの開発者コンソールで結果を確認できるようになりました。
では、addNumbers()関数に数値ではなく文字列のパラメータを渡した場合、TypeScriptはどのようにプログラムをコンパイルするのかを見てみましょう。
add.ts の var sum:number = addNumbers(10, 15) を var sum:number = addNumbers(10,’abc’) に置き換え、ターミナルで add.ts ファイルを再度コンパイルしてください。
以下のようなコンパイルエラーが発生するはずです。
$ tsc add.ts
add2.ts(5,32): error TS2345: Argument of type 'abc' is not assignable to parameter of type 'number'.つまり、TypeScriptは、数値を期待する関数に文字列を渡しても、コードをコンパイルしません。また、ほとんどのIDEは、コードをコンパイルせずに、即座にTypeScriptのエラーを表示します。
このように、型アノテーションによる静的な型チェックや、インターフェイス、クラス、モジュールといったいくつかの TypeScript 機能により、プログラマはより綺麗で拡張性の高いコードを書くことができます。
