【TS】交叉类型 和 联合类型

news2024/11/16 2:18:40

文章目录

    • 1. 交叉类型(Intersection Types)
    • 2. 联合类型(Union Types)

1. 交叉类型(Intersection Types)

交叉类型将多个类型合并为一个类型,这个新类型具有所有类型的特性。使用 & 符号来定义交叉类型。

两个 接口出现重名 但类型不同的情况

interface IPerson1 {
  name: string;
  age: number;
}

interface IPerson2 {
  color: string;
  age: string;
}

type IPerson3 = IPerson1 & IPerson2;

const person: IPerson3 = {
  name: "123",
  color: "red",
  // 因为 age 是 never 类型,赋值的时候有以下 两种写法
  // age: undefined as never,
  age: (function a() {
    throw Error()
  })()
};

在这里插入图片描述

IPerson3age 属性是一个 never 类型,因为 IPerson1 和 IPerson2 都有 age ,但这俩类型又不一样,导致合并之后 age 就是 never 类型了

在这里插入图片描述
在这里插入图片描述


两个 接口出现重名 类型相同的情况

interface IPerson4 {
  name: string;
  age: number;
}

interface IPerson5 {
  color: string;
  age:number
}

type IPerson6 = IPerson4 & IPerson5;
const person2: IPerson6 = {
  ""
}

在这里插入图片描述

IPerson4 和 IPerson5 都有这个age ,就不显示来源于那个 接口了

在这里插入图片描述
在这里插入图片描述

2. 联合类型(Union Types)

简单的联合类型

type dirction = "left" | "right" | "top" | "bottom";
type dirction2 = "leftTop"
type dirction3 = dirction | dirction2;
const dirction4: dirction3 = ""

这个时候, dirction4 的值 可以是 bottom/left/lefttop/right/top 这些值的其中之一

在这里插入图片描述


使用类型别名创建接口的联合类型

interface IPerson7 {
  name: string;
  age: number;
}
interface IPerson8 {
  color: string;
  age: string;
}
type IPerson9 = IPerson7 | IPerson8;
const person3: IPerson9 = {
  name: "123",
  age: 23,
};

这个时候,需要保证 person3 的值,要么 符合 IPerson7 要么 符合 IPerson8

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

但是需要注意的是,访问的时候 只能访问age

当你访问联合类型中的属性时,TypeScript 只能确保访问那些在所有联合类型中都有的属性

如若非得访问,可以这样写


const person4: IPerson9 = {
  name: "123",
  age: 23,
};

const person5: IPerson9 = {
  color: "red",
  age: "23",
};

function getPerson(person: IPerson9) {
  if ("name" in person) {
    console.log("访问到了 name", person.name);
  } else if ("color" in person) {
    console.log("访问到了 color", person.color);
  }
}

getPerson(person4); // 访问到了 name 123
getPerson(person5); // 访问到了 color red

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

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

相关文章

妙手ERP接入Miravia,支持高效上货、批量订单处理

欧洲电子商务市场目前已经成为了中国跨境电商出口的“新蓝海”。放眼欧洲,西班牙电商市场规模并不算大,但却是增长率最高的市场之一,并且正在追赶其他电商市场。  据Statista的调查数据显示,2024年初西班牙的电商收入将达到355亿…

python自动化办公-往ppt插入图片

目录 思路 代码 代码效果 思路 1、导包 2、打开ppt 3、新增1张幻灯片,选择自己需要的版式 4、输入标题 5、设置好图片的位置和大小,插入准备好的图片 6、保存文件 代码 from pptx import Presentation from pptx.util import Inches # 打开pp…

【C语言入门】初识C语言:掌握编程的基石

📝个人主页🌹:Eternity._ ⏩收录专栏⏪:C语言 “ 登神长阶 ” 🤡往期回顾🤡:C语言入门 🌹🌹期待您的关注 🌹🌹 ❀C语言入门 📒1. 选择…

c->c++(二):class

本文主要探讨C类的相关知识。 构造和析构函数 构造函数(可多个):对象产生时调用初始化class属性、分配class内部需要的动态内存 析构函数(一个):对对象消亡时调用回收分配动态内存 C提供默认构造和析构,…

使用pdf.js在Vue、React中预览Pdf文件,支持PC端、移动端

📝 使用背景 在前端开发中,有时候我们需要进行pdf文件的预览操作,通过在网上查询,基本都是一下几种常见的预览pdf文件的方法: 实现方案效果HTML 标签iframe 标签iOS:只能展示第一页,多页不能展…

Windows安全认证机制——Windows常见协议

一.LLMNR协议 1.LLMNR简介 链路本地多播名称解析(LLMNR)是一个基于域名系统(DNS)数据包格式的协议,使用此协议可以解析局域网中本地链路上的主机名称。它可以很好地支持IPv4和IPv6,是仅次于DNS解析的名称…

63、基于深度学习网络的数字分类(matlab)

