TS接口配合类使用（进阶篇）

2023-10-21 12:26:24

接口和类：TS 中构建更强大的代码的协作

在 JavaScript 的广阔世界中，TypeScript (TS) 闪耀着夺目的光彩，为我们提供了强大的类型系统，使我们能够以更结构化和类型安全的方式书写代码。在这个类型化的乐园中，接口和类携手并进，扮演着至关重要的角色，共同提升着代码的可读性、可维护性和可重用性。

接口的本质

想象一下接口就像一份蓝图，它勾勒出类必须遵循的属性和方法。接口本身不能被直接实例化，但它为类提供了行为规范，确保它们符合预期的标准。

interface Animal {
  name: string;
  age: number;
  makeSound(): void;
}

在这个蓝图中，Animal 接口规定了所有动物必须具有的三个基本特征：name、age 和 makeSound 方法。

类的实现

现在，让我们将目光转向类，它们是 TS 中用于创建对象的蓝图。类通过实现接口来表明它们符合接口定义的规范。这意味着它们必须提供接口中规定的所有属性和方法。

class Lion implements Animal {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  makeSound() {
    console.log("Roar!");
  }
}

在这里，Lion 类实现了 Animal 接口，提供了必需的属性和方法。它声称自己是一只遵循动物规范的狮子。

接口与类的联姻优势

将接口与类结合使用就像一场梦幻般的二重奏，为我们的代码带来诸多好处：

可读性与可维护性： 接口清晰地阐明了类的职责，使代码更易于理解和维护。它就像一个快速指南，告诉我们类可以做什么。
类型安全性： 接口通过强制类实现其定义的属性和方法，充当着类型的卫士。这确保了代码的类型安全性，有助于我们在编译时发现错误，从而提高代码质量。
可重用性： 接口使类可以相互协作，创造出可重用的组件。我们可以定义一个通用的接口，然后创建多个类来实现该接口，每个类都针对特定领域提供定制功能。

马戏团动物场景中的应用

让我们走进一个充满奇思妙想的马戏团，那里有形形色色的动物等待着我们的建模。使用接口和类，我们可以将这些动物的特征和行为栩栩如生地描绘出来。

我们可以从一个通用的 Animal 接口开始，它定义了所有动物的共有属性：

interface Animal {
  name: string;
  age: number;
  makeSound(): void;
}

然后，我们可以创建不同的动物类来实现这个接口，例如：

class Lion implements Animal {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  makeSound() {
    console.log("Roar!");
  }
}

class Tiger implements Animal {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  makeSound() {
    console.log("Growl!");
  }
}