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

2024.4.23

INDEX

はじめに

初めてのTypeScriptを読みました。
その学習を記録します。

結論

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

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

メリット

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

継承が深い場合など可読性がバグに繋がる可能性があるので、注意！！

使い方

OK: 問題がないパターン

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

interface Writing {
  title: string;
}

interface Novella extends Writing {
  page: number;
}

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

NG: 継承先の型が不足している

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',
}

NG: 継承元の型が不足している

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,
}

よかったらシェアしてね！

URLをコピーしました！

この記事を書いた人

naoki-furuta

Born in 1994
Engineer's career is from 2020.10
Skill: Next.js, TypeScript, Django, Python, HTML, CSS

この著者の記事一覧へ