interface の継承 extends のサンプルコード — TypeScript

1乗り物を継承した車の型

extends の最も基本的な形です。Car は Vehicle の wheels を引き継ぎつつ brand を追加するので、Car 型のオブジェクトは両方のプロパティを持つ必要があります。

TypeScript

interface Vehicle {
  wheels: number;
}

interface Car extends Vehicle {
  brand: string;
}

const myCar: Car = { wheels: 4, brand: "Toyota" };

console.log(myCar.brand);  // Car で追加したプロパティ
console.log(myCar.wheels); // Vehicle から継承したプロパティ

2id と作成日時を共通ベースにまとめる

全データが共通で持つ id や createdAt を1つの interface にまとめ、各データ型がそれを extends する形は実務の頻出パターンです。共通項目の定義が一箇所に集まり、変更にも強くなります。

TypeScript

interface BaseRecord {
  id: number;
  createdAt: string;
}

interface Article extends BaseRecord {
  articleTitle: string;
}

const news: Article = {
  id: 1,
  createdAt: "2026-06-01",
  articleTitle: "新機能を公開しました",
};

console.log(news.id + " / " + news.createdAt);
console.log(news.articleTitle);
// const wrong: Article = { articleTitle: "x" }; // id と createdAt がないのでエラー

33段階の継承チェーン

extends は何段でも重ねられ、子は祖先すべてのプロパティを引き継ぎます。生き物 → 動物 → 犬と具体化するにつれてプロパティが積み重なる様子を確かめてみましょう。

TypeScript

interface LivingThing {
  alive: boolean;
}

interface Animal extends LivingThing {
  legCount: number;
}

interface Dog extends Animal {
  breed: string;
}

// Dog は3つの interface のプロパティをすべて持つ
const pochi: Dog = { alive: true, legCount: 4, breed: "柴犬" };

console.log(pochi.breed);
console.log(pochi.legCount);
console.log(pochi.alive);

4複数の interface を同時に継承する

extends はカンマ区切りで複数の interface を指定できます。「名前を持つ」「更新日時を持つ」のような小さな性質を部品として用意し、組み合わせて型を作る実務的なテクニックです。

TypeScript

interface Named {
  displayName: string;
}

interface Timestamped {
  updatedAt: string;
}

// 2つの interface を同時に継承する
interface ReportFile extends Named, Timestamped {
  sizeKb: number;
}

const monthlyReport: ReportFile = {
  displayName: "6月売上レポート",
  updatedAt: "2026-06-10",
  sizeKb: 128,
};

console.log(monthlyReport.displayName);
console.log(monthlyReport.updatedAt + " 更新 / " + monthlyReport.sizeKb + "KB");

5親の型で受けて共通処理を書く

親の interface を引数の型にすると、それを extends したどの型の値も渡せます。エンティティの種類を問わず ID を表示する関数のように、共通部分だけに依存した処理を1つにまとめられるのが継承設計の実益です。

TypeScript

interface BaseEntity {
  id: number;
}

interface Customer extends BaseEntity {
  customerName: string;
}

interface Item extends BaseEntity {
  price: number;
}

// 親の型で受ければ、継承したどの型でも渡せる
function printId(entity: BaseEntity): void {
  console.log("ID: " + entity.id);
}

const customer1: Customer = { id: 101, customerName: "Taro" };
const item1: Item = { id: 201, price: 480 };
printId(customer1);
printId(item1);

サンプルコードで身につける: interface の継承 extends

1乗り物を継承した車の型

2id と作成日時を共通ベースにまとめる

33段階の継承チェーン

4複数の interface を同時に継承する

5親の型で受けて共通処理を書く