Typescript的联合类型和交叉类型

news2024/10/7 1:21:14

联合类型

在 TypeScript 中,可以使用联合类型来定义对象接口,从而表示一个对象可以具有多种不同结构的类型。联合类型是或的关系!!!

interface Circle {
    kind: "circle";
    radius: number;
}

interface Square {
    kind: "square";
    sideLength: number;
}

type Shape = Circle | Square;

const circle: Shape = { kind: "circle", radius: 5 };
const square: Shape = { kind: "square", sideLength: 4 };

如果如下方错误写法,为什么会报错呢?

const circle: Shape = { kind: "circle", radius: 5 , sideLength: 4};
circle.kind// 可以访问
circle.radius// 会报错
circle.sideLength // 会报错

circle.kind// 可以访问
circle.radius// 会报错
circle.sideLength // 会报错

在 TypeScript 中,当使用联合类型时,一个对象只能包含联合类型中共有的属性。在你的示例中,Circle接口有属性 kind和 radius,而 Square 接口有属性 kind和 sideLength 。

因此,当你将它们组合成联合类型 Shape时,对象只能是{
    kind: "circle";
    radius: number;
},或者{
    kind: "square";
    sideLength: number;
}。

在这种情况下,circle对象可以包含 kind 属性,但它不能同时包含 radius 和 sideLength 属性。因此,当你尝试访问 circle.radius 时会报错,因为 radius 属性并不属于 circle对象。

如果你希望创建一个对象同时包含 kind、radius 和sideLength 属性,你需要使用交叉类型(&)而不是联合类型(|)。

交叉类型

在 TypeScript 中,使用交叉类型创建新类型时,对象必须包含交叉类型中所有属性

交叉类型&是与的关系是并集!!!

interface Animal {
    name: string;
}

interface Mammal {
    hasFur: boolean;
    numberOfLegs: number;
}

// 使用交叉类型组合 Animal 和 Mammal 接口
type MammalAnimal = Animal & Mammal;

const dog: MammalAnimal = {
    name: "Dog",
    hasFur: true,
    numberOfLegs: 4
};

console.log(dog);

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

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

相关文章

Positional Encoding 位置编码

Positional Encoding 位置编码 flyfish Transformer模型没有使用循环神经网络,无法从序列中学习到位置信息,并且它是并行结构,不是按位置来处理序列的,所以为输入序列加入了位置编码,将每个词的位置加入到了词向量中…

C 嵌入式系统设计模式 20:队列模式

本书的原著为:《Design Patterns for Embedded Systems in C ——An Embedded Software Engineering Toolkit 》,讲解的是嵌入式系统设计模式,是一本不可多得的好书。 本系列描述我对书中内容的理解。本文章描述嵌入式并发和资源管理模式之六…

Docker容器化解决方案(进程管理操作)

kill 杀死一个或多个正在运行的容器 语法格式 docker kill [OPTIONS] CONTAINER [CONTAINER...] 重点: docker kill子命令可杀死一个或多个容器向容器内部的主进程发送SIGKILL 信号(默认),或使用 --signal选项指定的信号 说明 options作…

微信jsSDK前端签名错误,巨坑; 前后端分离的一大失误。

微信 JS 接口签名校验工具 1. 确保你后端生成的签名是正确,这个是第一步。否则后面都是白扯。 以用上面微信自带的验证签名工龄进行验证。 确保生成的签名和你的签名是一致的。 2. timestamp需要是字符串类型. 3. 切记,URL不要encode,如果…

Redis核心数据结构之SDS和链表(三)

SDS与C字符串的区别 二进制安全 C字符串中的字符必须符合某种编码(比如ASCII),并且除了字符串的末尾之外,字符串里面不能包含空字符,否则最先被程序读入的空字符将被误认为是字符串结尾,这些限制使得C字符串只能保存文本数据,而…

fastadmin自定义弹出框的回调问题

使用了 vue 更改了 fastadmin 项目的列表页面 但是,当点击 添加时, 弹出 fastadmin 的弹出框,添加也是fastadmin 自带的 上面的代码有点不如意的地方,就是 当我们新增完成之后, 在关闭弹出窗时,想让当前…

keycloak18.0.0==本地源码启动

