まくろぐ

TypeScriptの型: インタフェースを定義する (interface)

更新:
作成:
TypeScript のインタフェースは、あるインスタンスがどのようなプロパティ、メソッドを持っているかの仕様を定義します。

プロパティを定義する

次の例では、2 つのプロパティ xy を持つインタフェース Point を定義しています。

// Point インタフェースの定義
interface Point {
  x: number;
  y: number;
}

このインタフェースを使って、次のようにオブジェクトを生成することができます。 オブジェクトを生成するときには、インタフェースで定義されているすべてのプロパティに値を設定してやる必要があります。

// Point 型のオブジェクトを生成
const p: Point = { x: 10, y: 20 };

// 内容を出力してみる
console.log(`x=${p.x}, y=${p.y}`);  //=> x=10, y=20

Java などと異なり、TypeScript ではインタフェース定義さえあれば、上記のようにその型のオブジェクトを生成することができます(Java では厳密にはクラス定義がないとオブジェクトを生成できません)。 そのため、TypeScript では、interface キーワードを使ったインタフェース定義の頻度が高くなります。

TypeScript のインタフェースは、拡張に対してオープンであり、次のように後付けでプロパティを追加することができます。

interface Point {
  x: number;
  y: number;
}

// Point インタフェースにプロパティを追加
interface Point {
  z: number;
}

const p: Point = { x: 1, y: 2, z: 3 };

メソッドを定義する

インタフェースでは、オブジェクトが持つべきメソッドを定義することができます。 次の Product インタフェースは、2 つのプロパティ nameprice の他に、1 つのメソッド calcTotal() を持つ型を示しています。

// Product インタフェースを定義
interface Product {
  name: string;
  price: number;
  calcTotal(quantity: number): number;
}

この Product 型のオブジェクトを生成するには次のようにします。 プロパティの値だけではなく、メソッドの実装もこのタイミングで渡す必要があります。

// Product 型のオブジェクトを生成
const prod: Product = {
  name: 'Brown Shelf',
  price: 250,
  calcTotal(quantity: number): number {
    return this.price * quantity;
  }
};

console.log(prod.calcTotal(4));  //=> 1000

もっとも、オブジェクト生成時に上記のように毎回メソッドの実装を渡していては大変なので、このような場合は、通常はクラス定義を使用します。

関連記事

まくろぐ
サイトマップまくへのメッセージ