【TS】函数重载--可选参数--默认参数

news2025/7/10 22:01:17

可选参数–默认参数

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/38541.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

.net-----集合和数据结构

集合和数据结构前言集合和数据结构的基本概念命名空间列表类集合列表类集合&#xff1a;数组列表列表类集合&#xff1a;列表List<T>双向链表LinkedList<T>字典类集合字典类集合类型哈希表Hashtable字典类集合&#xff1a;Dictionary<TKey, TValue >排序列表…

Vue3 Pinia 全局状态管理工具的使用

Pinia 是 Vue3 官方更推荐使用的全局状态管理工具。 Pinia 最初正是为了探索 Vuex 的下一个版本而开发的&#xff0c;因此整合了核心团队关于 Vuex 5 的许多想法。最终&#xff0c;我们意识到 Pinia 已经实现了我们想要在 Vuex 5 中提供的大部分内容&#xff0c;因此决定将其作…

E-梅莉的市场经济学

E-梅莉的市场经济学 题目背景 梅莉这个学期选修了经济学。但是主修心理学的她实在不擅长经济领域的分析&#xff0c;为此她时常抱怨自己学不会&#xff0c;想退课。 但是如果现在退掉的话这学期的学分就不够啦&#xff0c;因此她根据“梦中”的经历&#xff0c;“胡诌”了一…

Unity 如何实现框选游戏战斗单位

文章目录&#x1f354; Preface✨ 如何在屏幕坐标系内绘制框选框&#x1f389; 根据框选范围定位其在世界坐标系中对应的区域&#x1f947; 在该区域内进行物理检测&#x1f354; Preface 本文简单介绍如何实现即时战略游戏中框选战斗单位的功能&#xff0c;如图所示&#xff…

NeRF-SLAM 学习笔记

NeRF-SLAM: Real-Time Dense Monocular SLAM with Neural Radiance Fields 主页&#xff1a;https://deepai.org/publication/nerf-slam-real-time-dense-monocular-slam-with-neural-radiance-fields 论文&#xff1a;https://arxiv.org/pdf/2210.13641.pdf Code&#xff1a;…

RabbitMQ复习笔记

文章目录RabbitMQ一、MQ引言1.1、什么是MQ1.2、MQ有哪些1.3、不同MQ特点二、RabbitMQ 的引言2.1、RabbitMQ2.2、RabbitMQ的安装2.2.1、下载2.2.2、下载的安装包2.2.3、安装步骤三、RabiitMQ 配置3.1、RabbitMQ 管理命令行3.2、web管理界面介绍3.2.1、overview概览3.2.2 Admin用…

手摸手利在idea中利用maven创建web项目

1. 下载maven&#xff0c;目前最新版本是3.8.6。在环境变量中创建MAVEN_HOME变量&#xff0c;并在PATH中添加。maven的运行依赖于java环境&#xff0c;这意味着在配置MAVEN前&#xff0c;应该已经在环境变量中配置有JAVA_HOME和PATH中配置好了JAVA相关环境。 2. 配置完毕后&…

力扣(LeetCode)84. 柱状图中最大的矩形 (C++)

朴素思想 朴素思想&#xff0c;找左右边界&#xff0c;依次乘以区间内最小上边界&#xff0c;取最大值。这个做法需要遍历左边界&#xff0c;对于每个左边界遍历右边界。因此需要 O(n2)O(n^2)O(n2) 的时间复杂度。 转换思路&#xff0c;确定上边界&#xff0c;找左右边界。这…

数据结构--循环链表

目录 1.为什么要有循环链表 2.定义 3.循环链表和单链表的图示对比 4.循环链表和单链表的代码对比 5.循环链表的操作 1.clist.h 2.clist.cpp 1.初始化plist 2.往plist中头部插入数字val 3.往plist中的尾部插入数字val 4.在plist中查找val值,找到返回该节点地址,失败返…

SpringAOP(2)-spring源码详解(七)

上篇文章说了spring的aop&#xff0c;在启动类加一个启动注解&#xff0c;注解点进源码可以看到注册了bean定义的后置处理器。每个切入点都会生成一个adviosr&#xff0c;他们会排序好依次注册。 他的顺序是before、after、afterRturning、afterThrowing 原创 SpringAOP&…

