TypeScript - 联合类型：初学者的友好入门

你好啊，未来的编码超级巨星！? 你准备好跳入 TypeScript 的精彩世界并学习其最强大的特性之一了吗？今天，我们将探索联合类型（Union Types），这个概念一开始可能听起来有点吓人，但我保证你会在本教程结束时发现它的巨大用途，甚至觉得它很有趣！

TypeScript - Union

作为你友好邻里的计算机老师，我已经见证了无数学生在掌握这个概念时眼睛发亮。所以，让我们一起踏上这段旅程吧，好吗？

什么是联合类型？

在我们深入细节之前，让我们从一个简单的类比开始。想象你有一个魔法盒子，它可以装一辆玩具车或者一个毛绒动物，但不能同时装两者。这就是 TypeScript 中的联合类型——它是一种告诉我们的代码一个变量可以是几种类型中的一种的方式。

现在，让我们来写一些代码！

语法：联合字面量

联合类型的基本语法使用管道符号（|）来分隔不同的类型。就像告诉 TypeScript，“嘿，这可以是这个或者那个！”

let myFavorite: string | number;

myFavorite = "TypeScript"; // 这是有效的
console.log(myFavorite); // 输出：TypeScript

myFavorite = 42; // 这也是有效的
console.log(myFavorite); // 输出：42

// myFavorite = true; // 这会导致错误

在这个例子中，myFavorite 可以是字符串或者数字。就像我们的魔法盒子可以装单词或者数字，但不能装其他东西。如果我们试图放入一个布尔值（如 true），TypeScript 就会挥动它的魔法棒并给我们显示一个错误。

联合类型变量

让我们扩展之前的例子，看看联合类型如何使我们的代码更加灵活：

type Pet = "cat" | "dog" | "fish";
let myPet: Pet;

myPet = "cat"; // 这是有效的
console.log(`我有一只 ${myPet}`); // 输出：我有一只 cat

myPet = "dog"; // 这也是有效的
console.log(`我有一只 ${myPet}`); // 输出：我有一只 dog

// myPet = "elephant"; // 这会导致错误

在这里，我们创建了一个名为 Pet 的自定义类型，它只能是三个特定字符串中的一个。就像一个宠物店只卖猫、狗和鱼。如果你尝试购买一只大象，抱歉，做不到！

联合类型和函数参数

联合类型在用于函数时真正发光发热。它们允许我们的函数更加通用，同时不失去类型安全。让我们看一个例子：

function printId(id: number | string) {
console.log(`你的 ID 是：${id}`);
}

printId(101); // 输出：你的 ID 是：101
printId("202"); // 输出：你的 ID 是：202

// printId(true); // 这会导致错误

在这个函数中，printId 可以接受数字或字符串作为参数。就像一个通用的 ID 卡读取器可以处理数字和基于文本的 ID。但如果你尝试刷你的布尔 ID 卡，它会礼貌地拒绝！

联合类型和数组

现在，让我们升级一下，看看联合类型如何与数组一起工作。准备好见证一些数组魔法！

let mixedArray: (number | string)[] = [1, "two", 3, "four", 5];

console.log(mixedArray); // 输出：[1, "two", 3, "four", 5]

mixedArray.push(6); // 这是有效的
mixedArray.push("seven"); // 这也是有效的

// mixedArray.push(true); // 这会导致错误

console.log(mixedArray); // 输出：[1, "two", 3, "four", 5, 6, "seven"]

在这里，我们创建了一个可以包含数字和字符串的数组。就像一个播放列表可以包括轨道号码和歌曲标题。但如果你试图偷偷放入一个布尔值，TypeScript 会立刻抓住你！

实际用例

现在我们已经覆盖了基础知识，让我们看看一些联合类型可以解决的现实世界场景：

API 响应：当与 API 交互时，有时你接收到的数据可以是不同的类型。联合类型帮助你优雅地处理这些变化。

type ApiResponse = {
status: "success" | "error";
data: string | number | null;
};

function handleResponse(response: ApiResponse) {
if (response.status === "success") {
console.log(`成功！数据：${response.data}`);
} else {
console.log("发生错误");
}
}

handleResponse({ status: "success", data: "用户资料已加载" });
handleResponse({ status: "error", data: null });

配置选项：在创建可配置的函数时，联合类型允许你提供一组有效选项。

type Color = "red" | "green" | "blue";
type Size = "small" | "medium" | "large";

function createButton(color: Color, size: Size) {
console.log(`创建一个 ${color} 颜色的大小为 ${size} 的按钮`);
}

createButton("red", "medium"); // 有效
// createButton("yellow", "extra-large"); // 这会导致错误

常见的联合类型方法

下面是一些你可以与联合类型一起使用的常见方法：

方法	描述	示例
typeof	检查值的类型	`typeof x === "string"`
instanceof	检查一个对象是否是特定类的实例	`x instanceof Date`
in	检查一个属性是否存在于对象中	`"name" in x`
Array.isArray()	检查一个值是否是数组	`Array.isArray(x)`

结论

哇！我们今天覆盖了很多内容，不是吗？联合类型一开始可能看起来有点棘手，但它们是你 TypeScript 工具箱中非常强大的工具。它们允许你编写更灵活、更健壮的代码，甚至在错误发生之前就捕捉到它们。

记住，编码就像学习一门新语言——需要练习和耐心。如果你一开始没有掌握它，不要气馁。继续尝试，继续编码，不久之后，你就会像专业人士一样使用联合类型！

在我们结束之前，我想起了一个学生曾经告诉我，“联合类型就像是代码的瑞士军刀！”而你说得非常对。所以，年轻的程序员，勇敢地前进吧，愿你的联合类型永远为你所用！??

Credits: Image by storyset