TypeScript Academy · 课时

联合类型：A 或 B

Q: 「联合类型：A 或 B」这节课中我会学到什么？

使用 | 允许多种类型可能性 你通过在浏览器中直接运行的动手代码来练习 TypeScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用 | 允许多种类型可能性

第 1 / 4 课13 个步骤

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

欢迎

联合类型允许一个值属于多种类型中的一种。联合类型使用 `|` 运算符书写，是对现实世界数据进行建模的基础。

基本联合类型语法

使用 `|` 将两个或更多类型组合起来。联合类型的变量可以持有所列类型中的任意一个。

let id: string | number;
id = 'abc123'; // OK
id = 42;       // OK
// id = true;  // Error

函数参数中的联合类型

使用联合参数类型，让函数接受多种输入类型。

function format(val: string | number): string {
  return typeof val === 'string' ? val.toUpperCase() : val.toFixed(2);
}

联合成员需要进行类型收窄

如果不进行类型收窄，您只能调用所有联合成员共有的方法。对于特定类型的方法，您必须先进行类型收窄。

function process(val: string | number) {
  // val.toFixed(2); // Error — not on string
  if (typeof val === 'number') {
    val.toFixed(2); // OK
  }
}

与字面量类型组合的联合类型

由字面量值组成的联合类型会创建一个类似枚举的字符串值或数字值允许集合。

type Direction = 'north' | 'south' | 'east' | 'west';
type StatusCode = 200 | 201 | 400 | 404 | 500;

用于可空类型的联合类型

最常见的联合类型是 `T | null` 或 `T | undefined`，用于在 strictNullChecks 启用时表示可选值。

function getUser(id: number): User | null {
  return db.find(u => u.id === id) ?? null;
}

对象类型的联合

联合类型可以组合对象类型。如果不进行类型收窄，TypeScript 只允许访问所有成员共有的属性。

type Cat = { kind: 'cat'; meow(): void };
type Dog = { kind: 'dog'; bark(): void };
type Pet = Cat | Dog;
function speak(pet: Pet) {
  if (pet.kind === 'cat') pet.meow();
  else pet.bark();
}

联合类型中的三个或更多类型

联合类型可以根据需要包含任意数量的类型。

type Input = string | number | boolean | null;

返回类型中的联合类型

函数可以根据其逻辑返回不同类型的值。您可以使用联合返回类型来表达这一点。

function divide(a: number, b: number): number | null {
  if (b === 0) return null;
  return a / b;
}

可辨识联合

为联合成员添加一个共享的字面量属性（判别属性）。TypeScript 会使用它自动收窄类型。

type Square = { kind: 'square'; side: number };
type Circle = { kind: 'circle'; radius: number };
type Shape = Square | Circle;

无需类型收窄即可访问共有属性

如果所有联合成员都共享某个属性，您无需进行类型收窄即可访问它。

type A = { name: string; x: number };
type B = { name: string; y: number };
type AB = A | B;
function getName(obj: AB): string {
  return obj.name; // OK — name is on both
}

快速检查

哪种语法可以创建一个可能是字符串或数字的联合类型？

在交互式课程中回答

回顾

联合类型（|）允许值具有多种类型之一。在使用特定类型的操作前，请先收窄联合类型。字面量联合类型会将值限制在有限集合内。可辨识联合会添加共享标签，以便更轻松地进行类型收窄。

免费开始

用 AI 导师学习 TypeScript — 免费

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

课程: 101
课程: 352

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

常见问题解答

「联合类型：A 或 B」课时是免费的吗？

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

「联合类型：A 或 B」这节课中我会学到什么？

使用 | 允许多种类型可能性你通过在浏览器中直接运行的动手代码来练习 TypeScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 TypeScript Academy 需要有经验吗？

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

「联合类型：A 或 B」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 TypeScript Academy