なぜTypeScriptなのか、最初の型付きファイル

TypeScriptとは何か、それが解決する問題を知り、初めての型付きファイルを書いてみましょう。

6 分 · 3 問

あなたはすでに、Webページをインタラクティブにする言語であるJavaScriptを知っています。TypeScriptはJavaScriptの拡張です。有効なJavaScriptコードはすべて、そのままTypeScriptコードでもあります。その大きな追加要素が型です。型は値の性質を記述します。テキストなのか、数値なのか、真か偽か…。変数の型を明示することで、コードを実行する前にコンピューターに検証させることができます。

なぜこれが役立つのでしょうか。JavaScriptでは、数値が期待される場所にテキストを渡しても何も止めてくれません。プログラムはそのまま動いてしまい…、しばしばずっと後になって発見される不条理な結果を生み出します。次の例を見てください。この関数は価格を数値として期待していますが、テキストを受け取っています。

function addTax(price) {
  return price + price * 0.2;
}

const total = addTax("100");
console.log(total); // "10020" instead of 120!

TypeScriptでは、型注釈を追加します。パラメーターや変数の名前のすぐ後ろに、コロンとそれに続く型を書きます。TypeScriptコードはその後コンパイルされます。つまり、コンパイラー（tsc）と呼ばれるツールによって、普通のJavaScriptへ翻訳されるのです。型のエラーが検出され報告されるのは、まさにこの段階です。

function addTax(price: number): number {
  return price + price * 0.2;
}

const total = addTax(100);
console.log(total); // 120

では、初めての型付きファイルを書いてみましょう。TypeScriptファイルは .js の代わりに .ts という拡張子を使います。その中には、型注釈で豊かにした普通のJavaScriptを書きます。

let firstName: string = "Sarah";
let age: number = 28;

console.log(firstName + " is " + age + " years old.");

理解度チェック

このレッスンの要点をしっかり覚えているか確認しましょう。

1. JavaScriptに対して、TypeScriptとは何ですか。
   • JavaScriptとはまったく異なる言語
   • 型を追加するJavaScriptの拡張
   • JavaScriptを速くするためのツール
   • Webブラウザー
2. .ts ファイルをコンパイルすると何が起こりますか。
   • 普通のJavaScriptファイルに変換される
   • ブラウザーによって直接実行される
   • HTMLページに変換される
3. let age: number の注釈は何を意味しますか。
   • 変数 age は常にゼロである
   • 変数 age は数値しか保持できない
   • 変数 age はテキストである
   • 変数 age は省略可能である