跳到主要内容

TypeScript 接口与类型别名比较

介绍​

在TypeScript中，**接口（Interfaces）和类型别名（Type Aliases）**是两种用于定义对象形状和类型的工具。它们的功能非常相似，但在某些场景下有不同的用途和限制。理解它们的区别和适用场景，可以帮助你在开发中做出更合适的选择。

本文将逐步讲解接口和类型别名的定义、使用方式、区别以及实际应用场景。

接口（Interfaces）​

接口是TypeScript中用于定义对象形状的主要工具。它允许你描述一个对象应该具有哪些属性和方法。

基本语法​

typescript
interface User {
  name: string;
  age: number;
  greet(): void;
}

在上面的例子中，我们定义了一个 User 接口，它要求对象必须包含 name（字符串类型）、age（数字类型）和 greet（一个无返回值的方法）。

接口的扩展​

接口可以通过继承来扩展其他接口：

typescript
interface Person {
  name: string;
}

interface Employee extends Person {
  employeeId: number;
}

这里，Employee 接口继承了 Person 接口，并添加了一个新的属性 employeeId。

类型别名（Type Aliases）​

类型别名允许你为任何类型创建一个新的名称。它不仅可以用于对象类型，还可以用于联合类型、交叉类型等。

基本语法​

typescript
type User = {
  name: string;
  age: number;
  greet(): void;
};

这个例子与之前的接口定义非常相似，但使用的是 type 关键字。

类型别名的灵活性​

类型别名可以用于定义更复杂的类型，例如联合类型和交叉类型：

typescript
type ID = string | number;

type Person = {
  name: string;
};

type Employee = Person & {
  employeeId: number;
};

在上面的例子中，ID 是一个联合类型，而 Employee 是一个交叉类型。

接口与类型别名的区别​

虽然接口和类型别名在很多情况下可以互换使用，但它们有一些关键的区别：

1. 扩展性​

  • 接口：可以通过 extends 关键字扩展其他接口。
  • 类型别名：可以通过交叉类型（&）实现类似的功能，但不能直接扩展。
typescript
// 接口扩展
interface A {
  x: number;
}

interface B extends A {
  y: number;
}

// 类型别名扩展
type C = {
  x: number;
};

type D = C & {
  y: number;
};

2. 声明合并​

  • 接口：支持声明合并。如果你多次定义同一个接口，TypeScript会将它们合并。
  • 类型别名：不支持声明合并。如果你多次定义同一个类型别名，TypeScript会报错。
typescript
// 接口声明合并
interface User {
  name: string;
}

interface User {
  age: number;
}

// 最终 User 接口包含 name 和 age 属性

// 类型别名不支持声明合并
type User = {
  name: string;
};

type User = {
  age: number;
}; // 报错：重复定义

3. 适用场景​

  • 接口：更适合定义对象的形状，尤其是当你需要扩展或合并时。
  • 类型别名：更适合定义复杂的类型，如联合类型、交叉类型或函数类型。

实际应用场景​

场景1：定义对象形状​

如果你需要定义一个对象的形状，并且可能需要扩展或合并，接口是更好的选择。

typescript
interface Product {
  id: number;
  name: string;
  price: number;
}

interface DiscountedProduct extends Product {
  discount: number;
}

场景2：定义复杂类型​

如果你需要定义一个复杂的类型，例如联合类型或交叉类型，类型别名更适合。

typescript
type Result = Success | Failure;

type Success = {
  status: "success";
  data: any;
};

type Failure = {
  status: "failure";
  error: string;
};

总结​

  • 接口：适合定义对象的形状，支持扩展和声明合并。
  • 类型别名：适合定义复杂类型，如联合类型、交叉类型等。

在实际开发中，你可以根据具体需求选择使用接口或类型别名。如果你需要扩展或合并类型，接口是更好的选择；如果你需要定义复杂类型，类型别名则更为灵活。

附加资源与练习​

练习1​

定义一个 Car 接口，包含 brand、model 和 year 属性。然后扩展这个接口，添加一个 color 属性。

练习2​

使用类型别名定义一个 Response 类型，它可以是 SuccessResponse 或 ErrorResponse。

附加资源​