TypeScript Academy · 课时

接口扩展与合并

Q: 「接口扩展与合并」这节课中我会学到什么？

扩展接口并理解声明合并 你通过在浏览器中直接运行的动手代码来练习 TypeScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

扩展接口并理解声明合并

接口扩展与合并 是 CoddyKit 上的免费 TypeScript Academy 课时。这是第 3 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 TypeScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 TypeScript Academy 课程共包含 4 节课。

欢迎

接口可以扩展其他接口，从而在现有结构的基础上构建新结构；TypeScript 还会自动合并同一接口的多个声明。

扩展接口

使用 `extends` 关键字创建一个包含父接口全部属性的新接口。

interface Animal { name: string; }
interface Dog extends Animal {
  breed: string;
}
const rex: Dog = { name: 'Rex', breed: 'Labrador' };

扩展多个接口

一个接口可以同时扩展多个接口，将它们的全部属性组合起来。

interface Flyable { fly(): void; }
interface Swimmable { swim(): void; }
interface Duck extends Flyable, Swimmable {
  quack(): void;
}

扩展时覆盖属性

扩展接口可以覆盖父接口中的属性，但新类型必须可以赋值给父类型。

interface Base { value: string | number; }
interface Derived extends Base { value: string; } // OK — string is narrower
// interface Bad extends Base { value: boolean; } // Error

声明合并

当您声明两个同名接口时，TypeScript 会将它们合并为一个包含全部属性的接口。

interface Window { title: string; }
interface Window { location: Location; }
// Merged: Window has both title and location

扩展库类型

声明合并可用于扩展第三方类型。例如，可以向第三方框架的 Request 接口添加属性。

// express.d.ts
declare namespace Express {
  interface Request {
    user?: User;
  }
}

接口扩展类型别名

只要类型别名是对象类型，接口就可以扩展它。

type Named = { name: string };
interface User extends Named { email: string; }

嵌套扩展链

扩展链可以有多个层级。

interface A { a: number; }
interface B extends A { b: number; }
interface C extends B { c: number; }
const obj: C = { a: 1, b: 2, c: 3 };

扩展与实现

`extends` 用于接口到接口或类到类的继承。`implements` 用于让类履行接口契约。

interface Serializable { serialize(): string; }
class Model implements Serializable {
  serialize() { return JSON.stringify(this); }
}

合并会影响所有使用处

接口合并后，所有使用该接口的现有代码都会自动获得新属性，这正是库扩展能够生效的原因。

合并与扩展：分别何时使用

使用 `extends` 基于现有接口创建新接口。使用合并（同名）从单独的文件向接口添加内容，例如进行库扩展。

快速检查

哪项 TypeScript 功能允许您向第三方库的接口添加属性？

回顾

接口使用 `extends` 扩展其他接口，并组合它们的结构。声明合并会自动组合同名接口。这使您无需修改第三方代码即可扩展库。

常见问题解答

「接口扩展与合并」课时是免费的吗？

是的 — 「接口扩展与合并」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 TypeScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 TypeScript Academy 课程共包含 4 节课。

「接口扩展与合并」这节课中我会学到什么？

扩展接口并理解声明合并你通过在浏览器中直接运行的动手代码来练习 TypeScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 TypeScript Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 TypeScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 3 节课，共 4 节。

「接口扩展与合并」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 TypeScript Academy 课中编写并运行代码吗？

能。每节 TypeScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 TypeScript Academy