ここでは、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()関数を定義し、それを呼び出してブラウザのコンソールに結果をログに出力するものです。
次に、Windowsのコマンドプロンプト(またはあなたが使っているプラットフォームのターミナル)を開き、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ファイルを再コンパイルします。 以下のコンパイルエラーが発生します。
C:> 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機能により、プログラマーは、よりクリーンでスケーラブルなコードを書き、チーム全体で共有できるようになります。