本文献给：
已掌握 TypeScript 接口基本用法、可选属性、只读属性、索引签名以及 keyof / typeof 基础知识的开发者。本文将带你学习接口之间的继承（单继承与多继承）、接口继承类，以及混合类型接口（同时作为函数和对象）的实现方式。
你将学到：
- 接口的单继承与多继承语法
- 接口继承接口时的属性合并与覆盖规则
- 接口继承类的工作原理
- 混合类型接口的定义与应用场景
- 接口继承与类型别名交叉的对比
目录
- 一、接口的单继承（extends）
- 二、接口的多继承
- 三、接口继承类
- [四、混合类型接口（Hybrid Types）](#四、混合类型接口（Hybrid Types）)
-
- [4.1 基本语法](#4.1 基本语法)
- [4.2 内置的混合类型示例](#4.2 内置的混合类型示例)
- [4.3 实现混合类型的注意事项](#4.3 实现混合类型的注意事项)
- 五、接口继承与类型别名交叉的对比
- 六、常见错误与注意事项
-
- [6.1 接口继承时属性类型不一致](#6.1 接口继承时属性类型不一致)
- [6.2 多继承中同名方法签名冲突](#6.2 多继承中同名方法签名冲突)
- [6.3 实现混合类型接口时忘记添加属性](#6.3 实现混合类型接口时忘记添加属性)
- [6.4 接口继承类后，实现接口的类必须继承该基类](#6.4 接口继承类后，实现接口的类必须继承该基类)
- [6.5 滥用混合类型导致复杂度过高](#6.5 滥用混合类型导致复杂度过高)
- 七、综合示例
- 八、小结
一、接口的单继承（extends）
接口可以通过 extends 关键字继承另一个接口，从而获得父接口的所有属性。
typescript
interface Person {
name: string;
age: number;
}
interface Employee extends Person {
employeeId: string;
department: string;
}
const emp: Employee = {
name: "Alice",
age: 30,
employeeId: "E123",
department: "Engineering"
};子接口可以添加新的属性，也可以覆盖父接口中同名属性的类型（但必须兼容）。
typescript
interface Base {
id: string;
value: any;
}
interface Derived extends Base {
value: number; // OK，number 兼容 any
}如果覆盖的类型不兼容，会报错：
typescript
interface Base {
value: string;
}
interface Derived extends Base {
value: number; // ❌ 类型 number 不能赋给 string
}二、接口的多继承
TypeScript 接口支持同时继承多个接口，使用逗号分隔。
typescript
interface Nameable {
name: string;
}
interface Ageable {
age: number;
}
interface Person extends Nameable, Ageable {
email: string;
}
const p: Person = {
name: "Bob",
age: 25,
email: "bob@example.com"
};多继承时，如果多个父接口有同名属性但类型不同，子接口中该属性的类型会变成这些类型的交集（&），可能导致无法满足（变成 never）。
typescript
interface A {
value: string;
}
interface B {
value: number;
}
interface C extends A, B {
// value 类型为 string & number → never
}
// 无法创建满足 C 的对象这种情况下需要重新设计接口，避免属性名冲突。
三、接口继承类
接口不仅可以继承接口，还可以继承类。当接口继承一个类时，它会继承该类的所有成员（包括 private 和 protected），但不包含实现。
typescript
class Control {
private state: boolean;
protected id: number;
public name: string;
}
interface SelectableControl extends Control {
select(): void;
}
class Button extends Control implements SelectableControl {
select() {
console.log("selected");
}
}接口继承类之后，只有该类的子类才能实现这个接口（因为 private 和 protected 成员需要被继承）。
typescript
// 错误：普通对象无法实现继承自类的接口
const obj: SelectableControl = { // ❌
name: "btn",
select() {},
// 缺少 private state 和 protected id
};这种模式常用于控制类的层级结构，确保实现了某个接口的类必须是某个基类的子类。
四、混合类型接口（Hybrid Types）
JavaScript 中函数本身也是对象，可以拥有属性。TypeScript 允许接口同时包含调用签名和属性签名，描述这种混合类型的对象。
4.1 基本语法
typescript
interface Counter {
(start: number): string; // 可调用
count: number; // 属性
reset(): void; // 方法
}
function createCounter(): Counter {
const counter = ((start: number) => {
counter.count = start;
return `Count: ${counter.count}`;
}) as Counter;
counter.count = 0;
counter.reset = () => {
counter.count = 0;
};
return counter;
}
const c = createCounter();
console.log(c(5)); // "Count: 5"
console.log(c.count); // 5
c.reset();
console.log(c.count); // 04.2 内置的混合类型示例
DOM 中的 setTimeout 既是函数调用，又包含一些属性（尽管实际很少用到）。
typescript
declare var setTimeout: {
(handler: TimerHandler, timeout?: number, ...args: any[]): number;
[Symbol.toPrimitive](): number;
};Promise 构造函数也是混合类型：既可以 new Promise(...)，又有 Promise.resolve() 静态方法。它的类型定义大致如下：
typescript
interface PromiseConstructor {
new <T>(executor: (resolve: (value: T | PromiseLike<T>) => void, reject: (reason?: any) => void) => void): Promise<T>;
resolve<T>(value: T): Promise<T>;
reject<T = never>(reason?: any): Promise<T>;
// ...
}4.3 实现混合类型的注意事项
实现混合类型对象时，由于函数和属性需要同时存在，常用技巧是：先声明一个函数，再通过类型断言或 Object.assign 添加属性。
typescript
interface Logger {
(msg: string): void;
prefix: string;
setPrefix(p: string): void;
}
// 方法一：类型断言
const logger = ((msg: string) => {
console.log(`${logger.prefix}: ${msg}`);
}) as Logger;
logger.prefix = "[LOG]";
logger.setPrefix = (p: string) => { logger.prefix = p; };
// 方法二：Object.assign
const logger2 = Object.assign(
(msg: string) => console.log(msg),
{ prefix: "[LOG]", setPrefix(p: string) { this.prefix = p; } }
) as Logger;五、接口继承与类型别名交叉的对比
接口继承（extends）和类型别名交叉（&）都可以组合多个类型，但有细微差别。
| 特性 | interface extends |
type 交叉 & |
|---|---|---|
| 错误信息 | 更清晰、更友好 | 有时产生复杂的联合类型错误 |
| 同名属性冲突 | 要求兼容，否则报错 | 生成交集类型（可能变为 never） |
| 继承类 | 支持 | 不支持（& 不会处理私有成员） |
| 声明合并 | 同名接口自动合并 | 同名 type 会冲突 |
| 可表示的类型范围 | 只能描述对象/函数/索引签名 | 联合、元组、基本类型等 |
typescript
// 接口继承在属性冲突时报错更早
interface A { x: string; }
interface B { x: number; }
interface C extends A, B {} // ❌ 错误清晰
// 交叉类型产生 never，但可能不报错直到使用
type D = A & B;
const d: D = { x: "hello" as any }; // 实际使用时才暴露问题通常，描述对象形状且希望获得更好的错误提示时，优先用接口继承；组合复杂类型（如联合、元组）时用 type 交叉。
六、常见错误与注意事项
6.1 接口继承时属性类型不一致
typescript
interface A { value: string; }
interface B extends A { value: number; } // ❌要么保持类型一致，要么应用更宽泛的类型（父为 any 或 unknown）。
6.2 多继承中同名方法签名冲突
typescript
interface Clickable {
click(): void;
}
interface Draggable {
click(x: number, y: number): void;
}
interface UIElement extends Clickable, Draggable {
// click 方法需要同时满足两种签名 → 变成函数重载
}TypeScript 允许这种情况，子接口中的方法会变成重载签名。
6.3 实现混合类型接口时忘记添加属性
typescript
interface Toggle {
(): boolean;
state: boolean;
}
const toggle: Toggle = () => {
// toggle.state 可能未定义
return toggle.state = !toggle.state;
};
toggle.state = false; // 需要手动初始化确保在实现时正确初始化所有属性。
6.4 接口继承类后，实现接口的类必须继承该基类
typescript
class Base {
private secret: string;
}
interface Derived extends Base {
method(): void;
}
class Impl implements Derived { // ❌
method() {}
}
// 错误：Impl 缺少 secret 属性，且不是 Base 的子类正确的做法是 class Impl extends Base implements Derived。
6.5 滥用混合类型导致复杂度过高
混合类型接口适合少数场景（如库入口函数、计数器、延迟函数）。大多数情况下，将函数和对象职责分离更清晰。
七、综合示例
typescript
// 1. 接口多继承：描述一个有权限的用户
interface Identifiable {
id: number;
}
interface Timestamped {
createdAt: Date;
updatedAt: Date;
}
interface Permission {
canRead: boolean;
canWrite: boolean;
}
interface AdminUser extends Identifiable, Timestamped, Permission {
name: string;
role: "admin";
}
const admin: AdminUser = {
id: 1,
createdAt: new Date(),
updatedAt: new Date(),
canRead: true,
canWrite: true,
name: "SuperUser",
role: "admin"
};
// 2. 接口继承类：插件系统基础类
class PluginBase {
private _enabled = true;
protected version = "1.0";
public name = "plugin";
enable() { this._enabled = true; }
disable() { this._enabled = false; }
}
interface LoggerPlugin extends PluginBase {
log(message: string): void;
}
class FileLogger extends PluginBase implements LoggerPlugin {
log(message: string) {
console.log(`[${this.version}] ${message}`);
}
}
// 3. 混合类型接口：事件发射器同时作为函数和对象
interface Emitter {
(event: string, data?: any): void; // 触发事件
on(event: string, handler: Function): void;
off(event: string, handler: Function): void;
_events: Map<string, Function[]>;
}
function createEmitter(): Emitter {
const events = new Map<string, Function[]>();
const emitter = ((event: string, data?: any) => {
const handlers = events.get(event);
if (handlers) {
handlers.forEach(h => h(data));
}
}) as Emitter;
emitter._events = events;
emitter.on = (event, handler) => {
if (!events.has(event)) events.set(event, []);
events.get(event)!.push(handler);
};
emitter.off = (event, handler) => {
const handlers = events.get(event);
if (handlers) {
const idx = handlers.indexOf(handler);
if (idx !== -1) handlers.splice(idx, 1);
}
};
return emitter;
}
const ee = createEmitter();
ee.on("click", () => console.log("clicked"));
ee("click"); // 触发八、小结
| 概念 | 语法示例 | 说明 |
|---|---|---|
| 单继承 | interface B extends A |
获得 A 的所有属性 |
| 多继承 | interface D extends A, B, C |
合并多个接口的属性 |
| 接口继承类 | interface I extends MyClass |
继承私有/保护成员，仅子类可实现 |
| 混合类型接口 | { (): void; prop: T; method(): void; } |
同时描述函数和对象 |
与 type 交叉对比 |
接口继承报错更早，更适合对象形状扩展 | 优先使用 extends |
觉得文章有帮助？别忘了：
👍 点赞 👍 -- 给我一点鼓励
⭐ 收藏 ⭐ -- 方便以后查看
🔔 关注 🔔 -- 获取更新通知
标签： #TypeScript #接口继承 #多继承 #混合类型 #学习笔记 #前端开发