title: 函数重载

函数重载

原文地址

在本教程中，你将学习 TypeScript 中的函数重载

TypeScript 中的函数重载介绍

在 TypeScript 中，函数重载允许你建立某个函数参数类型和返回类型之间的关系。

注意 TypeScript 的函数重载不同于其他静态类型语言，如 C# 和 Java 支持的函数重载。

让我们看几个简单的例子：

  1. function addNumbers(a: number, b: number): number {
  2.   return a + b;
  3. }
  5. function addStrings(a: string, b: string): string {
  6.   return a + b;
  7. }

在这个例子中：

  • addNumbers() 函数返回两数之和；
  • addStrings() 函数返回两个字符串连接后的结果。

可以使用 联合类型 来定义一个函数参数和返回值的类型范围：

  1. function add(a: number | string, b: number | string): number | string {
  2.   if (typeof a === 'number' && typeof b === 'number') {
  3.     return a + b;
  4.   }
  6.   if (typeof a === 'string' && typeof b === 'string') {
  7.     return a + b;
  8.   }
  9. }

然后，联合类型不能精确地表示参数类型和返回值类型之间的关系。add() 函数告诉编译器它将接受数字或者字符串参数，返回一个数字或者字符串。但是它无法描述在参数都为数字的时候返回数字，当参数都是字符串的时候返回字符串。为了更好地描述函数使用的类型之间的关系，TypeScript 支持函数重载，如下所示：

  1. function add(a: number, b: number): number;
  2. function add(a: string, b: string): string;
  3. function add(a: any, b: any): any {
  4.   return a + b;
  5. }

在这个例子中，我们为 add() 函数添加了两个函数重载，第一个函数重载告诉编译器参数都是数字的时候，add() 函数应该返回一个数字。第二个函数重载有着类似的行为，不过换成了针对字符串类型的参数。

每个函数重载定义了 add() 函数支持的类型组合，描述了参数类型和它返回值类型之间的映射关系。现在当你调用 add() 函数的时候，代码编辑器会提示有一个可用的重载函数，如下所示：

typescript-function-overloadings

数函数重载中使用可选参数

当你使用函数重载的时候，函数的参数数量必须相同，如果有一个函数重载的参数比另外一个函数重载的参数多的话，你必须把多出来的参数设置为可选参数，如下所示：

  1. function sum(a: number, b: number): number;
  2. function sum(a: number, b: number, c: number): number;
  3. function sum(a: number, b: number, c?: number): number {
  4.   if (c) return a + b + c;
  5.   return a + b;
  6. }

sum() 函数接受两个或者三个类型为数字的参数，第三个参数是可选的，如果没有把它设置为可选参数，编译器将抛出错误提示。

方法重载

当一个函数是一个类的属性的时候，它被称为方法，TypeScript 也支持方法重载，如下所示：

  1. class Counter {
  2.   private current: number = 0;
  3.   count(): number;
  4.   count(target: number): number[];
  5.   count(target?: number): number | number[] {
  6.     if (target) {
  7.       let values = [];
  8.       for (let start = this.current; start <= target; start++) {
  9.         values.push(start);
  10.       }
  11.       this.current = target;
  12.       return values;
  13.     }
  14.     return ++this.current;
  15.   }
  16. }

count() 函数可以返回一个数字或者一个数组，这取决于传递给它的参数的数量。

  1. let counter = new Counter();
  3. console.log(counter.count()); // return a number
  4. console.log(counter.count(20)); // return an array

输出：

  1. 1
  2. [
  3.    1,  2,  3,  4,  5,  6,  7,
  4.    8,  9, 10, 11, 12, 13, 14,
  5.   15, 16, 17, 18, 19, 20
  6. ]

小结

  • TypeScript 中的函数重载允许你描述函数的参数类型和返回类型之间的关系。