ts中的函数重载

lxf2023-05-17 01:50:01

什么是重载?

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

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会报错。如

ts中的函数重载 从报错信息来看,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)
本网站是一个以CSS、JavaScript、Vue、HTML为核心的前端开发技术网站。我们致力于为广大前端开发者提供专业、全面、实用的前端开发知识和技术支持。 在本网站中,您可以学习到最新的前端开发技术,了解前端开发的最新趋势和最佳实践。我们提供丰富的教程和案例,让您可以快速掌握前端开发的核心技术和流程。 本网站还提供一系列实用的工具和插件,帮助您更加高效地进行前端开发工作。我们提供的工具和插件都经过精心设计和优化,可以帮助您节省时间和精力,提升开发效率。 除此之外,本网站还拥有一个活跃的社区,您可以在社区中与其他前端开发者交流技术、分享经验、解决问题。我们相信,社区的力量可以帮助您更好地成长和进步。 在本网站中,您可以找到您需要的一切前端开发资源,让您成为一名更加优秀的前端开发者。欢迎您加入我们的大家庭,一起探索前端开发的无限可能!