在 JavaScript 中，很多时候我们需要根据不同的参数类型和个数来实现不同的函数逻辑。TypeScript 中支持函数重载，可以让我们更好地进行参数类型检查和逻辑分离。
函数重载的定义
函数重载是指在同一个函数名下，定义多个函数签名（即参数类型和个数不同的函数声明）。TypeScript 会根据参数类型和个数的不同，在调用函数时自动识别并选择对应的函数声明来执行。
具体来说，函数重载的定义方式如下：
function functionName(a: number, b: number): number; function functionName(a: string, b?: string): string;
上述代码中，我们定义了两个函数签名，一个是返回值为 number 类型的，另一个是返回值为 string 类型的。注意到第二个签名的第二个参数是可选的，使用问号（?）表示。
使用函数重载
当我们使用带有多个函数签名的函数时，TypeScript 会根据实际的参数类型和个数来选择调用哪个函数签名。下面是一个函数重载的使用示例：
-- -------------------- ---- -------
-------- --------------- -------- -------
-------- --------------- -------- -------
-------- --------------- ----- --- -
-- ------- ---- --- --------- -
------ -------- - - -----
- ---- -- ------- ---- --- --------- -
------ ---- - --
-
------ -----
-
-------------------------------- -- -- -------- ------
-------------------------- -- -- -在上例中，我们定义了两个重载签名，一个是返回字符串类型的，一个是返回数字类型的。在定义完参数签名后，我们再定义了一个具体实现的函数，根据传入参数的类型来选择相应的函数签名并执行。例子中的 parseData 函数实现中，首先根据传入参数的类型判断调用哪个签名，然后通过具体的逻辑来返回对应的结果。
重载顺序和匹配规则
在 TypeScript 中，函数重载的匹配原则是根据函数签名中参数的类型和个数从上至下依次匹配，选择最先匹配成功的签名执行。具体来说，当传入参数类型和个数符合某个函数签名时，TypeScript 会选择该签名执行对应的函数。如果没有任何签名匹配成功，则会出现错误。
需要注意的是，函数签名中参数的位置也会影响匹配的结果。例如下面的代码：
function test(a: number, b: string): number;
function test(b: string, a: number): string;
console.log(test(1, 'hello')); // 输出 1
console.log(test('world', 2)); // 输出 "world"在上例中，我们定义了两个函数签名。由于参数的位置被交换，导致调用不同的签名时会得到不同的结果。
函数重载的优缺点
使用函数重载可以使代码更加清晰易读，可以根据传入参数的不同来执行不同的逻辑分支，同时可以确保参数类型和个数的正确性，从而减少出错的可能性。但是，过多的函数重载也会让代码变得复杂，对于初学者来说不易理解。
总结
函数重载是 TypeScript 中的一个重要特性，它可以让我们在同一个函数名下定义多个函数签名，以支持不同的参数类型和个数。使用函数重载可以使代码更加清晰易读，根据传入参数的不同来执行不同的逻辑分支，同时可以确保参数类型和个数的正确性。使用函数重载需要注意参数位置的不同所产生的影响，同时需要避免过多的函数重载可能导致代码复杂度增加。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6469935c968c7c53b097347b