github下载源码, 版本18.0.0 java和maven的版本如下 E:\keycloak-18.0.0>java -version java version "21.0.1" 2023-10-17 LTS Java(TM) SE Runtime Environment (build 21.0.112-LTS-29) Java HotSpot(TM) 64-Bit Server VM (build 21.0.112-LTS-…

Qt QPainter的使用方法

重点: 1.QPainter在QWidget窗口的paintEvent中使用。 2.QPainter通常涉及到设置画笔、设置画刷、绘图(QPen、QBrush、drawxx)三个流程。 class Widget : public QWidget {Q_OBJECTprotected:void paintEvent(QPaintEvent *event) Q_DEC…

Linux第71步_将linux中的多个文件编译成一个驱动模块

学习目的:采用旧字符设备测试linux系统点灯,进一步熟悉其设计原理。采用多文件参与编译,深度学习编写Makefile,有利于实现驱动模块化设计。 1、创建MyOldLED目录 输入“cd /home/zgq/linux/Linux_Drivers/回车” 切换到“/home…

个人健康管理系统|基于微信小程序的个人健康管理系统设计与实现(源码+数据库+文档)

个人健康管理小程序目录 目录 基于微信小程序的个人健康管理系统设计与实现 一、前言 二、系统设计 三、系统功能设计 1、用户信息管理 2 运动教程管理 3、公告信息管理 4、论坛信息管理 四、数据库设计 1、实体ER图 五、核心代码 六、论文参考 七、最新计算机毕设…

2024最新算法:斑翠鸟优化算法(Pied Kingfisher Optimizer ,PKO)求解23个基准函数

一、斑翠鸟优化算法 斑翠鸟优化算法(Pied Kingfisher Optimizer ,PKO),是由Abdelazim Hussien于2024年提出的一种基于群体的新型元启发式算法,它从自然界中观察到的斑翠鸟独特的狩猎行为和共生关系中汲取灵感。PKO 算法围绕三个不…

售前方案工程师:程序员跨界闯新天,解码售前方案的魅力与挑战

在程序员的多元职业迷宫中,除了前端花园的绚烂和后端洞穴的深邃,还存在着一条独特的赛道——售前方案工程师。 这一角色融合了技术深度与商业洞察,是技术与市场交汇的桥头堡,为那些渴望将技术实力转化为商业价值的程序员提供了一…

【推荐】JuiceSSH 一款可以在手机端免费使用的SSH客户端工具

文章目录 一,官网地址二,下载链接三,使用说明 一,官网地址 https://juicessh.com/ 二,下载链接 https://juicessh.com/changelog#v3.2.2 三,使用说明 使用相当简单,手机上点击“快速连接…

GEE 将裁剪后的Sentinel-2影像 在ArcGIS中去除空值

在ArcGIS中,可以使用栅格计算器(Raster Calculator)工具来设置NoData值为空。以下是在ArcGIS中将NoData值设置为空的步骤: 打开ArcGIS软件并加载下载的Sentinel-2影像数据。 影像Nodata空值以黑色背景呈现,影响矢量数据…

就业班 2401--3.6 Linux Day12--计划任务和邮件和ssh远程连接

一、计划任务 计划任务概念解析 在Linux操作系统中,除了用户即时执行的命令操作以外,还可以配置在指定的时间、指定的日期执行预先计划好的系统管理任务(如定期备份、定期采集监测数据)。RHEL6系统中默认已安装了at、crontab软件…

Vue源码系列讲解——过滤器篇【二】(工作原理)

目录 1. 前言 2. resolveFilter函数分析 3. 串联过滤器原理 4. 过滤器接收参数 5. 小结 1. 前言 通过上一篇用法回顾我们知道,过滤器有两种使用方式,分别是在双花括号插值中和在 v-bind 表达式中。但是无论是哪一种使用方式,过滤器都是写…

Python 系统学习总结(基础语法+函数+数据容器+文件+异常+包+面向对象)

🔥博客主页: A_SHOWY🎥系列专栏:力扣刷题总结录 数据结构 云计算 数字图像处理 力扣每日一题_ 六天时间系统学习Python基础总结,目前不包括可视化部分,其他部分基本齐全,总结记录&#xff0…

快速上手:剧本杀dm预约平台小程序的制作流程

在当今的娱乐市场中,剧本杀已经成为一种备受欢迎的娱乐方式。为了给玩家提供更好的服务和体验,开发一个剧本杀DM预约平台小程序是至关重要的。下面,我们将详细介绍如何使用乔拓云第三方平台开发这样一个预约平台。 首先,打开乔拓云…

QLC SSD:LDPC纠错算法的优化方案

随着NAND TLC和QLC出现,LDPC也在不断的优化研究,提升纠错能力。小编看到有一篇来自Microchip发布的比较详细的LDPC研究数据,根据自己的理解分析解读给大家,如有错误,请留言指正! 文档中测试LDPC(Low-Density Parity-Check)码是为了评估其在不同配置下对数据错误的有效…

基于51单片机的四位并行数据主从机传输设计

基于51单片机的四位并行数据主从机传输设计[proteus仿真] 主从机通信系统这个题目算是课程设计和毕业设计中常见的题目了,本期是一个基于51单片机的四位并行数据主从机传输设计 需要的源文件和程序的小伙伴可以关注公众号【阿目分享嵌入式】,赞赏任意文…