TypeScript 如何定义联合类型
你一定有过这样的经历：在做网页开发时，需要处理两种不同类型的数据——比如有时候是“字符串格式的用户名”，有时候是“数字格式的用户ID”。如果用普通JavaScript，你可能会随便写个变量，用到的时候再判断类型，结果不小心就出错；而用TypeScript的话，联合类型就能帮你解决这个麻烦。
什么是联合类型？用生活例子秒懂
联合类型说白了，就是给一个变量“开个绿灯”，允许它同时属于好几种类型中的一种。就像你周末出门可以选“穿运动鞋”或者“穿休闲鞋”，不用必须只带一种鞋，只要是这两类里的都能穿。
举个前端开发里的小例子：我们做一个商品价格展示的小功能，有时候价格是直接数字（比如99.9），有时候是带“¥”符号的字符串（比如"¥199"）。如果用普通变量，随便写：
`typescript
let price;
price = 99.9; // 没问题
price = "¥199"; // 也不会报错
`
但这样的坏处是，万一有人不小心把价格写成了数组[100]，TypeScript也拦不住，运行时就会出错。而用联合类型，就能明确告诉编译器：这个price只能是数字或字符串，其他类型不行：
`typescript
let price: number | string;
price = 99.9; // 正确
price = "¥199"; // 正确
price = [100]; // 直接报错，完美拦截错误
`
这里的|就是联合类型的“分隔符”，意思是“或者”，把两种类型连起来，就是“number或者string”。
联合类型怎么用？两个核心场景
联合类型不是只能用来做变量声明，在实际开发里，这两个场景最常用：
第一个是函数参数，比如写一个“打印用户信息”的函数，参数可能是用户名（字符串），也可能是用户ID（数字）：
`typescript
function printUserInfo(info: string | number) {
console.log(用户信息：${info});
}
printUserInfo("张三"); // 输出“用户信息：张三”，正确
printUserInfo(1001); // 输出“用户信息：1001”，正确
`
如果不用联合类型，就得写两个函数，或者用any类型，any类型相当于放弃了类型检查，反而容易出问题。
第二个是数组元素，比如要存“字符串或数字”的列表，声明成联合类型的数组就行：
`typescript
let ids: (string | number)[] = ["user1", 1001, "user2", 1002];
`
这里的括号不能少，否则会变成“字符串数组或数字数组”，就达不到想要的效果了。
联合类型的小坑怎么避？
刚用联合类型的人，很容易踩一个小坑：直接用联合类型的变量调用专属方法。比如你想把price转成整数，写price.toFixed(0)，编译器会直接报错——因为price可能是字符串，字符串没有toFixed方法。
怎么解决？用“类型缩小”，也就是先判断类型，再调用对应方法：
`typescript
let price: number | string = "¥199";
if (typeof price === "number") {
// 这里TypeScript自动知道price是number，能调用toFixed
console.log(price.toFixed(0));
} else {
// 这里知道是string，能处理字符串相关操作
console.log(price.slice(1)); // 去掉“¥”，输出199
}
`
就像你要喝牛奶，先得确认手里拿的是牛奶，不是可乐，再去倒，不会拿错。
简单来说，TypeScript的联合类型，就是给变量/参数“多开几个类型选项”，既保留了灵活性，又不会随便乱传类型，是前端开发里帮你少出bug的实用工具，用多了就能感受到它的方便。