TypeScript extends：扩展接口或类型

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 中出现在四个地方，含义相关但并不相同：

扩展多个接口

在 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

如果两个父接口声明了同名属性，而类型又不完全相同，子接口就会报错 TS2320（Interface 'Post' cannot simultaneously extend types 'A' and 'B'），除非子接口重新声明这个属性，并给它一个能同时赋值给两者的类型。

扩展类型别名

type 别名没有 extends 子句。要在它的基础上构建新类型，用交叉类型 &，它会合并两边的成员。接口也可以直接扩展对象类型别名，类型别名也可以和接口取交叉：两者可以自由混用。

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

在属性发生冲突之前，这两种方式的表现完全一样：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 把它从父类型中移除，再声明新的属性。常见的场景是转换 API 数据，其中的 id 和日期是以字符串形式传过来的：

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 一个类，但可以 implements 任意多个接口。implements 什么也不复制：它只检查类是否声明了接口要求的内容。super、受保护成员和 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 的意思都是“能赋值给”，和接口形式检查的是同一种关系。约束的详细介绍见泛型约束，类型层面的判断见条件类型。