TypeScriptのインタフェースにまつわるあれこれ：TypeScriptのTypeあれこれシリーズ（10）

altJS、すなわち、JavaScriptの代わりとなる言語の筆頭であるTypeScript。そのTypeScriptは、言語名が示す通り、JavaScriptにType、つまり、型の概念を持ち込んだものです。本連載では、このTypeScriptのType（型）に関して、さまざまな方向から紹介していきます。前回は、既存のデータ型を組み合わせて新たなデータ型を定義できる型エイリアスを紹介しました。今回は、データ型を定義できるもうひとつの仕組みとして、インタフェースについてあれこれ紹介していきます。

[齊藤新三（著）／山田祥寛（監修），WINGSプロジェクト]

連載：TypeScriptのTypeあれこれシリーズ

型注釈インタフェース

　前回の最後に、オブジェクトリテラルを紹介しました。その際、型定義としてtypeキーワードを利用しました。型定義には、もうひとつ、インタフェースという仕組みも利用できます。

インタフェースの定義

　前回のリスト19のBMIDataを、インタフェースを利用して定義すると、リスト1のコードとなります。

interface BMIData {  // (1)
	name: string;
	height: number;
	weight: number;
	age?: number;
}
const taro: BMIData = {
	:
};

リスト1

　リスト1の（1）が、インタフェースを定義している部分です。構文としてまとめると、次のようになります。

［構文］インタフェースの定義
interface インタフェース名 {
	プロパティ名: データ型;
	:
}

　型エイリアスと違い、インタフェースは定義そのものなので、「=」による代入式ではありません。interfaceキーワードにインタフェース名を続けて、すぐに定義の波かっこブロックを記述します。また、代入式ではないので、閉じ波かっこの次のセミコロンは不要です。

　波かっこブロック内では、前回紹介した内容と同様に、「プロパティ名: データ型;」と記述します。

　なお、このようにインタフェースを型定義として利用する方法を、型注釈インタフェースといいます。というのは、型定義とは別の使い方があるからで、それについては後で紹介します。

インタフェースとtypeとの違い