【TypeScript】交叉类型联合类型(四)


【TypeScript】交叉类型&联合类型(四)



在这里插入图片描述

    • 【TypeScript】交叉类型&联合类型(四)
        • 一、简介
        • 二、交叉类型
          • 2.1 交叉类型使用的注意点
          • 2.2 基本数据类型交叉
          • 2.3 对象类型交叉
        • 三、联合类型
        • 四、类型缩减

一、简介

TypeScript 中的交叉类型联合类型是用来组合多个类型的方式。

  • 交叉类型
    交叉类型(Intersection Types)使用&符号将多个类型组合在一起,表示同时具备这些类型的特性。
  • 联合类型
    联合类型(Union Types)使用|符号将多个类型组合在一起,表示可以是其中任意一个类型。

二、交叉类型

交叉类型, 简单来说就是通过&符号将多个类型进行合并成一个类型,然后用type来声明新生成的类型。

这里我举个例子,具体如下:


type A = { foo: number };
type B = { bar: string };
type C = A & B;const obj: C = { foo: 123, bar: "abc" };

在上面的例子中,类型 C 是类型 A 和类型 B 的交叉类型,表示同时具备 foo 和 bar 属性。变量 obj 符合交叉类型 C 的定义,拥有 foo 和 bar 属性。这就是一个典型的交叉类型。

2.1 交叉类型使用的注意点

在使用交叉类型时,有几个注意点需要考虑:

问:任何类型都能通过 & 合并成新的类型吗?

:这肯定是 不行 的,原子类型进行合并是没有任何意义,因为它们合并后的类型是 never,比如 string & number,这肯定是错误的,因为不可能有既满足字符串又能满足数字类型的值.

type A = string & number; // 错误:基本类型无法进行交叉操作

问:交叉的类型中具有同名属性,该怎么处理?

:这里分两种情况,如果同名属性的类型相同则合并后还是原本类型,如果类型不同,则合并后类型为never

  • 合并后是string
type A = { foo: string };
type B = { foo: string };
type C = A & B; // 合并后是neverconst obj: C = { foo: "abc" }; // 使用类型断言解决冲突
  • 合并后是never
type A = { foo: number };
type B = { foo: string };
type C = A & B; // 合并后是neverconst obj: C = { foo: "abc" }; // 报错, 可以使用这个避免错误 { foo: "abc" as never }; 

请添加图片描述

2.2 基本数据类型交叉
  • any和number交叉结果是any类型
  • any和boolean交叉结果是any类型
  • any和string交叉结果是any类型
  • any和never交叉结果是never类型。

注意:any 类型和除 never 类型以外的任何类型交叉时都为any

type A = any & 1; //any
type B = any & boolean; //any
type C = any & never; //neverlet Aname: A = 'lining'
let Bname: B = 'lining'

其他情况比较:

type A = number & 1; //1
type B = 'maoxiansheng' & string; //'maoxiansheng'
type C = boolean & true; //true
2.3 对象类型交叉
  • 键的类型是对象类型
    A、B、C三个类型都有相同的键inner,但是键的数据类型不同,分别是D、E、F,此时A&B&C会将inner键的类型进行合并,其实是D、E、F的交叉类型。
interface A {inner: D;
}
interface B {inner: E;
}
interface C {inner: F;
}interface D {d: boolean;
}
interface E {e: string;
}
interface F {f: number;
}

交叉类型使用

type ABC = A & B & C;
let abc: ABC = {inner: {d: false,e: 'className',f: 5}
};
  • 键的类型是字面量类型或字面量联合类型
    字面量类型是可辨识的类型,当键的类型是不同的字面量类型,则交叉后类型为never类型。
    type A = {kind:'a',loyal:number
    }
    type B = {kind:'b',loyal:string
    }type AB = A&B;//never
  • 函数类型的交叉运算
    函数类型的交叉运算会使用ts中函数重载来实现。
    type A = (a:number,b:number) => void
    type B = (a:string,b:string) => void
    type AB = A&B;let func:AB = (a:number | string ,b:number | string) => {} 
    func(1,2)//正常
    func('a','b')//正常
    func(1,'b')//报错
    
    请添加图片描述
    由于联合后,没有对应的func(number, string)类型的参数,因此会报出错误,解决上面的问题,只需要再加一个数据类型,其中 a为number类型,b为string类型。具体如下:
    type A = (a:number,b:number) => void
    type B = (a:string,b:string) => void
    type C = (a:number,b:string) => void
    type ABC = A&B&C;let func:ABC = (a:number | string ,b:number | string) => {} 
    func(1,2)//正常
    func('a','b')//正常
    func(1,'b')//正常
    

相信小伙伴能够看懂这里的逻辑了吧,就是交叉的类型需要成对的匹配,那假如再出现需要传递的参数是func(string,number)类型的参数,有应该如何处理?只需要再添加新的类型即可:type C = (a:string,b:number) => void

但是,实际操作可能不需要这么麻烦,除非必要必须这样做。通常我们会有更加简单的方案直接定义。

三、联合类型

