[TypeScript] インターフェース(interface)を継承する

はじめに

この記事では、コードをシンプルに書けるインターフェース(interface)を継承する方法を解説します。

参考資料

結論

interface 継承元 {
  変数名1: データ型;
}

interface 継承先 extends 継承元 {
  変数名2: データ型;
}

メリット

• 似たようなコードを複数書くことが軽減する事が可能

デメリット

• 注意: 継承が深い場合など可読性がバグに繋がる可能性がある

1. 問題がないパターン

Writingが継承されて構文エラーが発生していない

interface Writing {
  title: string;
}

interface Novella extends Writing {
  page: number;
}

const MyNovella: Novella = {
  page: 100,
  title: 'MyNovella',
}

2. 継承先の型が不足

page: 100が足りない為、下記のようなエラーが発生する
Property 'page' is missing in type '{ title: string; }' but required in type 'Novella'.

interface Writing {
  title: string;
}

interface Novella extends Writing {
  page: number;
}

const MyNovella: Novella = {
  title: 'MyNovella',
}

3. 継承元の型が不足

title: 'MyNovella'が足りない為、下記のようなエラーが発生する
Property 'title' is missing in type '{ page: number; }' but required in type 'Novella'.

interface Writing {
  title: string;
}

interface Novella extends Writing {
  page: number;
}

const MyNovella: Novella = {
  page: 100,
}