TypeScript 中的函数重载该如何声明-JavaScript中文网-JavaScript教程资源分享门户

函数重载是 TypeScript 中一个非常实用的特性，它允许我们定义多个函数签名，以应对不同的参数类型和返回类型。在本文中，我们将介绍 TypeScript 中函数重载的具体用法和注意事项，帮助读者更好地理解和应用它。

函数重载的基本语法

在 TypeScript 中，函数重载的基本语法如下：

function fn(x: number): number;
function fn(x: string): string;
function fn(x: any): any {
  // 函数体
}

其中，我们定义了三个函数签名：

第一个签名接收一个 number 类型的参数，返回一个 number 类型的值；
第二个签名接收一个 string 类型的参数，返回一个 string 类型的值；
第三个签名接收一个 any 类型的参数，返回一个 any 类型的值。

需要注意的是，第三个签名实际上是函数的具体实现，它必须要实现前面定义的所有函数签名，否则会编译错误。

接下来，让我们看一个实际的例子。

function reverse(x: number): number;
function reverse(x: string): string;
function reverse(x: any): any {
  if (typeof x === 'number') {
    return Number(x.toString().split('').reverse().join(''));
  } else if (typeof x === 'string') {
    return x.split('').reverse().join('');
  }
}

console.log(reverse(123)); // 321
console.log(reverse('hello')); // olleh

在上面的例子中，我们定义了一个 reverse 函数，它接收一个数字或字符串类型的参数，并返回一个翻转后的结果。通过使用函数重载，我们确保了函数可以正确地处理不同类型的参数。

函数重载的注意事项

在使用函数重载时，需要注意以下几点：

参数类型必须不同

函数重载的每个函数签名必须要接收不同类型的参数。如果两个函数签名接收的参数类型相同，将会导致编译错误。

返回类型可以相同也可以不同

函数重载的每个函数签名可以返回相同类型的值，也可以返回不同类型的值。如果所有函数签名返回的类型都不同，将会导致编译错误。

最后一个签名必须是具体实现

函数重载的最后一个函数签名必须要是具体的函数实现。如果最后一个函数签名不是具体实现，将会导致编译错误。

参数个数可以不同

函数重载的每个函数签名可以接收不同数量的参数。例如，我们可以定义一个函数签名接收 1 个参数，另一个函数签名接收 2 个参数。函数调用时，TypeScript 会通过参数类型和数量自动匹配到正确的函数签名。

总结

使用函数重载可以让我们在 TypeScript 中定义更加灵活且类型安全的函数，避免了函数调用时传入错误类型或参数数量不匹配的问题。在实际开发中，我们应该根据具体情况合理应用函数重载，提高代码质量。

示例代码

function fn(x: number): number;
function fn(x: string): string;
function fn(x: any): any {
  if (typeof x === 'number') {
    return x + 1;
  } else if (typeof x === 'string') {
    return x + ' ok';
  }
}

console.log(fn(123)); // 124
console.log(fn('hello')); // hello ok

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65914a00eb4cecbf2d67d9fc

TypeScript 中的函数重载该如何声明