【初めてのTypeScript】プログラムのコンパイルと実行

本記事では、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 機能により、プログラマはより綺麗で拡張性の高いコードを書くことができます。