1、基于深度学习网络的数字分类的原理及流程 基于深度学习网络的数字分类是一种常见的机器学习任务,通常使用的是卷积神经网络(CNN)来实现。下面是其原理及流程的简要说明: 数据收集:首先,需要收集包含数字…

Mybatis一级缓存

缓存 MyBatis 包含一个非常强大的查询缓存特性,它可以非常方便地配置和定制。MyBatis 3 中的缓存实现的很多改进都已经实现了,使得它更加强大而且易于配置。 Mybatis和Hibernate一样,也有一级和二级缓存,同样默认开启的只有一级缓存,二级缓…

【笔记】解决 CSS:backface-visibility:hidden; 容器翻转 引起的容器内 input不可用

起因 今天,做了一个卡片翻转的案例。原本参考的案例是一个非常简单的两个div翻面效果,使用的 backface-visibility:hidden; 实现两个容器互为背面。基础div就是纯色,什么都没有,很容易就实现了翻转。 出现问题 我要做的案例&am…

【Python机器学习】算法链与管道——在网格搜索中使用管道

在网格搜索中使用管道的工作原理与使用任何其他估计器都相同。 我们定义一个需要搜索的参数网络,并利用管道和参数网格构建一个GridSearchCV。不过在指定参数网格时存在一处细微的变化。我们需要为每个参数指定它在管道中所属的步骤。我们要调节的两个参数C和gamma…

NGINX+KEEPALIVED | 一文搞懂NG+KL负载均衡高可用架构的实操教程(详细)

文章目录 NGINXKEEPALIVED负载均衡高可用架构为什么需要多节点应用为什么需要Nginx服务为什么需要Keepalived服务NGKL简述前期准备Linux服务器公共环境配置Server1 NGKL服务器配置Server2 NGKL服务器配置Server3 HTTP服务器配置Server4 HTTP服务器配置运行测试用例 NGINXKEEPAL…

Android选择题界面的设计——线性布局实操

目录 任务目标任务分析任务实施 任务目标 使用TextView、Button、CheckBox等实现一个选择题界面,界面如图1所示。 图1 选择题界面效果图 任务分析 上述界面可以分解为上下两部分,上面部分可以使用横向的线性布局来完成,下面部分可以使用…

WPF真入门教程34--爆肝了【仓库管理系统】

1、项目介绍 本项目是一个基于C#WPF实现的仓库管理系统,系统规模较小,适合入门级的项目练练手,但项目还是具有较高的学习价值,它采用mvvmlight框架,EF框架,WPF前端等技术构成。对于学习来说,可…

2024科技文化节程序设计竞赛

补题链接 https://www.luogu.com.cn/contest/178895#problems A. 签到题 忽略掉大小为1的环&#xff0c;答案是剩下环的大小和减环的数量 #include<bits/stdc.h> #include<iostream> #include<cstdio> #include<vector> #include<map> #incl…

基于深度学习网络的USB摄像头实时视频采集与火焰检测matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 (完整程序运行后无水印) 将usb摄像头对准一个播放火焰的显示器&#xff0c;然后进行识别&#xff0c;识别结果如下&#xff1a; 本课题中&#x…

巴图自动化Profinet协议转Modbus协议网关模块连接智能仪表与PLC通讯

一、功能及优势&#xff1a;巴图自动化Profinet协议转Modbus协议网关模块&#xff08;BT-MDPN10&#xff09;的主要功能是实现Modbus协议和Profinet协议之间的转换和通信。Profinet协议转Modbus协议网关模块&#xff08;BT-MDPN10&#xff09;集成了Modbus和Profinet两种协议以…

linux——IPC 进程间通信

IPC 进程间通信 interprocess communicate IPC&#xff08;Inter-Process Communication&#xff09;&#xff0c;即进程间通信&#xff0c;其产生的原因主要可以归纳为以下几点&#xff1a; 进程空间的独立性 资源隔离&#xff1a;在现代操作系统中&#xff0c;每个进程都…

《野孩子》:撤档背后的故事与思考

《野孩子》&#xff1a;撤档背后的故事与思考 2024年7月&#xff0c;一部备受期待的电影《野孩子》原定于全国上映&#xff0c;却因后期进度原因不得不宣布撤档。这部电影由知名导演殷若昕执导&#xff0c;当红小生王俊凯领衔主演&#xff0c;讲述了两个命运相似的少年相依为命…

“proxy_pass“ directive is duplicate

后面发现是nginx.conf里面proxy pass这里有两个&#xff0c;注释其中一个并重新运行即可&#xff01;

【QT】常用控件|QLabel|QLCDNumber|QProgressbar|QCalenderWidget

目录 ​编辑 QLabel 核心属性 testFormat 自适应pixmap 文本对齐&#xff0c;换行 Buddy QLCDNumber 核心属性 倒计时 处理槽函数 QProgressbar 核心属性 QCalendarWidget 核心属性 核心信号 QLabel 用来显示文本和图片 核心属性 属性作用textFormat 文本的格…