TypeScript-接口

概述

TypeScript 允许我们定义接口，它们是一种抽象的类型，用于描述对象的形状。接口与类很相似，但它们是更抽象、更灵活的结构，因为它们不能实现任何代码。使用接口，我们可以指定哪些属性和方法在其它对象中必须存在和必须遵循哪些形式。

定义接口

定义一个接口的语法是：

interface InterfaceName {
  property: Type;
  method(): ReturnType;
}

定义一个简单接口的例子：

interface Person {
  firstName: string;
  lastName: string;
}

这个接口定义了一个包含 firstName 和 lastName 属性的 Person 接口。

使用接口

对象类型

可以使用接口来强制对象遵循特定的形状。例如，我们可以定义一个函数，它接受一个名为 person 的对象，该对象必须拥有 firstName 和 lastName 属性，这些属性都必须是字符串类型：

function greet(person: Person) {
  console.log(`Hello, ${person.firstName} ${person.lastName}!`);
}

然后，我们可以通过传递拥有 firstName 和 lastName 属性的对象来调用此函数：

const person = { firstName: 'John', lastName: 'Doe' };
greet(person);

可选属性

在接口中，您可以使用 ? 符号将属性标记为可选的。例如：

interface Person {
  firstName: string;
  lastName?: string;
}

这个接口定义了一个 Person，它必须包括 firstName 属性，但 lastName 属性是可选的。

只读属性

在接口中，您可以使用 readonly 关键字将属性标记为只读的。例如：

interface Config {
  readonly apiKey: string;
  readonly apiUrl: string;
}

这个接口定义了一个 Config 对象，它有一个只读的 apiKey 属性和一个只读的 apiUrl 属性。

函数类型

可以在接口中定义函数的形状。例如，以下接口定义了一个函数，它接受两个 number 类型的参数，返回一个 number 类型的值：

interface Adder {
  (x: number, y: number): number;
}

现在可以使用此接口来定义函数类型的变量：

const add: Adder = (x, y) => x + y;

继承接口

接口可以通过继承其他接口来扩展自己。例如：

interface Named {
  name: string;
}

interface Person extends Named {
  firstName: string;
  lastName: string;
}

这个接口扩展了 Named，它还定义了一个 Person 对象，它必须包括 firstName 和 lastName 属性，以及一个 name 属性。

实现接口

类可以通过实现接口来强制类遵循特定的形状。例如：

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

class Cat implements Animal {
  name = 'cat';
  eat(food: string) {
    console.log(`The cat is eating ${food}.`);
  }
}

这个 Animal 接口定义了一个动物对象，该对象必须有一个 name 属性和一个 eat 方法。Cat 类实现了 Animal 接口，它必须包括一个 name 属性和一个 eat 方法。eat 方法接收一个字符串参数，表示猫正在吃什么。

总结

TypeScript 允许我们定义接口，它们是一种抽象的类型，用于描述对象的形状。使用接口，我们可以指定哪些属性和方法在其它对象中必须存在和必须遵循哪些形式。接口也可以用于强制类遵循特定形状。