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

news2024/9/25 7:22:27

🐱个人主页:不叫猫先生
🙋‍♂️作者简介:前端领域新星创作者、华为云享专家、阿里云专家博主,专注于前端各领域技术,共同学习共同进步,一起加油呀!
💫系列专栏:vue3从入门到精通、TypeScript从入门到实践
📝个人签名:不破不立
📢资料领取:前端进阶资料以及文中源码可以找我免费领取(文末有我wx)

在这里插入图片描述

目录

    • 交叉类型(Intersection types)
      • 要点
    • 联合类型(Union types)
    • 类型缩减

交叉类型(Intersection types)

什么事交叉类型呢?简单来说就是通过&符号将多个类型进行合并成一个类型,然后用type来声明新生成的类型。这里我举个例子,具体如下:

interface ClassA{
    name:string;
    age:number
}
interface ClassB{
    name:string;
    phone:number;
}

将接口ClassA和接口ClassB通过&进行合并创建一个新的接口类型Class

type Class = ClassA & ClassB
let info:Class = {
    name:'zhagsan',
    age:18,
    phone:1573875555
}

要点

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

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

合并的接口类型中具有同名属性,该怎么处理?

  • 这里分两种情况,如果同名属性的类型相同则合并后还是原本类型,如果类型不同,则合并后类型为never
interface X{
	q:number,
	w:string
}
interface Y{
	q:boolean,
	r:string,
}
type XY = X&Y

编辑器中直接就给我们了提示,如下图所示:
在这里插入图片描述

再举一个稍微复杂点的例子

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
    }
};

联合类型(Union types)

联合类型和交叉类型比较相似,联合类型通过|符号连接多个类型从而生成新的类型。它主要是取多个类型的交集,即多个类型共有的类型才是联合类型最终的类型。联合类型可以是多个类型其中一个,可做选择,比如: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:number
	r:string,
}
type XY = X | Y
let value:XY = {
    q:1,
    r:'r'
}
  • 函数接口类型进行联合
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()

类型缩减

  • 当字面量类型和原始类型进行联合,那么就会造成类型缩减。
type A = 'a' | string;  //string类型
type B = false | boolean; //bolean 类型
type C = 1 | number; //number类型
  • 当然枚举也会有类型缩减现象,如下:
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

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

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

相关文章

Mybatis_Plus_@TableName,@TableField

思考一个问题:为啥继承BaseMapper< POJO >&#xff0c;能直接找到Mysql的表 默认情况下:mp根据BaseMapper泛型POJO类取数据库底下找与POJO类型一致的表 思考一个问题:如果把表user改成tb_user那么我们需要怎么解决 使用TableName注解 TableField 思考一个问题:我们新增…

学习.NET MAUI Blazor(五)、修改窗口标题

由于Blazor属于SPA&#xff08;single-page application&#xff09;&#xff0c;所以页面标题需要使用PageTitle组件来实现。但是在MAUI Blazor中&#xff0c;Blazor所在的位置是WebView&#xff0c;而标题是属于window。所以在MAUI Blazor中&#xff0c;使用PageTitle是无效的…

vue+bpmn-js 示例/基础入门/动态创建流程节点

先附一个完整的示例&#xff0c;下面做具体介绍 <template><div classcontainers><el-button click"saveXml"></el-button><div class"canvas" ref"canvas"></div><div class"properties" id…

YOLO系列中Anchor Based和Anchor Free的相爱相杀

前言 我们都知道按照是否出现RPN可将目标检测算法分为two-stage和one-stage&#xff0c;其中one-stage的一个主要代表便是YOLO系列&#xff0c;而根据是否存在先验锚框的定义我们也可以将其分为Anchor based和Anchor free两类&#xff0c;关于这两种也是各有优劣&#xff0c;但…

物联网终端的防护体系

针对漏洞的恶意行为分析 我们共捕获到 4 种针对 UPnP 漏洞的利用行为 1&#xff0c;如表 4.7 所示。从中可以看出&#xff0c;这些漏洞均为远程 命令执行类漏洞。另外我们也发现&#xff0c;当漏洞出现在特定端口时&#xff0c;攻击者一般不会经过 UPnP 的发现阶段&#xff0c…

携手用友低代码开发,德鑫物联将RFID融入企业服务大生态

如今&#xff0c;消费者凭借一部手机就可以轻松鉴别名酒的真伪&#xff1a;一些名酒在瓶盖的封膜下已经植入了RFID芯片&#xff0c;消费者用带有NFC功能的手机并安装相应的APP&#xff0c;只需靠近RFID芯片&#xff0c;即可获取产品品名、规格、生产日期等验证信息。 不只是名…

论文阅读:人机情绪的趋同、循环与溢出——基于 Twitter 涉中议题的数据分析

论文链接&#xff1a;https://shimo.im/files/vVqRVZGEXgcZbRqy/ 《人机情绪的趋同、循环与溢出...tter涉中议题的数据分析_黄阳坤.pdf》&#xff0c;可复制链接后用石墨文档 App 打开 摘要&#xff1a; 在传播研究情感转向的背景下&#xff0c;社交媒体上人机用户间的情绪互动…

