极客笔记TypeScript 函数重载
在本文中，我们将介绍 TypeScript 中的函数重载的概念和用法。函数重载是指在 TypeScript 中，我们可以为同一个函数指定多个函数签名，从而允许函数接受不同类型和数量的参数，并具有不同的返回类型。这使得我们可以以更灵活的方式定义函数，使其能够适应不同的使用场景。
阅读更多：TypeScript 教程
函数重载的语法
在 TypeScript 中，我们可以使用声明多个函数签名的方式来定义函数重载。多个函数签名之间使用函数名称和参数类型相同的形式，并且函数签名之前使用关键字 declare 表示这是函数重载的声明。下面是一个简单的示例：
declare function reverse(string: string): string;
declare function reverse(arr: number[]): number[];
declare function reverse<T>(list: T[]): T[];
在上面的示例中，我们定义了一个名为 reverse 的函数，它有三个函数签名：第一个函数签名接受一个字符串类型的参数并返回一个字符串类型的值，第二个函数签名接受一个数字数组类型的参数并返回一个数字数组类型的值，第三个函数签名接受一个泛型数组类型的参数并返回一个相同类型的数组。这种方式允许我们在使用函数时，根据传入的参数类型选择相应的函数签名进行调用。
函数重载的使用示例
下面我们通过一个例子来演示函数重载的使用。假设我们要实现一个函数 getLength，它可以接受不同类型的参数并返回参数的长度。具体的实现取决于参数的类型。我们可以先声明几个函数签名，然后再根据参数的类型编写函数实现。
declare function getLength(str: string): number;
declare function getLength(arr: any[]): number;
declare function getLength(obj: object): number;
function getLength(param: string | any[] | object): number {
if (typeof param === 'string') {
return param.length;
} else if (Array.isArray(param)) {
return param.length;
} else {
return Object.keys(param).length;
}
}
console.log(getLength("Hello")); // 输出 5
console.log(getLength([1, 2, 3, 4, 5])); // 输出 5
console.log(getLength({ name: "Alice", age: 20 })); // 输出 2
在上面的示例中，我们先声明了三个函数签名，分别适用于接受字符串类型、数组类型和对象类型的参数。然后我们实现了一个名为 getLength 的函数，根据参数的类型使用不同的逻辑来计算并返回参数的长度。最后通过调用 getLength 函数，我们可以分别获取字符串、数组和对象的长度。
TypeScript 的函数重载解析
在 TypeScript 中，当我们调用一个重载函数时，编译器会尝试根据传入的参数类型来选择合适的函数签名进行调用。如果没有找到完全匹配的函数签名，编译器会提示错误。下面我们通过一个例子来解析 TypeScript 中函数重载的行为。
declare function foo(param: string): void;
declare function foo(param: number): void;
declare function foo(param: string, times: number): void;
foo("Hello"); // 调用第一个函数签名的 foo 函数
foo(123); // 调用第二个函数签名的 foo 函数
foo("Hello", 3); // 调用第三个函数签名的 foo 函数
foo(3, "Hello"); // 编译错误，没有匹配的函数签名
在上面的示例中，我们定义了一个名为 foo 的函数，它有三个函数签名分别适用于接受一个字符串参数、一个数字参数和一个字符串参数以及一个数字参数的情况。我们通过调用 foo 函数传入不同的参数来验证函数的行为。在第一个和第二个函数调用中，参数类型与函数签名完全匹配，所以编译器可以选择相应的函数签名进行调用。在第三个函数调用中，参数类型分别为字符串和数字，完全匹配第三个函数签名，所以编译器可以选择第三个函数签名进行调用。而在第四个函数调用中，参数类型为数字和字符串，没有完全匹配的函数签名，所以编译器会提示错误。
总结
本文介绍了 TypeScript 中的函数重载的概念和用法。函数重载允许我们为同一个函数指定多个函数签名，从而使函数能够接受不同类型和数量的参数，并具有不同的返回类型。我们通过示例演示了函数重载的语法和使用方式，并解析了 TypeScript 中重载函数的调用行为。通过合理使用函数重载，我们可以让函数更加灵活和适应不同的使用场景。