TypeScript入門インターフェイスを定義しよう

抽象クラスと似た概念として「インターフェイス」というものがあります。まずは早速使ってみましょう。ここでは、商品を扱うインターフェイスを定義します。

interface Item {
  name: string;
  price: number;
  getTaxPrice(): number;
}

抽象クラスと似ていますが、最初の部分が「interface」になっています。ではこれを使って、実際のクラス「Food」を定義してみます。

class Food implements Item {
  name: string = "";
  price: number = 0;
  getTaxPrice(): number {
    return this.price * 1.08; // 8%
  }
}

そして使ってみましょう。

const peach = new Food();
peach.price = 150;
console.log(peach.getTaxPrice()); // 162

これまでと同様に、税込金額を求めることができました。

インターフェイスを実装する場合、「implements」という記述を利用します（実装するといった意味）。

抽象クラスとインターフェイスの違い

抽象クラスとインターフェイスは、似た性格を持っていますが、大きな違いとしては「継承はできない」という点があります。例えばここでは、プロパティを定義していますが実際のクラスでも改めて各プロパティを定義しています。これを省略するとエラーになります。

class Food implements Item { // error
  getTaxPrice(): number {
    return this.price * 1.08; // 8%
  }
}

抽象クラスでは、プロパティやメソッド（抽象メソッドではない、実際のメソッド）を定義して継承することができますが、インターフェイスは完全にルールだけを定義して、実際の「実装」はクラスを定義するときに任せています。

インターフェイスを利用することで、クラスの定義の方法が明確になり、各クラスを使いやすくなります。この「ルール」を強制するためのしくみがインターフェイスと言えます。

複数のインターフェイスの実装

インターフェイスが、抽象クラスと違う点としてもう一つあるのが「複数のインターフェイスを実装できる」という点にあります。例えばここでは、大きさを管理するための「Size」というインターフェイスを定義します。

interface Size {
  width: number;
  height: number;
}

そして、文具を管理する「Stationery」クラスでは、先のItemと合わせて、このSizeも実装することにしましょう。カンマ区切りで指定します。

class Stationery implements Item, Size {

すると、このStationeryクラスにはItemで定義されている各プロパティ、メソッドの他に、Sizeに定義されているプロパティもすべて実装しなければなりません。

class Stationery implements Item, Size {
  name: string = "";
  price: number = 0;
  width: number = 0;
  height: number = 0;
  getTaxPrice(): number {
    return this.price * 1.1; // 10%
  }
}
const eraser = new Stationery();
eraser.width = 20;
eraser.height = 10;
console.log(eraser.width);

こうすることで、各クラスになにが定義されているのかが分かりやすくなると言うわけです。

インターフェイスの継承

インターフェイスは継承することもできます。例えば、Itemインターフェイスを継承して賞味期限の実装も追加する「FoodItem」を定義してみましょう。

interface Item {
  name: string;
  price: number;
  getTaxPrice(): number;
}

interface FoodItem extends Item {
  limit: number;
}

すると、継承したインターフェイスを実装する場合は、「limit」も合わせて実装する必要があります。

class Food implements FoodItem {
  name: string = "";
  price: number = 0;
  limit: number = 0;
  getTaxPrice(): number {
    return this.price * 1.08; // 8%
  }
}