TypeScript：面向对象特性之多态

多态，是说一种物质，有多种状态，在很多生活场景中都能遇到这种现象。当组装电脑的时候，我们知道主板上有 CPU、显卡接口，对于显卡来说，只要接口型号匹配，那么不管它的厂家是谁、性能如何，它都能正常的发挥作用。在编程世界里，多态表现为，在创建对象的时候，不需要知道它具体是由哪个 class 创建的，但是通过继承或接口，我明确知道它包含一些方法和属性，这样我能安全的调用它们。接下来，分别看一下，在 typescript 中使用继承方式和接口方式实现多态。

继承方式

假设我们有一个普通按钮组件和链接按钮组件，普通按钮组件渲染为 Button 标签，链接按钮渲染为 a 标签，并且链接按钮继承自普通按钮组件，以复用 name 属性和其他代码，这里我们只关注一下 render，渲染方法：

// Button
class Button {
  protected name: string;
  constructor(name: string) {
    this.name = name;
  }
  public render() {
    console.log(`<Button>${this.name}</Button>`);
  }
  // 其它代码
}

// LinkButton
class LinkButton extends Button {
  public render() {
    console.log(`<a>${this.name}</a>`);
  }
}

这里，如果我有一组按钮组件需要渲染，包括普通按钮和链接按钮，那么可以这样做：

• 定义一个数组，通过尖括号泛型，规定里边存放 Button 组件
• 但是它里边的值既可以是 Button 的对象，也可以是 LinkButton 的对象
• 这里有一个转型机制，所有 Button 的子类对象都会自动转换为 Button 父类对象
• 后边渲染的时候，因为知道子类会继承父类的方法，所以可以直接调用 render 方法来渲染组件：

let comps: Array<Button> = [new Button("普通按钮"), new LinkButton("链接按钮")];

// <Button>普通按钮</Button>
// <a>链接按钮</a>
comps.forEach((comp) => comp.render());

这种方式有一个缺陷，如果有一个没有继承关系的组件，Image 组件，也要放到数组里一起渲染的话，就会出错：

class Image {
  public render() {
    console.log(`<img />`);
  }
  // other methods
}

let comps: Array<Button> = [
  new Button("普通按钮"),
  new LinkButton("链接按钮"),
  // Error: Property 'name' is missing in type 'Image' but required in type 'Button'.
  new Image(),
];

继承方式适用于有继承关系的类，需要大量复用代码的情况下。

接口方式

上边的情况，我们可以使用接口的形式，这个就跟电脑主板一样了。我可以使用接口 interface，定义一个 Renderable 接口，可渲染的，在里边定义一个 render 方法：

• 接口里的方法规范不需要方法体。这里规定，实现这个接口的类，必须要实现它里边规定的方法，那么所有实现这个接口的类，就能够保证一定有 render 方法。

interface Renderable {
  render(): void;
}

接着，让 Button 和 LinkButton 实现这个接口，因为它们里边已经有 render 方法了，所以实现了 Renderable 接口，接下来定义一个 Image class，让它也实现 Renderable 接口，在 render 方法里打印出标签：

class Image implements Renderable {
  public render() {
    console.log(`<img />`);
  }
  // other methods
}

然后，我们可以把数组的泛型改为 Renderable，这样它里边的元素都会默认转换成 Renderable 这个接口类型：

• 接着再调用它们里边的 render 方法，就都能够正常渲染了。

let comps: Array<Renderable> = [
  new Button("普通按钮"),
  new LinkButton("链接按钮"),
  new Image(),
];

comps.forEach((comp) => comp.render());

接口形式适合没有继承关系的类且需要统一调用某个方法的情况。 好了，这个视频介绍了一下多态的基本概念，并通过继承和接口的方式实现了多态。如果觉得视频有帮助，请点赞并关注，我是峰华，感谢观看！