联合类型和交叉类型比较相似,联合类型通过 | 符号连接多个类型从而生成新的类型。
它主要是取多个类型的交集,即多个类型共有的类型才是联合类型最终的类型。联合类型可以是多个类型其中一个,可做选择,比如:string | number,它的取值可以是string类型也可以是number类型。
举几个例子,如下所示:

  • 声明变量的时候设置变量类型

    let a:string|number|boolean;
    a = 's';
    a = 1;
    a= false;
  • 多个接口类型进行联合

    interface X{q:number,w:string,r:string
    }
    interface Y{q:numberr:string,
    }
    type XY = X | Y
    let value:XY = {q:1,r:'r'
    }let value2:XY = {q:1,r:'r',w: 'w'
    }
    

    错误演示,多余 x 属性。

    interface X{q:number,w:string,r:string}
    interface Y{q:numberr:string,
    }
    type XY = X | Y
    let value3:XY = {q:1,r:'r',x: 'x' // Error,Type '{ q: number; r: string; x: string; }' is not assignable to type 'XY'.
    }
    
  • 函数接口类型进行联合

    interface X{x:()=> string;y:()=> number;
    }
    interface Y{x:()=>string;
    }
    type XY = X|Y;
    function func1():XY{
    //此处不进行类型断言为XY在编辑器中会报类型错误return {} as XY}let testFunc = func1();
    testFunc.x();
    testFunc.y(); //Error:类型“XY”上不存在属性“y”,类型“Y”上不存在属性“y”。
    

请添加图片描述另外我们还要注意,**testFunc.x()**还会报类型错误,我们需要用类型守卫来区分不同类型。这里我们用 in 操作符来判断

if('x' in testFunc) testFunc.x()

扩展:boolean 类型可以看成是 true | false 的联合类型


四、类型缩减

  • 当字面量类型和原始类型进行联合,那么就会造成类型缩减。

    type A = 'a' | string;  //string类型
    type B = false | boolean; //bolean 类型
    type C = 1 | number; //number类型

如上,A是由字面量 a 和原始类型string组成,则会缩减为string类型。

  • 枚举也会有类型缩减现象,如下:
    enum Class{A,B}
    type C = Class.A | Class;   //Class类型
    

注意⚠️:TS会把字面量类型和枚举成员类型给缩减掉,只剩下原始类型和枚举类型

当接口类型进行联合,接口中同名属性的类型不同,该怎么进行缩减呢?比如下面的例子

interface A{name:string
}
interface B{name:string | number[property:string]:any
}
type AB = A|B

会缩减为B类型,可以实际查看该运行结果

interface A{name:string
}
interface B{name:string | number[property:string]:any
}
type AB = A|Blet nameA: AB = { name: '' }
let nameB: AB = { name: 123 }
let nameC: AB = { name: 123, count: 256 }

以上就是TypeScript中交叉类型和联合类型的说明。感觉对自己有用的客观请不要吝啬你手中的三连,谢谢。






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

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

相关文章

坐标转换-使用geotools读取和转换地理空间表的坐标系(sqlserver、postgresql)

前言: 业务上通过GIS软件将空间数据导入到数据库时,因为不同的数据来源和软件设置,可能导入到数据库的空间表坐标系是各种各样的。 如果要把数据库空间表发布到geoserver并且统一坐标系,只是在geoserver单纯的设置坐标系只是改了…

jvm-程序计数器

1、是什么 4 学习路线 类加载器 内存结构方法区 类堆 对象虚拟机栈程序计数器本地方法栈 执行引擎解释器编译器 热点代码 5 程序计数器–作用 java源代码编译蛏二进制字节码 jvm指令。 对所有平台保持一致性。记住下一条jvm指令的执行地址。寄存器,cpu中读取速度…

从零开始学习 Java:简单易懂的入门指南之API、String类(八)

常用API 1.API1.1API概述1.2如何使用API帮助文档 2.String类2.1String类概述2.2String类的特点2.3String类的构造方法2.4创建字符串对象两种方式的区别2.5字符串的比较2.5.1号的作用2.5.2equals方法的作用 2.6用户登录案例2.6.1案例需求2.6.2代码实现 2.7遍历字符串案例2.7.1案…

elementUi select下拉框触底加载异步分页数据

在Element UI中,可以通过监听select下拉框的visible-change事件来实现触底加载下一页的效果。 方式一:利用elementUi的事件 具体步骤如下: 首先,在select组件中设置:visible-change"handleVisibleChange"…

【代码解读】RRNet: A Hybrid Detector for Object Detection in Drone-captured Images

文章目录 1. train.py2. DistributedWrapper类2.1 init函数2.2 train函数2.3 dist_training_process函数 3. RRNetOperator类3.1 init函数3.1.1 make_dataloader函数 3.2 training_process函数3.2.1 criterion函数 4. RRNet类(网络模型类)4.1 init函数4.…

【GitOps系列】如何实施自动化渐进式交付?

文章目录 前言自动渐进式交付概述自动渐进式交付准备创建生产环境创建 AnalysisTemplate访问生产环境安装Prometheus配置 Ingress-Nginx 和 ServiceMonitor验证 Ingress-Nginx 指标 自动渐进式交付实战自动渐进式交付成功自动渐进式交付失败 结语 前言 在实施金丝雀发布的过程中…

无涯教程-Perl - References(引用)

Perl引用是一个标量数据类型,该数据类型保存另一个值的位置,该值可以是标量,数组或哈希。 创建引用 变量,子程序或值创建引用很容易,方法是在其前面加上反斜杠,如下所示: $scalarref \$foo; $arrayref …

Linux下的环境变量

目录 一、环境变量是什么?二、常见的环境变量三、查看环境变量的方法四、和环境变量相关的命令五、命令行参数五、环境变量通常是具有全局属性的 一、环境变量是什么? 环境变量通俗来说就是一种存储系统和应用程序运行需要的配置信息的方式。可以把环境…

OPENCV C++(四)形态学操作+连通域统计

形态学操作 先得到一个卷积核 Mat kernel getStructuringElement(MORPH_RECT,Size(5,5)); 第一个是形状 第二个是卷积核大小 依次为腐蚀 膨胀 开运算 闭运算 Mat erodemat,dilatemat,openmat,closemat;morphologyEx(result1, erodemat, MORPH_ERODE, kernel);morphologyEx…

计算机网络(4) --- 协议定制

计算机网络(3) --- 网络套接字TCP_哈里沃克的博客-CSDN博客https://blog.csdn.net/m0_63488627/article/details/132035757?spm1001.2014.3001.5501 目录 1. 协议的基础知识 TCP协议通讯流程 ​编辑 2.协议 1.介绍 2.手写协议 1.内容 2.接口 …

MVC配置原理

如果你想保存springboot的mvc配置并且还想自己添加自己的配置就用这个。 视图解析器原理,它会从IOC容器里获取配置好视图解析器的配置类里的视图解析器集合, 然后遍历集合,生成一个一个的视图对象,放入候选 视图里,…

Spark、RDD、Hive 、Hadoop-Hive 和传统关系型数据库区别

Hive Hadoop Hive 和传统关系型数据库区别 Spark 概念 基于内存的分布式计算框架 只负责算 不负责存 spark 在离线计算 功能上 类似于mapreduce的作用 MapReduce的缺点 运行速度慢 (没有充分利用内存)接口比较简单,仅支持Map Reduce功能…

微信云开发-数据库操作

文章目录 前提初始化数据库插入数据查询数据获取一条数据获取多条数据查询指令 更新数据更新指令 删除数据总结 前提 首先有1个集合(名称:todos). 其中集合中的数据为: {// 计划描述"description": "learn mini-program cloud service",// 截止日期"…

【Linux】操作系统与冯诺依曼体系——深度解析(软硬件层面)

​ 前言 大家好吖,欢迎来到 YY 滴 Linux系列 ,热烈欢迎! 本章主要内容面向接触过Linux的老铁,从软硬件层面向大家介绍操作系统与冯诺依曼体系, 主要内容含: 欢迎订阅 YY滴Linux专栏!更多干货持…

学习笔记|简单分享一下自建Gravatar镜像

目录 前言 Gravatar 使用 思路 操作 步骤一:注册或登录华为云 步骤二:创建委托账号 步骤三:创建OBS桶 步骤四:数据回源配置 步骤五:配置生命周期规则 步骤六:绑定自定义域名 步骤七&#xff1a…

吉利科技携手企企通,打造集团化数智供应链系统

近日,吉利科技集团有限公司(以下简称“吉利科技”)联合企企通成功召开SRM采购供应链管理项目启动会。企企通与吉利科技高层、项目负责人与团队成员出席此次启动会。 双方将携手在企业供应商全生命周期管理、采购全流程、电子招投标、采购分析…

【LeetCode 75】第二十三题(2352)相等行列对

目录 题目: 示例: 分析: 代码运行结果: 题目: 示例: 分析: 题目很简洁,就是要我们寻找行与列相同的对数。相同行与列不仅是要元素相同,还需要顺序也一样&#xff08…

MySQL面试1

Mysql的面试突击1 Mysql的体系结构是什么样子的(查询语句怎么进行执行的) mysql的架构:单进程多线程的架构模式 CLient -----> Server架构 Mysql的链接方式有没有性能优化的点 2个点 查询缓存(Query Cache) MySQL 内部自带了一个缓存模…

mysql转sqlite3

在项目中需要将mysql迁移到sqlite3中,此时需要作数据转换 准备工作 下载mysql2sqlite转换工具 https://github.com/dumblob/mysql2sqlite/archive/refs/heads/master.zip 下载sqlite3 https://www.sqlite.org/download.html 转换 命令行中输入如下命令 1、cd …

计算机网络(5) --- http协议

计算机网络(4) --- 协议定制_哈里沃克的博客-CSDN博客协议定制https://blog.csdn.net/m0_63488627/article/details/132070683?spm1001.2014.3001.5501 目录 1.http协议介绍 1.协议的延申 2.http协议介绍 3.URL 4.urlencode和urldecode 2.HTTP协…