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

TypeScript中的交叉类型

        交叉类型:将多个类型合并为一个类型,使用&符号连接。

    type AProps = { a: string }type BProps = { b: number }type allProps = AProps & BPropsconst Info: allProps = {a: '小月月',b: 7}

        我们可以看到交叉类型是结合两个属性的属性值,那么我们现在有个问题,要是两个属性都有相同的属性值,那么此时总的类型会怎么样?

1、同名基础属性合并

    type AProps = { a: string, c: number }type BProps = { b: number, c: string }type allProps = AProps & BPropsconst Info: allProps = {a: '小月月',b: 7,c:  1, // error (property) c: neverc:  'Domesy', // error (property) c: never}

        我们在ApropsBProps中同时加入c属性,并且c属性的类型不同,一个是number类型,另一个是string类型。现在结合为 allProps 后呢? 是不是c属性numberstring 类型都可以,还是其中的一种?

        然而在实际中, c 传入数字类型字符串类型都不行,我们看到报错,显示的是 c的类型是 never。这是因为对应 c属性而言是 string & number,然而这种属性明显是不存在的,所以c的属性是never。

2、同名非基础属性合并

    interface A { a: number }interface B { b: string }interface C {x: A}interface D {x: B}type allProps = C & Dconst Info: allProps = {x: {a: 7,b: '小月月'}}console.log(Info) // { x: { "a": 7, "b": "小月月" }}

        对于混入多个类型时,若存在相同的成员,且成员类型为非基本数据类型,那么是可以成功合。

    interface A { b: number }interface B { b: string }interface C {x: A}interface D {x: B}type allProps = C & Dconst Info: allProps = {x: {a: 7,b: '小月月' //此时b为never类型这里会报错}}

        如果 接口A 中的 也是 b,类型为number,就会跟同名基础属性合并一样,此时会报错!

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • Qt/C++项目积累: 2.主机监控器 - 2.2 历史功能实现
  • 解决QT creator中文乱码问题
  • 【RHCE】系统服务综合实验
  • WPS点击Zotero插入没有任何反应
  • 谷粒商城学习笔记-18-快速开发-配置测试微服务基本CRUD功能
  • 从3D扫描到CAD模型【逆向工程】
  • 使用大模型进行SQL迁移的实践总结
  • 力扣8,字符串转换整数
  • 搭建基于 ChatGPT 的问答系统
  • 代码随想录算法训练营DAY60|并查集理论基础、寻找存在的路径
  • 攻防世界(PHP过滤器过滤)file_include
  • html+css+js随机验证码
  • 文学式开发工具 Jupyter Notebook
  • 设计模式探索:观察者模式
  • vue draggable组件,拖拽元素时,获取元素上在data或setup中定义的数据
  • [分享]iOS开发-关于在xcode中引用文件夹右边出现问号的解决办法
  • CODING 缺陷管理功能正式开始公测
  • CSS 三角实现
  • Docker入门(二) - Dockerfile
  • express如何解决request entity too large问题
  • JavaScript标准库系列——Math对象和Date对象(二)
  • Linux学习笔记6-使用fdisk进行磁盘管理
  • nfs客户端进程变D,延伸linux的lock
  • python大佬养成计划----difflib模块
  • React Transition Group -- Transition 组件
  • React中的“虫洞”——Context
  • Swoft 源码剖析 - 代码自动更新机制
  • 从输入URL到页面加载发生了什么
  • 服务器从安装到部署全过程(二)
  • 漂亮刷新控件-iOS
  • 如何使用 OAuth 2.0 将 LinkedIn 集成入 iOS 应用
  • 使用前端开发工具包WijmoJS - 创建自定义DropDownTree控件(包含源代码)
  • 【干货分享】dos命令大全
  • 专访Pony.ai 楼天城:自动驾驶已经走过了“从0到1”,“规模”是行业的分水岭| 自动驾驶这十年 ...
  • ​【原创】基于SSM的酒店预约管理系统(酒店管理系统毕业设计)
  • ​数据链路层——流量控制可靠传输机制 ​
  • ​香农与信息论三大定律
  • # 达梦数据库知识点
  • # 再次尝试 连接失败_无线WiFi无法连接到网络怎么办【解决方法】
  • #NOIP 2014# day.1 T2 联合权值
  • $分析了六十多年间100万字的政府工作报告,我看到了这样的变迁
  • (1)(1.9) MSP (version 4.2)
  • (3)nginx 配置(nginx.conf)
  • (C++17) std算法之执行策略 execution
  • (day6) 319. 灯泡开关
  • (M)unity2D敌人的创建、人物属性设置,遇敌掉血
  • (分享)一个图片添加水印的小demo的页面,可自定义样式
  • (过滤器)Filter和(监听器)listener
  • (紀錄)[ASP.NET MVC][jQuery]-2 純手工打造屬於自己的 jQuery GridView (含完整程式碼下載)...
  • (力扣记录)1448. 统计二叉树中好节点的数目
  • (一)ClickHouse 中的 `MaterializedMySQL` 数据库引擎的使用方法、设置、特性和限制。
  • (转)大型网站架构演变和知识体系
  • .Net Core 微服务之Consul(二)-集群搭建
  • .Net Redis的秒杀Dome和异步执行
  • .NET 应用启用与禁用自动生成绑定重定向 (bindingRedirect),解决不同版本 dll 的依赖问题