TypeScript 函数重载|极客教程

TypeScript 函数重载

1. 介绍

函数重载是一种在 TypeScript 中定义多个具有相同名称但不同参数类型或参数个数的函数的方式。通过函数重载，我们可以根据不同的参数类型或个数来实现不同的函数行为，提高代码的灵活性和可读性。本文将详细介绍 TypeScript 中的函数重载的使用方法和注意事项。

2. 函数重载的定义

在 TypeScript 中，函数重载通过在函数签名前使用 function 关键字定义多个函数声明来实现。函数签名由函数名称、参数列表和返回值类型组成。

例如，我们希望定义一个函数 getLength，它可以根据传入的参数类型不同，返回相应的结果。我们可以使用函数重载来实现这个功能。

function getLength(str: string): number;
function getLength(arr: any[]): number;
function getLength(value: any): number {
  if (typeof value === 'string') {
    return value.length;
  } else if (Array.isArray(value)) {
    return value.length;
  }
  return 0;
}

在上面的代码中，我们定义了三个函数声明，它们具有相同的函数名称 getLength，但参数类型不同。第一个函数声明接受一个 string 类型的参数，第二个函数声明接受一个 any[] 类型的参数，第三个函数声明是函数的实现体。

3. 函数重载的调用

通过函数重载，我们可以根据不同的参数类型或个数来调用适合的函数声明。

const strLength = getLength('Hello'); // 调用第一个函数声明
console.log(strLength);  // 输出 5

const arrLength = getLength([1, 2, 3]); // 调用第二个函数声明
console.log(arrLength);  // 输出 3

const unknownLength = getLength(true); // 调用第三个函数声明
console.log(unknownLength);  // 输出 0，类型不匹配

在上面的示例中，根据传入的参数类型的不同，分别调用了不同的函数声明。如果传入的参数类型与函数声明中的类型不匹配，则会报错。

4. 注意事项

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

4.1 参数个数不同的函数重载

如果函数重载中，只有参数个数不同而其他条件相同，可以使用可选参数或默认参数来简化代码。

例如，我们希望定义一个函数 sum，可以接受两个或三个数字作为参数，分别计算它们的和。

function sum(a: number, b: number): number;
function sum(a: number, b: number, c: number): number;
function sum(a: number, b: number, c?: number): number {
  if (c !== undefined) {
    return a + b + c;
  } else {
    return a + b;
  }
}

在上面的代码中，我们定义了两个函数声明，分别接受两个和三个数字作为参数，然后在第三个函数声明中实现函数的逻辑。其中，第三个参数 c 使用了可选参数的形式，通过判断 c 是否为 undefined 来判断参数个数。

4.2 特定类型的函数重载

在函数重载中，具有特定类型的函数声明会被优先调用。

function createPerson(name: string): { name: string };
function createPerson(age: number): { age: number };
function createPerson(nameOrAge: string | number): { name?: string; age?: number } {
  if (typeof nameOrAge === 'string') {
    return { name: nameOrAge };
  } else if (typeof nameOrAge === 'number') {
    return { age: nameOrAge };
  }
  return {};
}