TypeScript Academy · 课时

联合类型与交叉类型的实用模式

Q: 「联合类型与交叉类型的实用模式」这节课中我会学到什么？

在实际场景中应用联合类型和交叉类型 你通过在浏览器中直接运行的动手代码来练习 TypeScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

在实际场景中应用联合类型和交叉类型

第 4 / 4 课13 个步骤

联合类型与交叉类型的实用模式 是 CoddyKit 上的免费 TypeScript Academy 课时。这是第 4 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 TypeScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 TypeScript Academy 课程共包含 4 节课。

欢迎

联合类型和交叉类型支持许多实际的 TypeScript 模式。本课程将探索您在生产代码中会使用的实用组合方式。

可选负载模式

使用联合类型，对可能携带数据、也可能不携带数据的函数或事件进行建模。

type Event =
  | { type: 'click'; x: number; y: number }
  | { type: 'keypress'; key: string }
  | { type: 'blur' };

使用交叉类型实现构建器/混入

使用交叉类型将多个功能集合组合成一个类型。

type Serializable = { serialize(): string };
type Validatable = { validate(): boolean };
type Model = Serializable & Validatable & { id: number };

用于输入规范化的联合类型

让函数接受灵活的输入类型，并将它们规范化为规范类型。

function toArray<T>(val: T | T[]): T[] {
  return Array.isArray(val) ? val : [val];
}

使用交叉类型实现品牌类型

将同一个原始类型与唯一品牌标记进行交叉，从而创建彼此不同的类型。

type UserId = number & { __brand: 'UserId' };
type PostId = number & { __brand: 'PostId' };
// Prevents accidentally mixing IDs

WithOptional 模式

将交叉类型与 Partial 结合使用，创建一种基础类型，其中部分字段是必需的，其他字段是可选的。

type RequiredFields = { id: number; email: string };
type OptionalFields = Partial<{ name: string; bio: string }>;
type UserUpdate = RequiredFields & OptionalFields;

多态组件属性

在 React 中，联合类型允许组件属性根据判别属性而变化。

type ButtonProps =
  | { variant: 'primary'; onClick: () => void }
  | { variant: 'link'; href: string };

扩展第三方类型

将第三方类型与您自己的扩展进行交叉。

import type { Request } from 'express';
type AuthRequest = Request & { user: User };

组合联合类型和交叉类型

联合类型和交叉类型可以组合使用。括号用于控制优先级。

type Admin = { role: 'admin' };
type User = { role: 'user' };
type LoggedIn = { sessionId: string };
type AuthUser = (Admin | User) & LoggedIn;

联合成员的类型守卫

编写可复用的类型守卫函数，在不重复检查的情况下收窄联合类型。

function isAdmin(u: AuthUser): u is Admin & LoggedIn {
  return u.role === 'admin';
}

交叉类型中的分配行为

分配律：A & (B | C) = (A & B) | (A & C)。TypeScript 会自动应用这一规则。

type Base = { id: number };
type AB = Base & (string | number);
// equivalent to: (Base & string) | (Base & number)

快速检查

哪种模式可以从 `number` 创建一个不同的类型，以防止不同 ID 被意外混用？

在交互式课程中回答

回顾

联合类型和交叉类型结合起来，可以对复杂的实际结构进行建模：品牌 ID、混入行为、灵活的输入，以及可辨识的组件属性。掌握这些模式，编写生产级 TypeScript。

免费开始

用 AI 导师学习 TypeScript — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程: 101
课程: 352

免费开始学习查看完整课程

常见问题解答

「联合类型与交叉类型的实用模式」课时是免费的吗？

是的 — 「联合类型与交叉类型的实用模式」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 TypeScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 TypeScript Academy 课程共包含 4 节课。

「联合类型与交叉类型的实用模式」这节课中我会学到什么？

在实际场景中应用联合类型和交叉类型你通过在浏览器中直接运行的动手代码来练习 TypeScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 TypeScript Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 TypeScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 4 节课，共 4 节。

「联合类型与交叉类型的实用模式」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 TypeScript Academy 课中编写并运行代码吗？

能。每节 TypeScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 TypeScript Academy