聊一下 TS 中的交叉类型
交叉类型不能完全按照传统编程中的 与
来理解。
交叉类型的定义:将多个类型合并为一个类型,包含了所有类型的特性,而且要同时满足要交叉的所有类型。
后半段话不是很好理解,看一下接口类型和联合类型的交叉类型就好理解了。
接口类型的交叉类型
interface Interface1 {
id: number;
name: string;
}
interface Interface2 {
age: number;
}
type IntersectionType = Interface1 & Interface2;
交叉类型 IntersectionType
的类型为
{
id: number;
name: string;
age: number;
}
对于接口类型来说,交叉类型确实是具有所有接口类型的所有特性。
联合类型的交叉类型
对于联合类型,情况就有点不同了。
type UnionA = 'px' | 'em' | 'rem' | '%';
type UnionB = 'vh' | 'em' | 'rem' | 'pt';
type IntersectionUnion = UnionA & UnionB;
交叉类型 IntersectionUnion
的类型为:
'em' | 'rem'
为什么会这样?可以这样来理解。
交叉类型不仅要将所有的类型合并为一个类型,而且要同时满足要交叉的类型。
要想同时满足两个接口,那么交叉后的类型必须要同时有那两个接口的属性,否则接口肯定会报需要这个属性,但是没有提供。
要想同时满足两个联合类型,那么取的必须要是两个联合类型的交集,否则不可能同时满足两个联合类型。
你还有更好的理解方式吗?欢迎一起交流。
聊一下 TS 中的交叉类型的更多相关文章
- Ionic3在ts中获取html中值的方法
我觉得有两种方法,都是Angular中的语法,一种是把值当做参数传递,另一种是使用ngModel实现双向绑定 还有一种很少用到的,Js的原生方法:document.getElementById('ch ...
- 【转】Ionic3在ts中获取html中值的方法
我觉得有两种方法,都是Angular中的语法,一种是把值当做参数传递,另一种是使用ngModel实现双向绑定 还有一种很少用到的,Js的原生方法:document.getElementById('ch ...
- ts中基本数据类型(上)
/* 定义数组*/ var arr: number[] = [1, 2, 3]; var arr1: Array<number> = [1, 2, 3]; var arr2: [str ...
- 在 Typescript 2.0 中使用 @types 类型定义
在 Typescript 2.0 中使用 @type 类型定义 基于 Typescript 开发的时候,很麻烦的一个问题就是类型定义.导致在编译的时候,经常会看到一连串的找不到类型的提示.解决的方式经 ...
- 创业者拿到融资别高兴太早,当心TS中的优先清算权
最近创投圈的新闻读起来真是让人有些绝望啊,一家家创业公司接连宣告倒闭,其中不乏一些走在比较后面的“明星企业”,冷不丁冒出点消息,却是创始人发的公告,宣布公司资金链断裂,进入破产清算程序,或被低价并购. ...
- C# 中的枚举类型 enum (属于值类型)
原文 C# 中的枚举类型 enum (属于值类型) C# 支持两种特殊的值类型:枚举和结构. 声明枚举:声明时要声明所有可能的值. using System; using System.Collect ...
- Programming In Scala笔记-第十七章、Scala中的集合类型
本章主要介绍Scala中的集合类型,主要包括:Array, ListBuffer, Arraybuffer, Set, Map和Tuple. 一.序列 序列类型的对象中包含多个按顺序排列好的元素,可以 ...
- 1 Java中的时间类型
总结:sql中的时间转 util的时间直接赋值即可:反过来,必须先吧util下的时间转换成毫秒,再通过sql的构造器生成sql的时间格式. 1 Java中的时间类型 java.sql包下给出三个与数据 ...
- ts中的类的定义,继承和修饰符
自己搞一个ts文件 里面写代码如下,试一下就行了 /* 1.vscode配置自动编译 1.第一步 tsc --inti 生成tsconfig.json 改 "outDir": &q ...
随机推荐
- 微前端框架 single-spa 技术分析
在理解微前端技术原理中我们介绍了微前端的概念和核心技术原理.本篇我们结合目前业内主流的微前端实现 single-spa 来说明在生产实践中是如何实现微前端的. single-spa 的文档略显凌乱,概 ...
- 【机器学习与R语言】6-线性回归
目录 1.理解回归 1)简单线性回归 2)普通最小二乘估计 3)相关系数 4)多元线性回归 2.线性回归应用示例 1)收集数据 2)探索和准备数据 3)训练数据 4)评估模型 5)提高模型性能 1.理 ...
- 56-Remove Linked List Elements
Remove Linked List Elements My Submissions QuestionEditorial Solution Total Accepted: 61924 Total Su ...
- 11.13python第一周周末练习
2.请输出你的基本个人信息 3.结合逻辑判断,写一个不同学生分数,输出良好,优秀,分数不及格 循环输出 字符串的替换. 以什么开头startwith 以什么结尾endwith 列表转为字符串 字符串转 ...
- List 去重的 6 种方法,这个方法最完美!
在日常的业务开发中,偶尔会遇到需要将 List 集合中的重复数据去除掉的场景.这个时候可能有同学会问:为什么不直接使用 Set 或者 LinkedHashSet 呢?这样不就没有重复数据的问题了嘛? ...
- angular中路由跳转并传值四种方式
一.路由传值 步骤1 路由传递参数 注意 一定是要传递 索引值 let key = index 这种情况是在浏览器中可以显示对应的参数 这种的是问号 localhost:8080/news?id=2& ...
- Oracle学习笔记(1)
折腾了好久 终于把oracle安装成功了.小兴奋下. 创建了一个数据库 dabook. run--> Services.msc查看服务: 可以看到DABOOK的服务已启动. 1,sys用户 在c ...
- 【Linux】【Shell】【Basic】数组
1. 数组: 变量:存储单个元素的内存空间: 数组:存储多个元素的连续的内存空间: 数组名:整个数组只有一个名字: 数组 ...
- elasticSearch索引库查询的相关方法
package com.hope.es;import org.elasticsearch.action.search.SearchResponse;import org.elasticsearch.c ...
- podman wsl2在windows重启后出错
1. error joining network namespace for container 如果没有先停止容器就重启windows,极大概率就会出现这个问题 解决方法 先停止停止的容器再启动已退 ...