【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

16 声望
6 粉丝
0 条评论
推荐阅读
一文搞懂原型和原型链
在了解原型和原型链之前首先得明确它俩是什么东西:原型:prototype又称显示原型1、原型是一个普通对象2、只有构造函数才具备该属性3、公有属性可操作隐式原型:__proto__1、只有对象(普通对象、函数对象)具备2...

兔子先森阅读 58

Vue微信公众号开发踩坑记录
JS-SDK需要向服务端获取签名,且获取签名中需要的参数包括所在页面的url,但由于单页应用的路由特殊,其中涉及到iOS和android微信客户端浏览器内核的差异性导致的兼容问题

imwty132阅读 67.8k评论 81

手把手教你写一份优质的前端技术简历
不知不觉一年一度的秋招又来了,你收获了哪些大厂的面试邀约,又拿了多少offer呢?你身边是不是有挺多人技术比你差,但是却拿到了很多大厂的offer呢?其实,要想面试拿offer,首先要过得了简历那一关。如果一份简...

tonychen153阅读 18k评论 5

封面图
正则表达式实例
收集在业务中经常使用的正则表达式实例,方便以后进行查找,减少工作量。常用正则表达式实例1. 校验基本日期格式 {代码...} {代码...} 2. 校验密码强度密码的强度必须是包含大小写字母和数字的组合,不能使用特殊...

寒青57阅读 8.7k评论 11

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy49阅读 7.4k评论 12

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs42阅读 7k评论 12

封面图
CSS 绘制一只思否猫
欢迎关注我的公众号:前端侦探练习 CSS 有一个比较有趣的方式,就是发挥想象,绘制各式各样的图案,比如来绘制一只思否猫?思否猫,SegmentFault 思否的吉祥物,是一只独一无二、特立独行、热爱自由的(>^ω^&lt...

XboxYan48阅读 3.4k评论 14

封面图
16 声望
6 粉丝
宣传栏