当前位置: 首页 > news >正文

typescript使用解构传参

看下面这个函数

	interface Student {id: number;name: string;class: string;sex: string;}function matriculation(student: Student) {//...}

我们要调用它,就需要传递一个实现了Student约束的对象进去

	interface Student {id: number;name: string;class: string;sex: string;}function matriculation(student: Student) {//...}let lihua: Student = {id: 1,name: 'Lihua',class: '1A',sex: 'Female',};matriculation(lihua);

到这,都没什么问题,
现在我希望这个函数打印一遍传进来的参数的各个属性
如下在不使用解构传参的情况下,

	function matriculation(student: Student) {console.log(`姓名${student.name}`);console.log(`班级${student.class}`);console.log(`性别${student.sex}`);console.log(`学号${student.id}`);}

我们会发现,写法非常臃肿,我们每一次都要使用studen.,
这时候我们可以简化一下,使用解构传参

	function matriculation({ id, name, sex, grade }: Student) {console.log(`学号${id}`)console.log(`姓名${name}`)console.log(`性别${sex}`)console.log(`年级${grade}`)}

这样就简洁多了,

更进一步的使用,

比如现在需求改了高年级的同学因为学校已经有他的信息了,所以入学只需要学号就能办理入学了,其他的值可以先使用默认值,
所以我们得把函数和接口改成如下这种

	interface Student {id: number;name: string;grade: string;sex: string;}type OptionalStudent<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;

这样,函数就能接受某些值为空的参数
在这里插入图片描述
然后就是赋值默认值了,
如果不适用解构传参

	type OptionalStudent<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;function matriculation(student: OptionalStudent<Student, 'name' | 'grade' | 'sex'>) {const defaultStudent: Student = {id: 0,name: 'Unknown',grade: 'Unknown',sex: 'Unknown',};const studentWithDefault = { ...defaultStudent, ...student };console.log(`学号${studentWithDefault.id}`)console.log(`姓名${studentWithDefault.name}`)console.log(`年级${studentWithDefault.grade}`)console.log(`性别${studentWithDefault.sex}`)}

这代码又臃肿了,还得先声明一个对象,然后再将对象解构再解构传过来的参数,再覆盖
不光写起来臃肿,逻辑也臃肿

这种情况我们也可以使用解构传参来改变,因为解构是支持默认值的,如下

	type OptionalStudent<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;function matriculation({ id, name = 'Unknow', grade = 'Unknow', sex = 'Unknow' }: OptionalStudent<Student, 'name' | 'grade' | 'sex'>) {console.log(`学号${id}`)console.log(`姓名${name}`)console.log(`年级${grade}`)console.log(`性别${sex}`)}
http://www.lryc.cn/news/306405.html

相关文章:

  • CSP-J 2023 复赛第4题:旅游巴士
  • JAVA算法和数据结构
  • 每日五道java面试题之spring篇(七)
  • Keil编译GD32工程时找不到lib库文件
  • 测试C#使用ViewFaceCore实现图片中的人脸遮挡
  • 2.21 Qt day2 菜单栏/工具栏/状态栏/浮动窗口、UI界面、信号与槽
  • 300分钟吃透分布式缓存-16讲:常用的缓存组件Redis是如何运行的?
  • 上一篇文章补充:已经存在的小文件合并
  • 代码随想录训练营第三十期|第四十三天|动态规划 part05|1049. 最后一块石头的重量 II ● 494. 目标和 ● 474.一和零
  • c++学习记录 string容器—字符串插入和删除
  • 【IEEE会议征稿】2024年第九届智能计算与信号处理国际学术会议(ICSP 2024)
  • 【电机仿真】HFI算法脉振高频电压信号注入观测器-PMSM无感FOC控制
  • Java学习——集合框架
  • 【鸿蒙 HarmonyOS 4.0】UIAbility、页面及组件的生命周期
  • jdk动态代理与CGLib动态代理
  • Linux 命令行的世界 :4.操作文件和目录
  • 如何使用ArcGIS Pro生成等高线
  • golang学习2,golang开发配置国内镜像
  • Stable Diffusion 绘画入门教程(webui)-ControlNet(线稿约束)
  • 前端笔记——var let const 之间的区别
  • AI工具新革命:从ChatGPT到Sora,生成式AI改变世界
  • C 标准库 - <stdio.h> 详解
  • 支付宝小程序中唤起支付(前后端)
  • AI:139-基于深度学习的语音指令识别与执行
  • 选择 Python IDE(VSCode、Spyder、Visual Studio 2022和 PyCharm)
  • Rabbitmq 超时异常解决:PRECONDITION_FAILED - Timeout value used: 1800000 ms.
  • Java架构师之路二、数据库:SQL语言、关系型数据库、非关系型数据库、数据一致性、事务管理等。
  • 【Spring Cloud】高并发带来的问题及常见容错方案
  • springAOP落地实现
  • Linux学习之vi/vim详细介绍