TypeScript 如何做重载类型
很多做前端开发的朋友，应该都遇到过这种场景：写一个计算工具函数，既要支持“算两个数字的和”，又要支持“把两个字符串拼起来”。如果用JavaScript写，很容易写成一个“啥都能接但得自己判断参数类型”的函数，用起来总觉得不够严谨——万一传了其他类型的参数，比如把数字和字符串混着传，很可能会出莫名其妙的bug。这时候TypeScript的“重载类型”就能帮上大忙，它就像给函数写了好几份“使用说明书”，告诉编译器“这个函数在不同参数情况下去做不同事”，既能让代码更严谨，又不用写复杂的类型判断逻辑。
先搞懂：什么是重载类型？
用生活化的例子说，重载类型就是给同一个函数，定义好几套“参数和返回值的匹配规则”。比如你家楼下的便利店，收银员对“买矿泉水”和“买面包”的处理流程不一样：买矿泉水直接扫码装袋，买面包要先扫面包条码再算总价。对应到代码里，就是同一个函数名（比如buyGoods），对应不同的参数类型和返回类型，编译器会根据你传的参数，自动匹配对应的规则，不会乱套。
举个具体的小例子，假设我们要写一个叫add的函数，它有三种情况：
传两个数字，返回它们的和；
传两个字符串，返回拼接后的字符串；
传一个数字和一个字符串，返回拼接后的结果（数字转成字符串）。
如果用普通的TypeScript函数写，会写成：
`typescript
function add(a: number | string, b: number | string): number | string {
return a + b;
}
`
但这样写有问题：如果我传了add(1, '苹果')，虽然逻辑上是对的，但编译器不会提示我“这是合法的”；可如果我传了add(1, true)，虽然实际运行会报错，但TypeScript只会说“类型不匹配”，不会明确告诉你“这个函数不支持布尔类型”。
而用重载类型写，就能把这些规则明确告诉编译器：
`typescript
// 先定义重载规则
function add(a: number, b: number): number;
function add(a: string, b: string): string;
function add(a: number, b: string): string;
// 最后写通用的实现
function add(a: number | string, b: number | string): number | string {
return a + b;
}
`
这时候再调用函数，编译器就会帮你把关：传两个数字、两个字符串、一个数字加一个字符串，都能正确识别；传布尔值的话，直接会标红报错，不用等运行才发现问题。
别踩坑：重载类型的两个关键细节
很多朋友第一次用重载类型，容易踩两个小坑，只要注意就能避开。
第一个坑：重载规则要写在最前面，通用实现要放在最后。TypeScript是按顺序找匹配规则的，如果你把通用实现写在前面，编译器会直接用这个通用规则判断，就不会按重载的特殊规则来识别了，相当于白写了重载。
第二个坑：重载规则的参数要和通用实现对应。比如你定义了add(a: string, b: number)这个重载，那通用实现的参数类型里，就要包含string和number的组合，不然编译器会提示“重载的签名和实现不匹配”。
实际场景：重载类型能帮你省多少事？
假设你写一个处理用户数据的工具函数getUserInfo，这个函数要根据传的参数类型，返回不同的格式：如果传用户ID（数字），就返回数据库里的完整用户对象；如果传用户名（字符串），就返回匹配到的简化用户信息。用重载类型写，既能保证调用时的正确性，又不用在函数里写一堆if(typeof id === 'number')的判断，代码既简洁又好维护。
举个简单的业务例子：
`typescript
// 重载规则：传数字ID返回完整用户，传字符串用户名返回简化用户
function getUserInfo(userId: number): { id: number; name: string; age: number };
function getUserInfo(username: string): { name: string; age: number };
// 通用实现
function getUserInfo(input: number | string) {
if (typeof input === 'number') {
return { id: input, name: '张三', age: 25 };
} else {
return { name: input, age: 25 };
}
}
`
这时候你写getUserInfo(123)，编译器会自动提示返回值有id属性；写getUserInfo('张三')，会提示返回值没有id属性，完全贴合实际业务的需求，不用再自己手动加类型判断，减少了出错的可能。
总的来说，TypeScript的重载类型，就是给同一个函数“定制不同的使用规则”，既保留了JavaScript的灵活性，又有TypeScript的类型安全，很适合那些需要支持多种参数场景的函数，尤其是工具类、业务处理函数里，用起来特别顺手。