TypeScriptのextends: interfaceとtypeを拡張する

interface Child extends Parent は、Parent のすべてのメンバーと自分のメンバーを持つ新しいインターフェースを作ります。子の型の値は、親のプロパティをすべて持っているので、親が期待される場所ならどこでも使えます。

interface Animal {
  name: string;
  age: number;
}

interface Dog extends Animal {
  breed: string;
  bark(): string;
}

const rex: Dog = {
  name: "Rex",
  age: 4,
  breed: "collie",
  bark() {
    return `${this.name} says woof`;
  },
};

function birthday(a: Animal): number {
  return a.age + 1;
}

console.log(rex.bark());    // Rex says woof
console.log(birthday(rex)); // 5: a Dog is also an Animal

TypeScriptでは同じキーワードが4つの場所に現れ、意味は関連していますが違います:

複数のインターフェースを拡張する

extends のあとに複数の親をカンマ区切りで並べます。結果はそのすべてのメンバーを持ちます:

interface Identified {
  id: number;
}

interface Timestamped {
  createdAt: Date;
  updatedAt: Date;
}

interface Post extends Identified, Timestamped {
  title: string;
}

// Post requires id, createdAt, updatedAt and title

2つの親が同じプロパティを同一でない型で宣言していると、子はエラー TS2320（Interface 'Post' cannot simultaneously extend types 'A' and 'B'）になります。ただし、子がそのプロパティを両方に代入できる型で再宣言すれば別です。

型エイリアスを拡張する

type エイリアスには extends 句がありません。交差型 & で両辺のメンバーを組み合わせて拡張します。インターフェースはオブジェクト型のエイリアスを直接拡張することもでき、型エイリアスはインターフェースと交差させられます。2種類は自由に混ぜられます。

type Timestamps = { createdAt: string; updatedAt: string };
type WithId = { id: number };

// type alias: extend with &
type Post = WithId & Timestamps & { title: string };

// interface: extends works on object type aliases too
interface Reply extends WithId, Timestamps {
  postId: number;
  body: string;
}

const post: Post = { id: 1, title: "Hello", createdAt: "2024-03-15", updatedAt: "2024-03-15" };
const reply: Reply = { id: 7, postId: 1, body: "Nice", createdAt: "2024-03-16", updatedAt: "2024-03-16" };

console.log(post.title, reply.body, reply.postId === post.id); // Hello Nice true

2つの方法は、プロパティが衝突するまでは同じように動きます。extends は衝突するプロパティを宣言の位置で報告し、& は黙ってそれを never にします。比較は interface と type のページに、& の詳細は交差型のページにあります。

プロパティの型を上書きする

子のインターフェースは親のプロパティを再宣言できますが、親の型に代入できる型でだけです。string をリテラルに狭めたり、ユニオン型から null を取り除いたりするのは許されます。無関係な型に変えることは許されません:

// This does not compile: kind cannot become a number
interface Shape {
  kind: string;
  color: string | null;
}

interface Circle extends Shape {
  kind: "circle"; // narrower than string: allowed
  color: string;  // narrower than string | null: allowed
  radius: number;
}

interface Label extends Shape {
  kind: number;   // not assignable to string: error
}

const c: Circle = { kind: "circle", color: "red", radius: 2 };
console.log(c);

index.ts(13,11): error TS2430: Interface 'Label' incorrectly extends interface 'Shape'.
  Types of property 'kind' are incompatible.
    Type 'number' is not assignable to type 'string'.

このルールがあるのは、Label を Shape が期待される場所のどこでも使えるようにするためです。kind が数値になりうるなら、Shape 向けに書かれた shape.kind.toUpperCase() を呼ぶコードが壊れてしまいます。

Omit でプロパティを置き換える

継承したプロパティに本当に別の型が必要なときは、先に Omit で親から取り除き、それから新しいプロパティを宣言します。よくあるのは、ID や日付が文字列で届くAPIのデータを変換する場合です:

interface ApiUser {
  id: string; // the API sends ids as strings
  name: string;
  createdAt: string;
}

// Drop the properties to change, then declare them again
interface User extends Omit<ApiUser, "id" | "createdAt"> {
  id: number;
  createdAt: Date;
}

function toUser(raw: ApiUser): User {
  return { ...raw, id: Number(raw.id), createdAt: new Date(raw.createdAt) };
}

const u = toUser({ id: "42", name: "Ada", createdAt: "2024-03-15T10:30:00Z" });
console.log(u.id + 1, u.createdAt.toISOString()); // 43 2024-03-15T10:30:00.000Z

Omit<ApiUser, "id" | "createdAt"> は { name: string } なので、新しい id と createdAt は何とも衝突しません。Pick、Partial など、ほかのユーティリティ型も同じように拡張できます。

クラスの extends

class Dog extends Animal はJavaScriptのクラス継承で、インターフェースの extends と違って実行時に存在します。Dog は Animal のコンストラクター、フィールド、メソッドの実装を受け取り、new Dog(...) instanceof Animal は true です。TypeScriptはその上に、override キーワードのような型チェックを加えます:

class Animal {
  constructor(public name: string) {}
  speak(): string {
    return `${this.name} makes a sound`;
  }
}

class Dog extends Animal {
  override speak(): string {
    return `${this.name} barks`;
  }
}

const pets: Animal[] = [new Animal("Generic"), new Dog("Rex")];
for (const p of pets) console.log(p.speak());
// Generic makes a sound
// Rex barks

クラスが extends できるクラスは1つだけですが、インターフェースはいくつでも implements できます。implements は何もコピーせず、インターフェースが要求するものをクラスが宣言しているかをチェックするだけです。super、protected メンバー、override については 継承 で説明しています。

ジェネリクスと条件型の extends

山かっこの中の extends は制約です。<T extends { length: number }> は数値の length を持つあらゆる型引数を受け付け、関数の本体で .length を使えるようにします。条件型の T extends U ? X : Y は、T が U に代入できるかを問います。

// Generic constraint: T must have a length property
function longest<T extends { length: number }>(a: T, b: T): T {
  return a.length >= b.length ? a : b;
}

console.log(longest("apple", "fig"));    // apple
console.log(longest([1, 2], [1, 2, 3])); // [ 1, 2, 3 ]

// @ts-expect-error: Argument of type 'number' is not assignable to parameter of type '{ length: number; }'.
longest(10, 20);

// Conditional type: a type-level if/else
type IsString<T> = T extends string ? "yes" : "no";
const a: IsString<"hi"> = "yes";
const b: IsString<42> = "no";
console.log(a, b); // yes no

どちらの場所でも extends は「代入できる」という意味で、インターフェースの形がチェックする関係と同じです。制約については ジェネリクスの制約 で、型レベルのテストについては 条件型 で詳しく扱います。