TypeScript 里的 extends 关键词：让类型约束得心应手

2022-12-07 19:44:00

TypeScript 中的 extends 关键词：解锁高级编程

什么是 extends 关键词？

extends 关键词是 TypeScript 中类型系统不可或缺的一部分。它允许你为类型参数指定约束，并使一个类型可以继承或扩展另一个类型。通过灵活地定义类型关系，extends 关键词增强了 TypeScript 的可读性、可维护性和可扩展性。

泛型约束：划定类型边界

extends 最常见的用法是在泛型编程中设置类型约束。它能确保类型参数只能是指定类型的子类型。例如，以下代码为 compare 函数指定了泛型约束，要求其参数必须实现 Comparable 接口：

interface Comparable<T> {
  compareTo(other: T): number;
}

function compare<T extends Comparable<T>>(a: T, b: T): number {
  return a.compareTo(b);
}

接口扩展：继承与组合

除了泛型约束，extends 还可以用于接口扩展。一个接口可以继承另一个接口，获得其属性和方法。例如，Person 接口继承了 Nameable 接口，要求其对象同时具备 name 属性和 compareTo 方法：

interface Nameable {
  name: string;
}

interface Person extends Nameable {
  age: number;
  compareTo(other: Person): number;
}

类扩展：继承与多态

在类中，extends 用于实现继承和多态。子类可以继承父类的属性和方法，并可以覆盖父类的方法。例如，Dog 类继承了 Animal 类，并重写了 speak 方法：

class Animal {
  name: string;
  constructor(name: string) { this.name = name; }
  speak() { console.log('I am an animal'); }
}

class Dog extends Animal {
  constructor(name: string) { super(name); }
  speak() { console.log('I am a dog'); }
}

装饰器：元编程利器

装饰器是 TypeScript 中的另一项强大特性，它使用 extends 来指定要装饰的类。装饰器可以修改类的原型，并向其添加属性和方法。例如，Logger 装饰器在类的方法上打印日志信息：

function Logger(target: Function) {
  const methods = Object.getOwnPropertyNames(target.prototype);
  methods.forEach((method) => {
    const originalMethod = target.prototype[method];
    target.prototype[method] = function(...args) {
      console.log(`Calling ${method} with arguments ${args}`);
      return originalMethod.apply(this, args);
    };
  });
}

@Logger
class MyClass {
  greet(name: string) { console.log(`Hello, ${name}!`); }
}

Mixin：组合行为的妙招

Mixin是一种设计模式，允许将多个类的行为组合成一个类。在 TypeScript 中，可以使用 extends 来实现 Mixin。例如，Flyable Mixin为类添加了飞行能力：

const Flyable = {
  fly() { console.log('I am flying'); },
};

class Bird {
  constructor(name: string) { this.name = name; }
}

Object.assign(Bird.prototype, Flyable);

const bird = new Bird('Tweety');
bird.fly();

模块扩展：跨模块继承

TypeScript 允许跨模块继承类和接口。例如，Animal 模块中的 Animal 类可以被 Dog 模块中的 Dog 类扩展：

// animal.ts
export class Animal {
  name: string;
  constructor(name: string) { this.name = name; }
  speak() { console.log('I am an animal'); }
}

// dog.ts
import { Animal } from './animal';
export class Dog extends Animal {
  constructor(name: string) { super(name); }
  speak() { console.log('I am a dog'); }
}