TypeScriptのコンパイル

のコンパイル

ts_practiceディレクトリ内、index.tsファイルを作成します。

TypeScriptはJavaScriptの拡張言語ですので、JavaScriptのコードをそのまま記載できます。

以下のように記述してみましょう。

index.ts◎

console.log('こんにちは');

TypeScriptはこのままでは実行することができないので、JavaScriptにコンパイルしましょう。

コンパイルするには、tscコマンドを使用して、コンパイルしたいファイル名を指定します。

Warpを開いて、以下コマンドを実行します。

tsc index.ts

ts_practiceディレクトリを確認すると、index.jsファイルが作成されており、このように記述されているかと思います。

index.js

console.log('こんにちは');

これはtsファイルにて、JavaScriptの文法しか使用していないため、中身が全く同じjsファイルが作成されます。

次にindex.tsを以下のように書き換えてみます。

index.ts

let num: number = 10;
num = 'a';

変数の定義は上記のように、let numの後に: 型として、型を宣言し値を代入します。

もし以下のようにnumに別の型の値を入れようとすると、numの下に赤波線が引かれ、ホバーするとエラー分が表示されるかと思います。

静的型付け言語はこのように、コーディング時点で型チェックを行い、エラーを検知してくれます。

では2行目を削除しましょう。

index.ts

let num: number = 10;

この状態でコンパイルをしてみます。

tsc index.ts

index.jsに以下のように記述されているかと思います。

index.js

var num = 10;

varはJavaScriptのチャプターで説明しなかったですが、昔の変数の定義に使用していたもので、現在は基本的に使用しないので、気にしなくて大丈夫です。要はlet num = 10;と変換され、TypeScriptの構文がなくなります。