TypeScript 联合类型
最后修改于 2025 年 2 月 24 日
TypeScript 中的联合类型允许一个变量拥有多种可能的类型。它们使用 | 运算符声明。联合类型提供了类型检查的灵活性和强大功能，使编写更健壮的代码成为可能。
TypeScript 中的联合类型是一种定义变量可以为多种类型之一的方式。例如，一个变量可以是字符串或数字。
声明联合类型
此示例演示如何在 TypeScript 中声明联合类型。
declaring_unions.ts
let value: string | number = "Hello"; value = 10; console.log(value); // Output: 10
value 变量被声明为 string 或 number 类型。它最初被赋值为字符串值 "Hello"，但之后也可以被赋值为数字值 10。
联合类型缩小
TypeScript 使用一个称为联合类型缩小的过程来确定联合变量的实际类型。
union_narrowing.ts
function printValue(value: string | number) {
if (typeof value === "string") {
console.log(value.length);
} else {
console.log(value);
}
}
printValue("Hello"); // Output: 5
printValue(10); // Output: 10
在此示例中，printValue 函数接受一个联合参数。通过使用 typeof 检查 value 的类型，TypeScript 缩小了可能的类型，使我们能够调用特定于该类型的函数。
联合类型运算符
TypeScript 提供了几种用于处理联合类型的运算符。
交叉类型
交叉类型运算符 (∧) 将多个类型合并为一个类型。
intersection_operator.ts
interface Person {
name: string;
age: number;
}
interface Developer {
language: string;
}
type Programmer = Person & Developer;
let programmer: Programmer = {
name: "Jan",
age: 35,
language: "TypeScript"
};
分布式条件类型
分布式条件类型将类型操作应用于联合类型的每个成员。
分布式联合类型将条件类型单独应用于联合类型中的每个成员，然后将结果重新组合成一个联合类型。这是通过使用 extends 关键字的条件类型来实现的。
distributive_conditional_types.ts
type MyUnion = number | boolean | string; type ToArray<T> = T extends any ? T[] : never; type MyUnionArray = ToArray<MyUnion>; const numberArray: MyUnionArray = [1, 2, 3]; const booleanArray: MyUnionArray = [true, false]; const stringArray: MyUnionArray = ["a", "b", "c"]; console.log(numberArray); console.log(booleanArray); console.log(stringArray);
在此示例中，ToArray 条件类型将 MyUnion 联合类型中的每个成员转换为该成员类型的数组。生成的 MyUnionArray 类型将是 number[] | boolean[] | string[]，这意味着它可以是数字、布尔值或字符串的数组。
映射类型
映射类型将类型转换应用于对象类型的每个属性。
mapped_types.ts
type ReadOnly<T> = {
readonly [P in keyof T]: T[P];
};
interface Person {
name: string;
age: number;
}
type ReadOnlyPerson = ReadOnly<Person>;
let person: ReadOnlyPerson = {
name: "Jan",
age: 35
};
person.name = "John"; // Error: Cannot assign to 'name' because it is a read-only property.
使用联合类型的最佳实践
- 使用联合类型缩小： 利用 TypeScript 的联合类型缩小功能来确定联合变量的实际类型。
- 优先使用具体类型： 尽可能避免使用联合类型，因为它们会使代码更难理解和维护。
- 使用联合类型运算符： 利用 TypeScript 的联合类型运算符，如交叉类型和映射类型，进行强大的类型操作。
- 处理边缘情况： 在处理联合类型时，始终检查边缘情况，因为它们可能会引入意外行为。
来源
在本文中，我们探讨了 TypeScript 联合类型，并通过实际示例演示了它们的用法。