TypeScript 的联合类型和交集类型详解
typescript 是 javascript 的超集，引入了强大的类型系统，增强了代码的可读性和可维护性。联合类型和交集类型是 typescript 类型系统中重要的组成部分，它们允许我们创建更灵活和精确的类型定义。本文将深入探讨这两个类型，并通过一个示例演示如何结合使用它们。
案例研究：构建 Person 类型
考虑一个场景：根据性别，某些信息是“不该问”的。 我们希望在 TypeScript 中创建一个 Person 类型来反映这种约束。
(图片链接: https://www.php.cn/link/3f1d00695d5aac23f5c556054b88be47)
下表总结了“不该问”的信息：
| 不该问 1 | 不该问 2 | 应该问 1 | 应该问 2 | |
|---|---|---|---|---|
| 男 | 薪水 | 关系 | 地址 | 全名 |
| 女 | 年龄 | 体重 | 地址 | 全名 |
如果只使用简单的联合类型，例如：
<code class="typescript">type Person = {
gender: 'man' | 'woman',
dontAsk: 'salary' | 'relationship' | 'age' | 'weight'
};</code>
那么 const person1: Person = { gender: 'man', dontAsk: 'weight' }; 这样的代码不会报错，这与我们的预期不符。
联合类型 (Union Type)
联合类型允许一个变量拥有多种类型中的一种。例如：
<code class="typescript">type ManDontAsk = 'salary' | 'relationship'; type WomanDontAsk = 'age' | 'weight';</code>
这定义了男性和女性“不该问”的信息类型。
交集类型 (Intersection Type)
交集类型将多种类型组合成一种新的类型，该类型的变量必须同时满足所有组成类型的要求。例如，所有的人都应该有地址和全名：
<code class="typescript">type CommonPerson = {
address?: string,
fullName: string
};</code>
组合联合类型和交集类型
现在，我们可以结合联合类型和交集类型来创建精确的 Person 类型：
<code class="typescript">type Person = ({
gender: 'man',
dontAsk: ManDontAsk
} | {
gender: 'woman',
dontAsk: WomanDontAsk
}) & CommonPerson;</code>
这个类型定义确保：
-
Person必须是男性或女性。 - 根据性别，
dontAsk属性的类型不同。 -
Person必须包含address（可选）和fullName（必填）属性。
有效的 Person 对象示例：
<code class="typescript">const person1: Person = {
gender: 'man',
dontAsk: 'salary',
fullName: 'John Doe'
};
const person2: Person = {
gender: 'woman',
dontAsk: 'weight',
fullName: 'Jane Doe',
address: '123 Main St'
};</code>
无效的 Person 对象示例 (TypeScript 编译器会报错)：
<code class="typescript">const person3: Person = { // 错误：性别为男，但dontAsk为age
gender: 'man',
dontAsk: 'age',
fullName: 'Jane Doe',
};</code>
总结
联合类型和交集类型是 TypeScript 类型系统中的强大工具，它们允许我们创建灵活且精确的类型定义，从而提高代码的可读性和可维护性。 通过巧妙地结合使用这两种类型，我们可以更有效地表达复杂的类型关系，并尽早发现类型错误。 这对于大型项目和团队协作至关重要。
