类型别名、联合类型、交叉类型：TypeScript中类型升级的瑰宝

2024-02-02 17:11:32

在本文中，我们将带领您领略TypeScript中高级类型的神奇魅力，从类型别名开始，逐步深入联合类型、交叉类型、字面量类型等概念，让您对TS中的“类型”有一个全面的认识，为构建灵活且可重用的代码奠定坚实基础。

类型别名：赋予类型一个新的名字

TypeScript中的类型别名允许您为现有类型创建一个新的名称，从而提高代码的可读性和可维护性。例如：

type User = {
  name: string;
  age: number;
  city: string;
};

在这个例子中，我们定义了一个名为User的类型，它包含了name、age和city三个属性。然后，我们就可以使用User这个名称来表示该类型，例如：

function getUser(user: User): void {
  console.log(`Name: ${user.name}`);
  console.log(`Age: ${user.age}`);
  console.log(`City: ${user.city}`);
}

通过使用类型别名，我们可以让代码更易于理解和重用。

联合类型：将多个类型组合在一起

联合类型允许您将多个类型组合在一起，形成一个新的类型。例如：

type UserOrAdmin = User | Admin;

在这个例子中，我们定义了一个名为UserOrAdmin的联合类型，它包含了User和Admin两个类型。然后，我们就可以使用UserOrAdmin这个名称来表示该联合类型，例如：

function getUserOrAdmin(userOrAdmin: UserOrAdmin): void {
  if (userOrAdmin instanceof User) {
    console.log(`Name: ${userOrAdmin.name}`);
    console.log(`Age: ${userOrAdmin.age}`);
    console.log(`City: ${userOrAdmin.city}`);
  } else if (userOrAdmin instanceof Admin) {
    console.log(`Name: ${userOrAdmin.name}`);
    console.log(`Role: ${userOrAdmin.role}`);
  }
}

通过使用联合类型，我们可以让代码更加灵活和适应不同情况。

交叉类型：合并多个类型的属性

交叉类型允许您将多个类型的属性合并在一起，形成一个新的类型。例如：

type UserWithRole = User & Admin;

在这个例子中，我们定义了一个名为UserWithRole的交叉类型，它包含了User和Admin两个类型的属性。然后，我们就可以使用UserWithRole这个名称来表示该交叉类型，例如：

function getUserWithRole(userWithRole: UserWithRole): void {
  console.log(`Name: ${userWithRole.name}`);
  console.log(`Age: ${userWithRole.age}`);
  console.log(`City: ${userWithRole.city}`);
  console.log(`Role: ${userWithRole.role}`);
}

通过使用交叉类型，我们可以让代码更具可扩展性，并方便地扩展新功能。

字面量类型：枚举的替代方案

字面量类型允许您创建一组固定值的类型。例如：

type Color = "red" | "green" | "blue";

在这个例子中，我们定义了一个名为Color的字面量类型，它包含了red、green和blue三个值。然后，我们就可以使用Color这个名称来表示该字面量类型，例如：

function getColor(color: Color): void {
  switch (color) {
    case "red":
      console.log("The color is red.");
      break;
    case "green":
      console.log("The color is green.");
      break;
    case "blue":
      console.log("The color is blue.");
      break;
  }
}