TypeScript(十)函数重载

8,464 阅读2分钟

函数重载

根据参数的类型执行不同的函数

多数用于传入不同的参数得到不同的结果

重载分为两个部分(缺一不可):

  • 声明
  • 实现
例1:

假设我们有一个函数,可以接收string类型相拼接,也可以接收number类型相加。

// 声明:
function add(arg1: string, arg2: string): string
function add(arg1: number, arg2: number): number
// 实现:
function add(arg1: string | number, arg2: string | number) {
   // 在实现上我们要注意严格判断两个参数的类型是否相等,而不能简单的写一个 arg1 + arg2
   if(typeof arg1 === 'string' && typeof arg2 === 'string') {
       return arg1 + arg2;
  } else if(typeof arg1 === 'number' && typeof arg2 === 'number') {
       return arg1 + arg2;
  }
}

注意: 如果实现部分没有严格判断,会提示此重载签名与其实现签名不兼容。

函数重载只是多个函数声明,逻辑依旧要自己写,并不会吧我们声明的多个函数进行合并。

例2

写个函数test,当传入参数param是User时,不传入flag,当传入的参数是number时,传入flag

interface User {
   namestring;
   agenumber;
}
​
declare function test(param: User | number, flag?: boolean): number;
const user = {
   name'Jack',
   age18
}
const res = test(user, false)// 虽然不报错,但是与想法未被,当传入的是User时 应该不让传入flag

重载解决上述问题:

interface User {
   namestring;
   agenumber;
}
declare function test(params:User):number;
declare function test(params:number, flag:boolean):number;
const user = {
   name'jack',
   age666
};
// 类型"{name: string; age: number; }"的参数不能赋给类型"number"的参数。
const res = test(user, false);
实际项目中的用法:

有声明之后,需要有具体的实现

interface User {
   namestring;
   agenumber;
}
const user:User = {
   name'jack',
   age123
}
class oneClass {
   // 声明
   public test(paramUser): number;
   public test(paramnumberflagboolean): number;
   // 实现
   public test(param: User | number, flag?: boolean) {
       if(typeof param === 'number') {
           return param+(flag ? 1 : 0)
      } else {
           return param.age
      }
  }
}

如果仅传入的参数不同,但是得到的结果是一样的,那么重载的意义不大。

function func (anumber): number
function func (anumberbnumber): number
//代替上面:
function func (anumber, b?: number): number
function func (anumber): number
function func (astring): number
//替代上面
function func (anumber | string): number