TypeScriptを使う大きなメリットとして変数などに型を指定することができます。
JavaScriptでは指定できないため、1つの変数に色んな値を代入してもエラーとはなりません。

JavaScriptでは型を宣言できない

JavaScriptでは1つの変数に異なる型を代入してもエラーにはなりません。
「エラーにならないのならいいのでは？」と思うかもしれませんが、あとでプログラムを見直した時に、変数にどのような型が入っているのかがわからないというのはリスクとなってしまいます。（保守性が悪い）

プログラム

let value = 100; // 数値
console.log(value);
value = "I have a pen"; // 文字列
console.log(value);
value = [1, 2, 3]; // 配列
console.log(value);

実行結果

100
I have a pen
[ 1, 2, 3 ]

TypeScriptで型を宣言してみる

先ほどのプログラムで変数valueに型（number）を指定してみましょう。

プログラム

let value: number = 100; // 数値　←number型を宣言
console.log(value);
value = "I have a pen"; // 文字列
console.log(value);
value = [1, 2, 3]; // 配列
console.log(value);

上記プログラムをトランスパイルする際には以下のようなエラーが発生します。
（お使いのエディタ次第ではプログラムを書いている時点でエラーメッセージが表示されるかもしれません）

main.ts:3:1 - error TS2322: Type 'string' is not assignable to type 'number'.

3 value = "I have a pen"; // 文字列
  ~~~~~

main.ts:5:1 - error TS2322: Type 'number[]' is not assignable to type 'number'.

5 value = [1, 2, 3]; // 配列
  ~~~~~


Found 2 errors in the same file, starting at: main.ts:3

型の代入ミスを事前に発見することでプログラムの品質を確保できるようになります。

型の種類を見てみる

  • string
    文字列
  • number
    数値
  • boolean
    true / false
  • Arrays
    配列
  • any
    なんでもあり
let age: number = 100;

let myName: string = "Takeshi";

let schoolHistory: Array = ["primary school", "junior high school", "high school"];

let value: any = 100;
value = "I have a pen";
value = [1, 2, 3];