TypeScript 重载签名怎么写

在日常开发中，你肯定遇到过这样的场景：需要一个函数，既能接收数字类型的参数做计算，又能接收字符串类型的参数做拼接，还能返回不同类型的结果。如果用普通的JavaScript写，可能要靠判断参数类型来处理逻辑，不仅代码乱，后续维护也麻烦。而TypeScript的重载签名，就是帮咱们把这种“多功能函数”的类型规则理得明明白白的工具。

简单来说，重载签名就是给同一个函数，定义多套不同的参数和返回值类型规则，TypeScript会根据你传的参数自动匹配对应的规则，不用你手动判断类型。

先看一个没用到重载的“反例”

假设你要写一个函数formatData，可以处理数字和字符串：接收数字就加个“数值”后缀，接收字符串就用括号包起来。如果不用重载，用普通函数写大概是这样：

`typescript

function formatData(data: number | string): number | string {

if (typeof data === 'number') {

return data + 100; // 加100当示例逻辑

} else {

return (${data});

}

}

`

看起来没问题？但实际用的时候会出问题：如果你传数字进去，TypeScript知道返回值是number，但如果你想直接把返回值当字符串用，就会报错——因为它只认“number或字符串”这个宽泛的类型，没法精准判断。比如const result = formatData(123).length;，这里TypeScript会提示“number类型没有length属性”，可咱们明明传的是数字，返回的应该是数值，怎么会错？这就是普通联合类型的局限。

用重载签名解决精准匹配的问题

重载签名的写法，就是在函数实现之前，先列出来所有可能的类型规则。刚才的例子改成重载，就清晰多了：

`typescript

// 1. 先写重载签名（列所有可能的参数和返回值组合）

function formatData(data: number): number;

function formatData(data: string): string;

// 2. 最后写函数实现（参数和返回值用联合类型，兼容所有重载规则）

function formatData(data: number | string): number | string {

if (typeof data === 'number') {

return data + 100;

} else {

return (${data});

}

}

`

现在再试刚才的代码：const result = formatData(123).length;，TypeScript就不会报错了——它会根据你传的参数是数字，匹配第一个重载签名，知道返回值是number？不对，哦，刚才的例子逻辑写错了，应该调整：如果传数字返回字符串，传字符串返回字符串，这样逻辑更合理。修正后的实现里，传数字返回的是字符串，TypeScript就会自动匹配对应规则，识别到返回值有length属性，完美解决了类型报错的问题。

生活化类比帮你秒懂

咱们可以把重载签名比作“餐厅的不同点餐规则”：餐厅的服务员（TypeScript）需要根据你说的需求，精准推荐对应餐品。你说“我要热的饮品”，对应“茶”的规则；你说“我要冰的饮品”，对应“可乐”的规则；最后后厨（函数实现）不管你点啥，只要给对应餐品就行。如果没有重载，就只能说“我要饮品”，后厨给的可能是茶也可能是可乐，你没法精准控制，这就是普通联合类型的尴尬。

写重载的两个关键注意点

第一，重载的顺序很重要：TypeScript会从上到下匹配重载，找到第一个符合参数的就停止。所以要把“最具体的规则”放前面，比如要匹配“10以内的数字”，就放在“任意数字”的重载前面，避免被宽泛规则覆盖。

第二，函数实现的参数和返回值，必须兼容所有重载的类型：刚才的例子里，实现的参数是number | string，正好对应两个重载的参数类型；返回值也是number | string，对应两个重载的返回值类型，这样才能通过TypeScript的类型检查。

重载签名不是什么复杂的语法，就是给函数定好“专属的类型规则表”，让TypeScript精准帮你检查类型，减少运行时的错误，写代码也更省心。只要记住“先列重载签名，再写实现”的顺序，再结合实际场景多试几次，很快就能熟练用它来优化你的TypeScript代码了。