ts中的函数重载

159 阅读2分钟

什么是重载?

重载指的是在同一个上下文中具备相同函数名,且不同参数列表的函数。这里的“不同参数列表”既指参数的类型也指参数的数量。

ts中如何定义函数重载?

  1. 定义函数签名
  2. 定义具体实现,一般来说 定义实现的函数 的 参数列表 需要包括 所有 重载函数的参数列表 情况,如
function rl(name: string): string;
function rl(name: string,age: number,height: number): string;
function rl(name: string,age?: number,height?: number){
    if(age !== undefined && height !== undefined){
        return `My name is ${name},and age is ${age},and height is ${height}cm`
    }else{
        return `My name is ${name}`
    }
}

上面代码定义了函数rl的两种重载方式,其中

  1. 第一行代码定义其接受一个字符串类型参数,返回字符串类型。
  2. 第二行代码定义其接受一个字符串类型参数,两个个数字类型参数,返回字符串类型。
  3. 最后一段代码是其具体实现,一般来说具体实现的参数列表要包含前面定义的重载函数参数列表的所有情况。
  4. 具体实现不能直接调用,如以上代码并不具备传递2个参数的情况,如直接传递两个参数,会报错。如
rl('JoeZhou',18)//No overload expects 2 arguments, but overloads do exist that expect either 1 or 3 arguments.

使用重载的注意事项

能使用组合类型则不要使用重载

看以下例子,定义重载函数testFunReload,其接受一个参数,可以是字符串类型,可以是数字类型,若是字符串类型返回'0',若是数字类型返回0

function testFunReload(num:number): number;
function testFunReload(str:string): string;
function testFunReload(arg: number | string): number | string{
    if(typeof arg === 'number'){
        return 0
    }else{
        return '0'
    }
}

当我们直接传递一个“确定”的参数的时候,其效果和定义组合类型相同,但假如我们传递一个“不确定”的参数时,ts会报错。如

image.png 从报错信息来看,ts将“不确定”的传参当成组合类型,而我们的重载函数只接受一个确收的类型“string”或“number"。而直接定义组合类型则不会报错,如

function testFunReload(arg: number | string): number | string{
    if(typeof arg === 'number'){
        return 0
    }else{
        return '0'
    }
}

testFunReload(Math.random() > 0.5 ? "hello" : 0)