跳到主要内容

TypeScript 接口

介绍​

在 TypeScript 中，接口（Interface） 是一种强大的工具，用于定义对象的结构。通过接口，你可以明确指定对象应该包含哪些属性、方法以及它们的类型。接口的主要作用是确保代码中的对象符合预期的结构，从而提高代码的可读性和可维护性。

接口是 TypeScript 类型系统的核心部分，它们不仅可以帮助你在开发过程中捕获潜在的错误，还能为你的代码提供清晰的文档。

基本语法​

定义一个接口非常简单。使用 interface 关键字，后跟接口的名称和一对大括号 {}，在大括号中定义对象的属性和方法。

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

在这个例子中，我们定义了一个名为 Person 的接口，它要求对象必须包含 name 和 age 两个属性，且它们的类型分别为 string 和 number。

使用接口​

定义好接口后，你可以用它来约束对象的类型：

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

如果你尝试创建一个不符合接口定义的对象，TypeScript 会报错：

typescript
const invalidUser: Person = {
  name: "Bob",
  // 缺少 age 属性
};
警告

注意：如果对象缺少接口中定义的属性，或者属性的类型不匹配，TypeScript 会抛出错误。

可选属性​

有时，你可能希望某些属性是可选的。在接口中，你可以通过在属性名后添加 ? 来标记可选属性：

typescript
interface Person {
  name: string;
  age?: number; // age 是可选的
}

现在，age 属性不再是必需的：

typescript
const user: Person = {
  name: "Alice",
};

只读属性​

如果你希望某些属性在对象创建后不能被修改，可以使用 readonly 关键字：

typescript
interface Person {
  readonly id: number;
  name: string;
  age?: number;
}

一旦 id 被赋值，就不能再修改：

typescript
const user: Person = {
  id: 1,
  name: "Alice",
};

user.id = 2; // 错误：无法分配到 "id"，因为它是只读属性

函数类型​

接口不仅可以描述对象的属性，还可以描述函数的结构。例如，你可以定义一个函数接口：

typescript
interface SearchFunc {
  (source: string, subString: string): boolean;
}

然后，你可以使用这个接口来约束函数的类型：

typescript
const mySearch: SearchFunc = function (source, subString) {
  return source.includes(subString);
};

接口的继承​

接口可以通过 extends 关键字继承其他接口。这使得你可以复用已有的接口定义，并在此基础上扩展新的属性或方法。

typescript
interface Animal {
  name: string;
}

interface Dog extends Animal {
  breed: string;
}

const myDog: Dog = {
  name: "Buddy",
  breed: "Golden Retriever",
};

在这个例子中，Dog 接口继承了 Animal 接口的所有属性，并添加了一个新的 breed 属性。

实际应用场景​

1. API 响应数据的类型定义​

在与后端 API 交互时，接口可以帮助你定义响应数据的结构。例如：

typescript
interface ApiResponse {
  status: number;
  data: {
    id: number;
    name: string;
    email: string;
  };
}

2. 组件 Props 的类型定义​

在 React 等前端框架中，接口常用于定义组件的 Props 类型：

typescript
interface ButtonProps {
  label: string;
  onClick: () => void;
  disabled?: boolean;
}

const Button: React.FC<ButtonProps> = ({ label, onClick, disabled }) => {
  return (
    <button onClick={onClick} disabled={disabled}>
      {label}
    </button>
  );
};

总结​

TypeScript 接口是定义对象结构的有力工具。通过接口，你可以确保对象符合预期的类型，从而提高代码的健壮性和可维护性。无论是定义简单的对象结构，还是描述复杂的函数类型，接口都能为你提供清晰的类型约束。

提示

建议：在实际开发中，尽量使用接口来定义对象的类型，这样可以让代码更加清晰和易于维护。

附加资源​

练习​

  1. 定义一个接口 Car，包含 brand、model 和 year 三个属性。
  2. 创建一个函数接口 Calculator，包含 add 和 subtract 两个方法。
  3. 使用接口继承，定义一个 ElectricCar 接口，继承自 Car，并添加 batteryLife 属性。

通过练习，你将更好地掌握 TypeScript 接口的使用方法。