深入理解 TypeScript 中的 implements 和 extends：区别与应用场景

TypeScript 作为 JavaScript 的超集，通过引入类型系统和面向对象编程特性，大大提升了大型应用的开发体验。其中 implements 和 extends 是两个核心关键字，它们虽然都与类型继承相关，但用途和机制却大不相同。本文将全面解析这两个关键字的区别，并通过实际示例展示它们的应用场景。

一、面向对象编程基础概念

在深入探讨 implements 和 extends 之前，我们需要先了解几个面向对象编程（OOP）的基本概念：

1. 继承（Inheritance）：允许一个类获得另一个类的属性和方法

2. 接口（Interface）：定义行为的抽象，不包含具体实现

3. 实现（Implementation）：类提供接口定义的具体行为

TypeScript 通过 extends 和 implements 关键字实现了这些 OOP 概念，但它们的应用方式和目的有所不同。

二、extends 关键字详解

2.1 类继承类

extends 最基本的用法是类继承另一个类：

class Animal {
  name: string;
  
  constructor(name: string) {
    this.name = name;
  }
  
  move(distance: number = 0) {
    console.log(`${this.name} moved ${distance}m`);
  }
}

class Dog extends Animal {
  breed: string;
  
  constructor(name: string, breed: string) {
    super(name); // 调用父类构造函数
    this.breed = breed;
  }
  
  bark() {
    console.log('Woof! Woof!');
  }
}

const dog = new Dog('Buddy', 'Golden Retriever');
dog.move(10); // 继承自Animal
dog.bark();   // Dog类自有方法

关键点：

• 子类获得父类所有公共和受保护的成员

• 通过 super 调用父类构造函数和方法

• 支持方法重写（Override）

2.2 接口继承接口

extends 也可以用于接口继承另一个或多个接口：

interface Shape {
  color: string;
}

interface PenStroke {
  penWidth: number;
}

interface Square extends Shape, PenStroke {
  sideLength: number;
}

const square: Square = {
  color: "blue",
  penWidth: 5.0,
  sideLength: 10
};

特点：

• 接口可以多继承

• 合并多个接口的类型定义

• 不会产生任何运行时代码

2.3 类继承与接口继承的区别

虽然都是 extends，但类继承和接口继承有本质不同：

• 类继承：

  • 获得实现（方法体）

  • 运行时存在继承关系

  • 单继承限制

• 接口继承：

  • 只是类型合并

  • 编译时检查

  • 允许多继承

三、implements 关键字详解

3.1 基本用法

implements 用于类实现一个或多个接口：

interface Animal {
  name: string;
  move(distance: number): void;
}

class Dog implements Animal {
  name: string;
  
  constructor(name: string) {
    this.name = name;
  }
  
  move(distance: number) {
    console.log(`${this.name} ran ${distance}m`);
  }
  
  bark() {
    console.log('Woof!');
  }
}

关键点：

• 类必须实现接口中定义的所有成员

• 可以添加接口没有的额外成员

• 一个类可以实现多个接口

3.2 实现多个接口

interface Animal {
  name: string;
}

interface CanBark {
  bark(): void;
}

class Dog implements Animal, CanBark {
  name: string;
  
  constructor(name: string) {
    this.name = name;
  }
  
  bark() {
    console.log('Woof!');
  }
}

3.3 与抽象类的区别

虽然接口和抽象类都可用于定义契约，但：

• 接口：

  • 纯类型定义

  • 无实现

  • 多实现

• 抽象类：

  • 可包含部分实现

  • 单继承

  • 可以有抽象成员

四、implements 和 extends 的核心区别

4.1 继承 vs 实现

特性	extends	implements
关系类型	继承关系	实现关系
获得内容	父类成员和实现	仅类型契约
多重性	类单继承，接口多继承	类可实现多个接口
运行时影响	有（原型链）	无（纯类型检查）

4.2 设计意图差异

• extends：

  • 代码复用

  • 建立"是一个"关系

  • 层次化类结构

• implements：

  • 契约遵循

  • 建立"行为像"关系

  • 多态性支持

4.3 类型系统层面的区别

在 TypeScript 类型系统中：

• extends 创建子类型关系

• implements 确保类型兼容

// extends 创建的子类自动兼容父类类型
class A {}
class B extends A {}
const b: A = new B(); // 有效

// implements 确保兼容性
interface I { x: number }
class C implements I { x = 0 }
const c: I = new C(); // 有效

五、高级应用场景

5.1 混入模式（Mixins）

结合 implements 和交叉类型可以实现混入模式：

class Disposable {
  isDisposed = false;
  dispose() { this.isDisposed = true; }
}

class Activatable {
  isActive = false;
  activate() { this.isActive = true; }
  deactivate() { this.isActive = false; }
}

class SmartObject implements Disposable, Activatable {
  // Disposable
  isDisposed = false;
  dispose!: () => void;
  
  // Activatable
  isActive = false;
  activate!: () => void;
  deactivate!: () => void;
}

function applyMixins(derivedCtor: any, baseCtors: any[]) {
  baseCtors.forEach(baseCtor => {
    Object.getOwnPropertyNames(baseCtor.prototype).forEach(name => {
      derivedCtor.prototype[name] = baseCtor.prototype[name];
    });
  });
}

applyMixins(SmartObject, [Disposable, Activatable]);

5.2 接口扩展类

TypeScript 允许接口扩展类，这会继承类的成员但不包括实现：

class Control {
  private state: any;
}

interface SelectableControl extends Control {
  select(): void;
}

class Button extends Control implements SelectableControl {
  select() { }
}

5.3 条件类型中的使用

在高级类型中，extends 有特殊含义：

type NonNullable<T> = T extends null | undefined ? never : T;

六、最佳实践与常见陷阱

6.1 何时使用 extends

1. 需要代码复用时

2. 建立明确的层级关系时

3. 需要访问父类受保护成员时

6.2 何时使用 implements

1. 需要遵循特定契约时

2. 需要实现多态行为时

3. 定义公共API接口时

6.3 常见错误

• 混淆两者用途：

  // 错误：不能用implements继承类
  class A {}
  class B implements A {} // 错误

• 忽略必须成员：

  interface I { x: number }
  class C implements I {} // 错误：缺少x

• 过度使用继承：

  • 优先考虑组合而非继承

  • 避免过深的继承链

七、总结

implements 和 extends 是 TypeScript 面向对象编程的两大支柱，理解它们的区别对于设计健壮的类型系统至关重要：

• extends：建立继承关系，用于代码复用和类型扩展

  • 类继承：单继承，获得实现

  • 接口继承：多继承，类型合并

• implements：确保契约实现，用于定义行为规范

  • 类实现接口：多实现，纯类型检查

  • 不提供实现，只验证结构

在实际项目中，合理组合使用这两个关键字可以创建出既灵活又类型安全的代码结构。记住，良好的类型设计应该反映真实世界的语义关系，而不仅仅是技术上的可能性。