TypeScript 交叉类型(intersection type)

在TS中和联合类型(union type)对应的还有交叉类型(intersection type)。
交叉类型的出现主要为了组合多个对象类型(object type),因为相对于interface,object type没法继承,那么就可以通过union type来实现混合的目的,从而实现继承的功能。

type objtype1 = {a: string}
type objtype2 = {b: string}
type objtype = objtype1 & objtype2function logObj(obj: objtype) {console.log(obj.a, obj.b)
}

经过objtype1和objtype2交叉objtype 变成了 {a: string, b: string}现在的问题是为什么两个对象类型的交叉是两个对象类型的和?
我们知道联合和交叉都是针对集合的运算,两个集合的交叉应该是集合相交的部分:

type type1 = 1 | 2
type type2 = 1 | 3
type typea = type1 & type2

这时的typea1,这个很好理解,因为type11 | 2,可以看成一个集合,这样两个结合的交集就是1这个类型。

我认为要解释两个对象类型的交叉结果是两个对象类型的和,这个问题需要结合类型兼容性去理解。

interface Pet {name: string;
}
let pet: Pet;let dog = { name: "Lassie", owner: "Rudd Weatherwax" };
pet = dog;

上面Pet类型的变量pet可以被dog对象赋值,而dog类型是{name: string, owner: string},所以简理解为Pet和类型{name: string, owner: string}是兼容的,而兼容的方式可以简单理解type Pet = {name: string} | {name: string, owner: string}这样Pet就成了一个集合,而这个集合参与交叉的时候自然会的出和的结果。结论就是一个对象类型在某种情况下表示的是自身类型+任意额外类型组合组成的一个集合。
所以在参与交叉的时候:

type objtype1 = {a: string} 
可以被看成
type objtype = {a: string} | {a: string, b: string}
type objtype2 = {b: string}
可以被看成
type objtype2 = {b: string} | {b: string, a: string}

这样两个集合的交集就能得到目标类型{a: string, b: string}

以上是我对交叉类型作用于对象类型的个人理解,并没有找到相关文档给予的支持,仅供参考。

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

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

相关文章

【转】JAVA中的转义字符

JAVA中转义字符: 1.八进制转义序列:\ 1到3位5数字;范围\000~\377 \0:空字符 2.Unicode转义字符:\u 四个十六进制数字;0~65535 \u0000:空字符 3.特殊字符:就3个 \"&#xff1a…

八、VueJs 填坑日记之参数传递及内容页面的开发

我们在上一篇博文中&#xff0c;渲染出来了一个列表&#xff0c;并在列表中使用了router-link标签&#xff0c;标签内的&#xff1a;to就是链接地址&#xff0c;昨天咱们是<router-link :to"/content/ i.id">这样写的&#xff0c;今天我们来完成内容页面的渲染…

为Kindeditor控件添加图片自动上传功能

Kindeditor是一款功能强大的开源在线HTML编辑器&#xff0c;支持所见即所得的编辑效果。它使用JavaScript编写&#xff0c;可以无缝地与多个不同的语言环境进行集成&#xff0c;如.NET、PHP、ASP、Java等。官方网站可以查看这里&#xff1a;http://kindeditor.net/index.php Ki…

TypeScript类型推论(Type Inference)

要完全理解类型推论需要完整理解类型上下文&#xff0c;并且理解TS对于是否可以使用类型推论是基于静态分析完成的。 上下文类型应用在许多地方。常见的例子包括函数调用的参数&#xff0c;赋值的右手端位置&#xff0c;类型断言&#xff0c;对象和数组的成员&#xff0c;和返回…

4个万无一失的技巧让您开始使用JBoss BRMS 6.0.3

上周&#xff0c;红帽发布了标记为6.0.3的JBoss BRMS的下一版本&#xff0c;已订阅的用户可以在其客户门户中使用。 如果您对该版本的新增功能感到好奇&#xff0c;请在客户门户网站上在线查看版本说明和其余文档 。 我们正在寻找一些简单的方法来开始使用此新版本&#xff0…

统一命名规则

1. #define 保护 所有头文件都应该使用 #define 防止头文件被多重包含, 命名格式当是:<PROJECT>_<PATH>_<FILE>_H_ 项目 SkinTK中的头文件 SkinTK/SkinTK/targetver.h 可按如下方式保护: #ifndef SKINTK_SKINTK_TARGETVER_H_ #define SKINTK_SKINTK_TARGETVE…

中国移动MM7 API用户手册(七)

4.4 VASP接收状态报告&#xff08;上行业务&#xff09;当VASP在发送MM7SubmitReq给MMSC时设置需要发送状态报告的请求为true时&#xff0c;MMSC在收到MM7SubmitReq后&#xff0c;会发送状态报告给VASP&#xff0c;此时VASP可以进行接收。接收方式和接收传送消息一样&#xff…

如何仅通过CSS实现多行文本超长自动省略号

在CSS中&#xff0c;我们可以通过下面的样式实现DIV元素中文本超长后自动截断并以省略号结尾&#xff1a; overflow: hidden;word-break: normal;text-overflow: ellipsis; text-overflow: ellipsis是实现文本截断后以省略号结尾的关键样式&#xff0c;但问题是如果添加该样式则…

