TypeScript中interface的介绍及其运用

前端

2023-11-27 23:20:39

拥抱 TypeScript 的接口：塑造对象形状，实现代码卓越

TypeScript 中的接口是一块基石，它赋予你塑造对象形状和抽象类行为的能力，从而提升代码的可读性、可维护性和可重用性。让我们深入探究接口的魅力，让你成为 TypeScript 大师。

什么是接口？

想象接口是一个蓝图，它勾勒出对象的结构。它定义了对象拥有的属性及其类型。接口不能直接被实例化，而是作为类和对象的指南针。

为何使用接口？

就像一幅清晰的蓝图，接口也带来诸多好处：

可读性： 接口让代码一目了然，展示对象的外观和本质。
可维护性： 修改接口会自动级联到所有遵循它的代码中，简化维护。
可重用性： 接口可以创建可复用的蓝图，让不同对象共享相同的功能。

接口的局限性

就像任何工具一样，接口也有其限制：

无法直接实例化： 接口本身不能被直接创建为对象。
不含实现细节： 接口只定义形状，不含具体实现。

如何使用接口

TypeScript 中有两种使用接口的方法：

显式接口： 使用 interface 明确定义接口，例如：

interface Person {
  name: string;
  age: number;
}

隐式接口： 通过类自动创建接口，例如：

class Person {
  name: string;
  age: number;
}

接口的实例

让我们用一些生动的例子来展示接口的用法：

对象形状：

interface Person {
  name: string;
  age: number;
}

const person: Person = {
  name: "Alice",
  age: 25
};

抽象类行为：

interface Comparable {
  compareTo(other: Comparable): number;
}

class Person implements Comparable {
  name: string;
  age: number;

  compareTo(other: Comparable): number {
    // 比较年龄
    return this.age - other.age;
  }
}

定义可重用接口：

interface Shape {
  area(): number;
}

class Circle implements Shape {
  radius: number;

  area(): number {
    return Math.PI * this.radius ** 2;
  }
}

class Rectangle implements Shape {
  width: number;
  height: number;

  area(): number {
    return this.width * this.height;
  }
}