关于前端:TS函数重载可选参数默认参数

可选参数–默认参数

ts中定义的数据类型,某些状况下只须要传入定义数据类型的一部分参数,比方:id 、name、age、address,此时须要批改用户的名称,那么只须要传入id、name就够了;某些状况下须要批改用户的所有信息,须要传入全副参数;能够定义两个接口别离接管,但在这里定义一个接口也能够做到,此处用的就是可选参数和默认参数。
语法:属性名 ?: 数据类型 = 值

// lastName ?: string   // 语法 ?: 为可选参数,可传可不传

const getFullName = function (firstName : string = '西方' , lastName ?: string) : string {
    if(lastName){
        return `${firstName},${lastName}`
    } 
    return firstName
}

// 调用函数不传参,应用默认参数,第二个为可选参数可不传
console.log(getFullName());
// 调用函数,只传一个,firstName将接管传入的值 '艺术概论'
console.log(getFullName('艺术概论'));
// 调用函数,传入两个参数,别离对应 firstName 和 lastName
console.log(getFullName('艺术','概论'));

打印后果

这种带?:的数据类型就是可传可不传的可选参数。


函数重载

在调用函数时,在参数上能够定义须要接管的数据类型,但如果这个函数在不同场合下都须要用到,那么定义一套数据类型标准显然是不够的,所以此处能够应用函数重载,能够在此基础上从新定义数据类型。

// 函数的参数能够传入 x 和 y ,并且这两者都能够是字符串或者数字   函数返回值也能够是字符串或数字
function add(x : string | number , y : string | number) : string | number {
    // 然而外部做限度,x和y只能是字符串或者只能是数字
    if(typeof x === 'string' && typeof y === 'string') {
        return x + y
    } else if (typeof x === 'number' && typeof y === 'number') {
        return x + y
    }
    return '未找到'
}

在这个案例中,尽管定义的参数 xy 能够既传数字也传字符串,那么 x传一个字符串,y传一个数字,显然是合乎函数参数的数据标准的,但在函数外部,却对传入的值进行的数据类型校验,那么此时就只能在传参的时候做数据类型标准了,这里曾经标准好了,在不更改原有函数类型的根底上,能够应用函数重载来从新定义函数的参数类型。

// 函数重载申明
function add (x : string , y : string) : string   // 传入x、y只能是字符串 返回的也是字符串
function add (x : number , y : number) : number   // 传入x、y只能是数字 返回的也是数字

此时传入的xy,要么只能都是数字,要么只能都是字符串

// 这两个传入没问题
console.log(add('西方','不败'));
console.log(add(100,200));

注意事项:
函数重载后,重载的数据类型会笼罩函数本来的数据类型束缚,此时再依照原有的数据类型传入参数会报错提醒。

然而,重载的数据类型能够轻易应用,跟程序无关。

console.log(add('西方','不败'));  // 字符串
console.log(add(100,200));       // 数字
console.log(add('西方','不败'));  // 字符串

对于函数和函数类型,请看另一篇:【TS】函数和函数类型


案例源码:https://gitee.com/wang_fan_w/ts-seminar

如果感觉这篇文章对你有帮忙,欢送点亮一下star

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据