【操作系统】抖动、缺页中断率、页面置换算法

文章目录缺页中断率影响缺页中断率的因素抖动&#xff08;颠簸&#xff09;页面置换算法1、最佳页面淘汰算法&#xff08;OPT&#xff09;2、先进先出页面淘汰算法&#xff08;FIFO&#xff09;3、最近最久未使用页面淘汰算法&#xff08;LRU&#xff09;缺页中断率 对于进程P…

【Linux】pidstat命令

作用&#xff1a;Report statistics for Linux tasks. 人话&#xff1a;进程级别的统计报告&#xff0c;用于分析进程的各种维度的指标&#xff08;CPU、内存、I/O、中断、上下文切换等等&#xff09; 这是一个综合型的命令&#xff0c;非常有用。 参数总结&#xff1a; -p: …

python处理Jenkins Job配置文件config.xml

文章目录一、准备config.xml文件二、增加字符串参数代码confix.xml文件会增加如下内容&#xff1a;创建的jenkins项目test1三、增加extendedChoice复选框参数代码config.xml会增加如下内容创建的jenkins项目参考文章一、准备config.xml文件 <flow-definition plugin"w…

【标准】要点整理-软件服务商交付能力评估标准

导读&#xff1a;中 国 软 件 行 业 协 会 团 体 标 准&#xff0c;软件服务商交付能力评估标准&#xff08;Evaluation Criteria Of Delivery Capability On Software Service Provider&#xff09;通过该标准可以对标所在公司交付能力情况&#xff0c;寻找差距。其中标注红色…

钟摆小游戏的开发过程

框架 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"widthdevice-width, initi…

K8S 快速入门(五)网络通信原理:Pod网络

一、Pod网络 1. Pod结构 Pod的特点&#xff1a;容器 1、有自己的IP地址 2、有自己的hostname 3、有自己的端口 Pod实际上可以理解为就是k8s云平台中的虚拟机&#xff0c;而这个pod内部封装的是由docker引擎所创建的容器&#xff0c;也可以理解为pod就是一个虚拟化分组&#xf…

微信小程序后台交互-个人中心06

目录 1.获取用户昵称和头像 2.登录过程 3.登录-小程序 4.后台 1.获取用户昵称和头像 小程序登录https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html 登录过程&#xff1a; 说明 调用 wx.login() 获取 临时登录凭证code &#xff0c;并…

Java文件解析:Excel解析

文章目录一、前言二、POI 和 easyExcel1.1概念1.2xls和xlsx区别1.3文档1.4Excel概念二、常用场景三、内存问题四、POI的使用4.1创建一个空项目4.2引入pom依赖4.3workbook的三个实现类4.4写的实现4.4读的实现4.5POI常用的包五、EasyExcel的使用5.1创建一个空项目5.2引入pom依赖5…

智慧城市物联网介绍

智慧城市物联网介绍 智慧城市是一个有机结合的大系统&#xff0c;涵盖了更透切的感知、更全面的互连&#xff0c;更深入的智能。物联网是智慧城市中非常重要的元素&#xff0c;它侧重于底层感知信息的采集与传输&#xff0c;城市范围内泛在网方面的建设。 通过智慧城市物联网支…

探索Feign

目录 1. 简介 2. 原理 2.1. 动态代理 动态代理 动态代理 2.2. 懒加载负载均衡器的问题与解决 2.3. 主要类 3. 使用举例 4. 参数配置 1. 简介 Feign&#xff0c;一种声明式的web service client&#xff0c;可以很容易的创建http apis client。创建一个interface并添加注…

Cubase11/12 Windows 音乐创作工具

前言 Cubase是一款专业级的高级音乐创作软件&#xff0c;凭借其无与伦比的灵活工具&#xff0c;您可以快速和直观地创造任何类型的音&#xff0c;充满了各种各样的虚拟仪器、效果和数千种声音。 下载 官网:Cubase Cubase12 12详细教程 Cubase11教程 管理员身份运行 右击…

python初级教程四 发送邮件

SMTP发送邮件 SMTP&#xff08;Simple Mail Transfer Protocol&#xff09;即简单邮件传输协议,它是一组用于由源地址到目的地址传送邮件的规则&#xff0c;由它来控制信件的中转方式。 python的smtplib提供了一种很方便的途径发送电子邮件。它对smtp协议进行了简单的封装。 …

实力认证!中睿天下荣获“创客北京2022”软件与信息技术产业项目十强

近日&#xff0c;第七届“创客中国”北京市中小企业创新创业大赛暨“创客北京2022”创新创业大赛北京区域赛在决赛阶段按照八个产业对参赛项目进行评选&#xff0c;产生了各产业的十强项目&#xff0c;《中睿天下实战对抗攻击溯源项目》从数百个项目中脱颖而出&#xff0c;荣获…