当前位置：首页 > ops >正文

利用类型别名定义复杂联合类型和交叉类型

ops 2025/8/29 17:09:49

在 TypeScript 中，类型系统提供了强大的工具来描述和约束数据结构。类型别名（type）是其中的一个重要工具，它不仅可以定义基本类型，还能够定义更为复杂的联合类型（Union Types）和交叉类型（Intersection Types）。在本文中，我们将详细探讨如何利用类型别名来定义复杂的联合类型和交叉类型，以及它们在实际开发中的应用。

1. 联合类型（Union Types）

联合类型允许一个值可以是几种不同类型中的一种。它通过 | 操作符来实现，表示多个类型的“或”关系。类型别名使得定义联合类型更加简洁易读，适用于需要处理不同类型数据的场景。

1.1 基本的联合类型

联合类型的基本形式如下所示：

type StringOrNumber = string | number;let value: StringOrNumber;value = "Hello, World!";  // 合法
value = 123;              // 合法
value = true;             // 错误，布尔类型不在联合类型中

在这个例子中，StringOrNumber 类型可以是 string 或 number，表示 value 可以存储字符串或数字。

1.2 联合类型的实际应用

联合类型在实际开发中非常有用，尤其是在处理多个可能值的情况下。例如，处理不同类型的输入数据：

type Input = string | number;function processInput(input: Input): string {if (typeof input === "string") {return `String input: ${input}`;} else {return `Number input: ${input}`;}
}console.log(processInput("Hello")); // 输出: String input: Hello
console.log(processInput(42));      // 输出: Number input: 42

在此例中，processInput 函数接受一个 Input 类型的参数，它可以是 string 或 number，并根据实际类型做不同的处理。

1.3 联合类型的复杂情况

联合类型也可以嵌套在其他复杂的结构中。例如，定义一个能够接受不同类型数据的对象类型：

type Response = {status: "success" | "error";data: string | number | null;
};const successResponse: Response = { status: "success", data: "Everything is fine" };
const errorResponse: Response = { status: "error", data: null };

在这个例子中，status 属性的值只能是 "success" 或 "error"，而 data 属性则可以是 string、number 或 null。

2. 交叉类型（Intersection Types）

交叉类型允许将多个类型合并为一个新类型，它通过 & 操作符来实现，表示多个类型的“与”关系。交叉类型在实际开发中常用于将不同类型的属性合并到一个对象中，或者为多个接口提供组合。

2.1 基本的交叉类型

交叉类型的基本形式如下所示：

type A = { name: string };
type B = { age: number };type C = A & B;const person: C = { name: "Alice", age: 25 };

在这个例子中，类型 C 是类型 A 和 B 的交叉类型，它包含了 name 和 age 两个属性。

2.2 交叉类型的实际应用

交叉类型在处理多个具有不同属性的对象时非常有用。例如，定义一个既包含个人信息，又包含联系信息的对象：

type PersonalInfo = {name: string;age: number;
};type ContactInfo = {email: string;phone: string;
};type Employee = PersonalInfo & ContactInfo;const employee: Employee = {name: "Bob",age: 30,email: "bob@example.com",phone: "123-456-7890"
};

在此例中，Employee 类型是由 PersonalInfo 和 ContactInfo 两个类型组成的交叉类型，表示一个员工对象，包含个人信息和联系信息。

2.3 交叉类型的复杂情况

交叉类型也可以与其他类型组合，以创建更复杂的结构。例如，将对象类型和函数类型结合：

type Person = {name: string;age: number;
};type Greeter = {greet: (name: string) => string;
};type Employee = Person & Greeter;const employee: Employee = {name: "John",age: 28,greet: (name) => `Hello, ${name}!`
};console.log(employee.greet("Alice"));  // 输出: Hello, Alice!

在这个例子中，Employee 类型是由 Person 和 Greeter 这两个类型组成的交叉类型，它不仅包含个人信息（name 和 age），还包括一个 greet 方法。

3. 联合类型与交叉类型的组合

联合类型和交叉类型可以结合使用，处理更复杂的类型逻辑。我们可以使用交叉类型将多个不同的对象合并，再通过联合类型将不同的结构结合起来。

3.1 联合类型与交叉类型的结合

假设我们有两种不同的状态对象，它们可能包含不同的属性：

type SuccessResponse = {status: "success";data: string;
};type ErrorResponse = {status: "error";message: string;
};type ApiResponse = SuccessResponse | ErrorResponse;const response1: ApiResponse = { status: "success", data: "Everything is working" };
const response2: ApiResponse = { status: "error", message: "Something went wrong" };

这里，ApiResponse 是一个联合类型，表示可能的响应类型。它要么是 SuccessResponse，要么是 ErrorResponse。

3.2 多种类型组合使用

更复杂的应用场景中，我们可以将联合类型和交叉类型结合，以创建多层次的数据结构：

type Base = {id: number;createdAt: string;
};type User = Base & {name: string;email: string;
};type Admin = Base & {name: string;role: string;
};type UserOrAdmin = User | Admin;const user: UserOrAdmin = { id: 1, createdAt: "2025-05-11", name: "Jane", email: "jane@example.com" };
const admin: UserOrAdmin = { id: 2, createdAt: "2025-05-11", name: "Alice", role: "Admin" };

在这个例子中，UserOrAdmin 是一个联合类型，它要么是 User 类型，要么是 Admin 类型，而这两个类型都继承了 Base 类型的公共属性。