TypeScript 中的 interface 和 class 有什么区别

在前端开发中，TypeScript 是一个非常流行的语言，不仅可以增加代码的可读性，还可以减少开发过程中的错误，提高开发效率。在 TypeScript 中，interface 和 class 是两个非常重要的概念，但它们之间有什么区别呢？

interface

interface 是定义一组相关属性和方法的抽象类型，它只定义了要实现的方法和属性的名称和类型，而不包含具体的实现。interface 主要用于指定代码的结构，以便在代码中使用时能够得到正确的类型检查。

下面是 interface 的一个简单示例：

interface Animal {
  name: string;
  color: string;
  eat(food: string): void;
}

在上面的示例中，我们定义了一个 Animal 的 interface，包含了三个属性：name，color，和一个方法 eat。这里并不需要指定具体的实现，因为 interface 只是表示实现这个接口的对象需要有这些属性和方法。

class

class 是一种用于创建对象的模板，它通过定义一个 constructor 函数来初始化对象的状态。class 可以包含属性和方法，也可以继承其它类，以及实现接口。相比于 interface，class 更关注对象的具体实现。

下面是一个使用 class 定义 Animal 的示例：

class Animal {
  constructor(name: string, color: string) {
    this.name = name;
    this.color = color;
  }
  name: string;
  color: string;
  eat(food: string): void {
    console.log(`${this.name} is eating ${food}`);
  }
}

在上面的示例中，我们定义了一个 Animal 的 class，它包含了两个属性：name 和 color，以及一个方法 eat。这里我们使用构造函数来初始化 name 和 color 属性。注意我们在方法声明后面加了 void，表示这个方法不返回任何值。

区别和使用场景

相比于 interface，class 更关注对象的具体实现。以下是它们之间的主要区别：

• interface 只定义了要实现的方法和属性的名称和类型，而不包含具体的实现。
• class 可以包含属性和方法，也可以继承其它类，以及实现接口。

因此，在实际开发中，我们应该根据具体的情况来选择使用 interface 还是 class。一般情况下，我们使用 interface 来定义约束，使用 class 来实现具体的功能。

例如，当我们需要定义一个猫的类型时，可以使用 interface 来定义：

interface Cat {
  name: string;
  color: string;
  eat(food: string): void;
  meow(): void;
}

而当我们需要实现猫的功能时，应该使用 class：

class Cat implements Animal {
  constructor(name: string, color: string) {
    this.name = name;
    this.color = color;
  }
  name: string;
  color: string;
  eat(food: string): void {
    console.log(`${this.name} is eating ${food}`);
  }
  meow(): void {
    console.log(`${this.name} is meowing`);
  }
}

在上面的示例中，我们通过实现 Animal 接口来定义 Cat 类，以便 Cat 类符合 Animal 接口的约束。在 Cat 类中，我们定义了 meow 方法，以实现具体的猫叫声功能。

总结

在使用 TypeScript 进行开发时，了解 interface 和 class 的区别非常重要。interface 主要用于指定代码的结构，以便在代码中使用时能够得到正确的类型检查；而 class 更关注对象的具体实现，用于实现具体的功能。在实际开发中，我们应该根据具体的情况来选择使用 interface 还是 class。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65920deaeb4cecbf2d6f695c