带有Angular JS的Java EE 7 – CRUD,REST,验证–第2部分

这是Angular JS承诺的Java EE 7的后续版本–第1部分 。 花了比我预期更长的时间&#xff08;找到时间来准备代码和博客文章&#xff09;&#xff0c;但是终于到了&#xff01; 应用程序 第1部分中的原始应用程序只是带有分页的简单列表&#xff0c;以及提供列表数据的REST服务…

Chrome不显示OPTIONS请求的解决方法2021版chrome90

在chrome90上之前展示跨域请求预检请求的方法失效了&#xff1a; 在chrome地址栏总输入 chrome://flags/#out-of-blink-cors 将其设置为Disabled后重启浏览器 在chrome://flags找不到选项out-of-blink-cors。取而代之的是chrome将预检请求放到了控制台网络面板的 OTHER 面板中。…

安装CentOs 5.5后无法显中文(中文乱码)

症状&#xff1a;在使用CentOS 系统时&#xff0c;安装的时候可能你会遇到英文的CentOS系统&#xff0c;在这中情况下安装CentOS系统时是默认安装&#xff08;即英文&#xff09;。安装完毕后&#xff0c;上网出现的却是中文乱码。 解决方法&#xff1a; 到CentOs资源网站上去找…

粗读《构建之法》后的思考和收获

利用出差的空挡&#xff0c;快速阅读了一下邹欣老师的《构建之法》一书。对我校软件工程的教学改革确实有很多值得参考的地方&#xff0c;强调实践环节和社会实际工作流程的结合&#xff0c;而不是为了实验而实验。 在阅读过程也有一些问题。 问题1&#xff1a;MSF中强调人员的…

SVG实现波浪效果

SVG实现波浪效果 svg path&#xff1a;C 贝塞尔曲线绘制波浪形状 A 绘制圆弧形 svg animate&#xff1a;制作波浪动画&#xff0c;为了波浪动画效果自然&#xff0c;设置values关键点       attributeName&#xff1a;变化属性名 dur&#xff1a;动画时间 repeatCount&a…

允许同站跨域Nginx配置方案

基于目前前后端分离的趋势和微前端解决方案&#xff0c;并且很多web服务部署在Nginx服务器上&#xff0c;那么因为前后端分离导致的跨域问题需要迫切得到解决。因为是否允许跨域的因素有协议、域名、端口&#xff0c;只要有一个不一致就算跨域。大部分需求要求一个一级域名下所…

使用WildFly 8在Java EE7中自举Apache Camel

从Camel版本2.10开始&#xff0c;支持CDI&#xff08;JSR-299&#xff09;和DI&#xff08;JSR-330&#xff09;。 这为在Java EE容器中以及独立Java SE或CDI容器中开发和部署Apache Camel项目提供了新的机会。 是时候尝试一下并熟悉它了。 骆驼到底是什么&#xff1f; 骆驼是…

Larbin源代码分析[6]LARBIN中线程处理类

一 线程类 larbin下的线程操作类&#xff0c;主要在mypthread.h中定义&#xff0c;实质上是利用宏定义&#xff0c;封装了pthread.h中的系统调用。 一个进程可以有多个线程&#xff0c;每个线程都有自己的处理流程。 二 具体实现 typedef void* (*StartFun) (void *); void sta…

好东西要分享

目录 矢量图标库$\text{pic}$图论神器$\text{bzoj}$离线题库打字速度表情包PPP矢量图标库 个人jio的这个阿里巴巴矢量图标库蛮不错的 上面这张就是去上面的网站找的。 $\text{pic}$ 来wallpaper abyss找点好康的图片吧。 图论神器 画图 $\text{bzoj}$离线题库 $\text{bzoj}$离线…

Vue2.0 全家桶开发的网页应用(参照吾记APP)

github链接 借鉴吾记APP&#xff0c;使用 vue2.0 vue-router vuex 为主要技术栈&#xff0c;elementui做为ui框架&#xff0c;多模块 spa 模式&#xff0c;webpack2.0 负责模块打包&#xff0c;gulp 负责处理静态资源打包、压缩&#xff0c;欢迎打赏star&#xff01;&#xff…

【antd】输入控件的思想

antd对于form中输入控件的抽象十分简单&#xff0c;只要能接收value和onChange属性的组件都可以成为Form.Item的子组件&#xff0c;为Form对应的字段提供值。对于输入控件的抽象我认为这已经达到了极致&#xff0c;事件&#xff08;onChange&#xff09;产生值&#xff08;valu…

Java EE 7批处理和魔兽世界–第1部分

这是我在上一个JavaOne上的会议之一。 这篇文章将扩展主题并使用Batch JSR-352 API进入一个实际的应用程序。 此应用程序与MMORPG 魔兽世界集成。 由于JSR-352是Java EE世界中的新规范&#xff0c;所以我认为许多人不知道如何正确使用它。 确定本规范适用的用例也可能是一个挑…