TypeScript の Interface とは

Jan 25, 2021

Interface とは

TypeScript の Interface とは新しい Type （型）を作ること。

const oldCivic = {
  name: 'civic',
  year: 2000,
  broken: true,
};

上記変数を引数に受け取る関数を作る。

const printViecle = (vehicle: { name: string; year: number; broken: boolean }): void => {
  console.log(`Name: ${vehicle.name}`);
  console.log(`Year: ${vehicle.year}`);
  console.log(`Broken? ${vehicle.broken}`);
};
printViecle(oldCivic);

引数に Type Annotation をつけると長くなり、見づらい。

Interface を使うと見やすく書ける。

interface Vehicle {
  name: string;
  year: number;
  broken: boolean;
}

const oldCivic = {
  name: 'civic',
  year: 2000,
  broken: true,
};

const printViecle = (vehicle: Vehicle): void => {
  console.log(`Name: ${vehicle.name}`);
  console.log(`Year: ${vehicle.year}`);
  console.log(`Broken? ${vehicle.broken}`);
};

printViecle(oldCivic);

また、必要なプロパティのみの Interface も可能。

interface Vehicle {
  summary(): string
}

const oldCivic = {
  name: 'civic',
  year: 2000,
  broken: true,
  summary(): string {
    return `Name: ${this.name}`;
  }
};

const printViecle = (vehicle: Vehicle): void => {
  console.log(vehicle.summary());
};

printViecle(oldCivic);

oldCivic には summary() 以外にもプロパティが存在しているがエラーにならない。

こうなると Interface の Vehicle という名前が適さなくなる。同様に printVehicle という名前も。

以下のように変更する。

interface Reportable {
  summary(): string;
}

const oldCivic = {
  name: 'civic',
  year: new Date(),
  broken: true,
  summary(): string {
    return `Name: ${this.name}`;
  }
};

const printSummary = (item: Reportable): void => {
  console.log(item.summary());
};

printSummary(oldCivic);

より汎用的な名前に変更することによって使いまわしたときにも適切な名前を保てる。

interface Reportable {
  summary(): string;
}

const oldCivic = {
  name: 'civic',
  year: new Date(),
  broken: true,
  summary(): string {
    return `Name: ${this.name}`;
  }
};

const drink = {
  color: 'brown',
  carbonated: true,
  sugar: 40,
  summary(): string {
    return `My drink has ${this.sugar} grams of sugar`;
  }
};

const printSummary = (item: Reportable): void => {
  console.log(item.summary());
};

printSummary(oldCivic);
printSummary(drink);

Vehicle のまま drink に使うと適切な名前ではない。

printSummary に Type Annotation をつけることによって、この関数ではプロパティに summary() メソッドを持ちかつ返り値が void のオブジェクトを受け取ることがわかり、条件を満たしていない引数を受け取ったらその段階でエラーがわかる。