联合类型和交叉类型
组合并使用多种类型
联合类型和交叉类型 是 CoddyKit 上的免费 TypeScript Academy 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 TypeScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 TypeScript Academy 课程共包含 4 节课。
联合类型和交叉类型
联合类型和交叉类型
欢迎来到下一课！在本课中，您将学习如何使用联合类型让变量支持多种可能的类型，以及如何使用交叉类型将多种类型组合成一种类型。这些都是创建灵活且可靠代码的强大工具。让我们开始吧！
什么是联合类型
什么是联合类型
联合类型允许一个变量保存不止一种类型的值。您可以使用 | 符号来定义联合类型。
示例：一个可以是字符串或数字的变量：
任务：声明一个联合类型的变量，并为它赋予不同的值。
let value: string | number;
value = "Hello";
console.log(value); // Output: "Hello"
value = 42;
console.log(value); // Output: 42
在函数中使用联合类型
在函数中使用联合类型
您可以在函数参数中使用联合类型，以支持多种输入类型。示例：
任务：编写一个接受联合类型参数并将其记录到控制台的函数。
function printValue(value: string | number): void {
console.log(`The value is ${value}`);
}
printValue("Hello"); // Output: The value is Hello
printValue(100); // Output: The value is 100
什么是交叉类型
什么是交叉类型
交叉类型会将多种类型组合成一种类型。您可以使用 & 符号来定义交叉类型。
示例：组合两种对象类型：
任务：创建一个交叉类型来组合两个对象，并使用它。
type Person = { name: string };
type Employee = { employeeId: number };
type Staff = Person & Employee;
let staffMember: Staff = {
name: "Alice",
employeeId: 123,
};
console.log(staffMember);
将类型守卫与联合类型结合使用
将类型守卫与联合类型结合使用
TypeScript 不知道您在联合类型中使用的是哪一种类型。您可以使用类型守卫来缩小类型范围。示例：
任务：使用类型守卫处理联合类型中的不同类型。
function display(value: string | number): void {
if (typeof value === "string") {
console.log(`String value: ${value.toUpperCase()}`);
} else {
console.log(`Number value: ${value * 2}`);
}
}
display("Hello"); // Output: String value: HELLO
display(5); // Output: Number value: 10
实际使用交叉类型
实际使用交叉类型
处理具有相同属性的对象时，交叉类型非常有用。示例：
任务：为 admin 和用户角色创建一个交叉类型。
type Admin = { adminLevel: string };
type User = { username: string };
type AdminUser = Admin & User;
let admin: AdminUser = {
adminLevel: "super",
username: "admin123",
};
console.log(`Admin ${admin.username} has level ${admin.adminLevel}`);
联合类型和交叉类型中的常见错误
联合类型和交叉类型中的常见错误
以下是一些常见错误：
- 使用联合类型，却没有处理所有可能的情况（例如，忘记使用类型守卫）。
- 使用不必要的交叉类型，使类型变得过于复杂。
- 为联合类型或交叉类型赋予不兼容的值。
提示：请始终测试您的代码，以确保类型按照预期工作！
何时使用联合类型和交叉类型
何时使用联合类型和交叉类型
在以下情况下使用联合类型：
- 一个变量可以是几种可能类型中的任意一种。
- 您需要让函数参数更加灵活。
在以下情况下使用交叉类型：
- 将多个对象或类型组合成一个整体。
- 为特定使用场景创建更复杂的类型。
type A = { x: number };
type B = { y: number };
type AB = A & B;
let obj: AB = { x: 5, y: 10 };
做得很好
做得很好
祝贺您！您已经学会了如何使用联合类型和交叉类型在 TypeScript 中处理复杂场景。这些工具可以让您的代码更加灵活且具有更强的表达力。在下一课中，我们将探索枚举，以及它们如何帮助管理常量值。让我们继续编写代码吧！
常见问题解答
「联合类型和交叉类型」课时是免费的吗？
是的 — 「联合类型和交叉类型」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 TypeScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 TypeScript Academy 课程共包含 4 节课。
「联合类型和交叉类型」这节课中我会学到什么？
组合并使用多种类型 你通过在浏览器中直接运行的动手代码来练习 TypeScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 TypeScript Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 TypeScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。
「联合类型和交叉类型」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 TypeScript Academy 课中编写并运行代码吗？
能。每节 TypeScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。