【TypeScript】型注釈（アノテーション）について理解しよう

TypeScriptの型注釈（アノテーション）とは

TypeScriptでは、変数や関数、オブジェクトなどのデータ型を明示的に指定するために、型注釈（アノテーション）を使用します。構文としては、変数名: データ型という形式で記述します。

変数に一度でも型注釈を付けると、そのデータ型のみを適応することができます。もし一度型アノテーションを記述した後、別のデータ型として使おうとするとTypeScriptコンパイラーがエラーを出します。

以下は定数と変数に型アノテーションを指定する構文です。

// 定数
const 定数名: データ型 = 値;

// 変数
let 変数名: データ型;
let 変数名: データ型 = 値;

変数にnumber型のアノテーションをつけるとこのようになります。

let sampleNumber: number;

上記でnumber型を指定した変数sampleNumberは、これ以降数値しか代入することができません。

sampleNumber = 100; // OK
sampleNumber = 'TypeScript' // コンパイルエラー

もし、number型の変数に文字列を代入するとTypeScriptがコンパイルエラーを発生させます。

また、変数宣言時に型アノテーションと値の代入を同時に行う場合、次のように書きます。

let sampleNumber: number = 100;

TypeScriptにおけるプリミティブ型の変数の型アノテーションは、このようになります。

let sampleString: string = 'banana';
let sampleNumber: number = 10;
let sampleNumber: boolean = true;

それでは次は、型アノテーションの少し応用的な使い方について解説していきます。

配列の型アノテーションを付けるには、特定のデータ型の後に角括弧を付けます。

let 変数名: データ型[];

例えば、文字列の配列を作成する場合だと以下のようになります。

let fruits: string[] = ['apple', 'grape', 'orange', 'banana']

オブジェクトに型を指定するには、オブジェクトの型アノテーションを使用します。基本的な構文は以下の通りです。

let 変数名: { プロパティ1: データ型; プロパティ2: データ型; }

例えば、文字列型のnameプロパティと数値型のageプロパティを持つ変数dogを定義しようとする場合、次のようになります。

let dog: {
  name: string;
  age: number
}

dog = {
  name: 'ポン太',
  age: 3
}

もちろん型アノテーションとオブジェクトの代入を一度に行うことも可能です。

let dog: {
  name: string;
  age: number
} = {
  name: 'ポン太',
  age: 3
}

以下は、関数の引数と戻り値に型アノテーションを記述する例です。

let makeNumber : (num1: number, num2: number) => number;

この例だと、引数に2つの数値を受け取り、最終的に戻り値として1つの数値を返す関数を、変数makeNumberに代入できます。

次のような関数であれば、変数makeNumberに代入することが可能ですね。

makeNumber = function (num1: number, num2: number) {
  return num1 + num2
}

けれども、以下のような関数だと関数の型が異なるため、エラーが発生してしまいます。

makeNumber = function (str1: string, str2: string) {
  return str1 + str2
}