Mac解决鼠标滚轮反方向移动逻辑--Mos(又免费又好用哦~)

目录&#xff1a;&#x1f335;&#x1f335;&#x1f335;前言什么&#xff1f;Mac竟然需要鼠标&#xff1f;Mos &#xff0c;让你的鼠标丝般顺滑&#xff5e;❤️❤️❤️忙碌的敲代码也不要忘了浪漫鸭&#xff01;&#x1f335;&#x1f335;&#x1f335;前言 ✨你好啊&…

PHP连接外部服务器的MySQL参考教程

PHP连接AWS服务器 云服务器上安装MySQL参考教程 linux-安装MySQL&#xff1a;https://blog.csdn.net/xhmico/article/details/125197747云端服务器(linux版)部署mysql&#xff1a;https://blog.csdn.net/m0_51406695/article/details/123886966linux云服务器从零开始安装mysq…

你不能错过的【Python爬虫】测试2(完整源代码+架构+结果)

目录 一、关键工具包的环境以及版本二、架构展示三、各部分code3.1 yjs.py3.2 items.py3.3 middlewares.py3.4 pipelines.py3.5 settings.py四、结果4.1 控制台输出结果4.2 结果截图一、关键工具包的环境以及版本 scrapy:2.7.1版本(这里主要用到的工具包) 二、架构展示 三…

HyperLynx(三十二)高速串行总线仿真(四)

高速串行总线仿真&#xff08;四&#xff09; 在上节的基础上 1.通过导出到LineSim验证一个串行通道 2.快速眼图仿真 1.通过导出到LineSim验证一个串行通道 接下来&#xff0c;将导出网络到LineSim&#xff0c;并为电容分配SPICE模型。然后&#xff0c;将添加封装和串行电容…

WENO格式自动推导

简介 WENO格式是CFD中的一种高精度的数值格式。如果函数光滑&#xff0c;使用rrr个模板可以在空间上达到2r−12r-12r−1。如果出现间断&#xff0c;那么WENO格式退化为ENO格式。 理论上WENO可达任意阶精度&#xff0c;但是推导过程比较繁琐。本文使用Mathematica软件完成WENO…

一个简单的HTML网页(千与千寻电影) 大二学生网页设计与制作 电影主题网页制作

HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置&#xff0c;有div的样式格局&#xff0c;这个实例比较全面&#xff0c;有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。 文章目录一、网页介绍一…

C++ 多态之虚函数表

虚函数表概述 C 的多态&#xff0c;使用动态绑定的技术,技术的核心是虚函数表&#xff08;简称虚表&#xff09;&#xff0c;每个包含了虚函数的类都包含一个虚表&#xff0c;虚表是属于类的&#xff0c;而不是属于某个具体的对象&#xff0c;一个类只需要一个虚表即可。同一个…

猴子也能学会的jQuery第十期——jQuery元素操作(下)

&#x1f4da;系列文章—目录&#x1f525; 猴子也能学会的jQuery第一期——什么是jQuery 猴子也能学会的jQuery第二期——引用jQuery 猴子也能学会的jQuery第三期——使用jQuery 猴子也能学会的jQuery第四期——jQuery选择器大全 猴子也能学会的jQuery第五期——jQuery样式操作…

树莓派系统安装,使用SSD/U盘启动centos

树莓派系统安装&#xff0c;使用SSD/U盘启动centos argon m2 外壳厂家资料 https://www.waveshare.net/wiki/PI4-CASE-ARGON-ONE-M.2 TF卡安装系统 如果是使用TF卡安装&#xff0c;则参考官方文档按步骤安装即可&#xff1a; https://www.waveshare.net/wiki/Raspberry_Pi_Do…

FAlphaBlend——Unreal中的插值助手

游戏开发中经常要进行插值处理&#xff0c;这个东西处理虽然不复杂&#xff0c;但如果自己重新做&#xff0c;还是要写额外的代码&#xff0c;好消息是&#xff0c;Unreal已经为我们提供了插值助手——FAlphaBlend。 我们以一个非常简单的应用场景来说明FAlphaBlend的用处&…