Typescript的联合类型和交叉类型

联合类型

在 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.hqwc.cn/news/512228.html

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

相关文章

【C++干货基地】面向对象核心概念 | 访问限定符 | 类域 | 实例化 | 类对象模型

🎬 鸽芷咕:个人主页 🔥 个人专栏: 《C干货基地》《粉丝福利》 ⛺️生活的理想,就是为了理想的生活! 引入 哈喽各位铁汁们好啊,我是博主鸽芷咕《C干货基地》是由我的襄阳家乡零食基地有感而发,不知道各位的…

React报错 之 Objects are not valid as a React child

原文链接: 1、React报错之Objects are not valid as a React child 2、Objects are not valid as a React child error [Solved] 作者:Borislav Hadzhiev 以下文中涉及到的链接均来自于该作者,他写了很多相关的文章,可以多看看他的…

【MySQL】事务、锁

目录 事务案例场景模拟实现转账:从张三的账户转账500元到李四的账户SQL示例异常 什么是事务事务的特性,简称ACID 属性实现原理redo logundo log MySQL 中一条 SQL 更新语句的执行过程( InnoDB 存储引擎)事务的提交流程隔离性并发事务产生的问题事务隔离级…

MySQL基础-----SQL语句之DQL数据查询语句(上篇)

目录 前言 select基本语法 一、基础查询 1.查询多个字段 2.字段设置别名 3.去除重复记录 案例 二、条件查询 1.语法 2.条件 案例 三、聚合函数 1.聚合函数 2.语法 案例 前言 前面我们学习了DML和DDL语句,那么本期我们学习数据查询的语句(DQ…

并查集(数据结构)

并查集是一种数据结构,他的作用有两个: 1,合并:将两个子集合并成一个集合 2,查找:确定某个元素处在哪个集合 fa[x]存节点x的父节点 查找: 就是为了找到某个点的根节点,如果找到了…

LZO索引文件失效说明

在hive中创建lzo文件和索引时,进行查询时会出现问题.hive的默认输入格式是开启小文件合并的,会把索引也合并进来。所以要关闭hive小文件合并功能!

每日一练 | 华为认证真题练习Day192

1、下面是路由器RTB的部分输出信息,关于输出信息描迷错误的是: A. 接口上动态加入的组播组个数是1。 B. 加入的组播组地址是225.1.1.2 C. DISPLAY IGMP GROUP命令用来查看IGMP组播组信息,包括通过成员报告动态加入的组播组和通过命令行静态加入的组播组…

Python里的全局变量、局部变量、类的self.*

问题 困惑,leetcode第538题,写成下面这种,不能得到正确的答案: class Solution_a:def traverse(self, root, cur_sum):# 思路:中序遍历可以打印出有序的数组,那么反一下,先右后中再左就可以打…

YOLOv8独家原创改进:特征融合涨点篇 | 广义高效层聚合网络(GELAN) | YOLOv9

💡💡💡本文独家改进:即结合用梯度路径规划(CSPNet)和(ELAN)设计了一种广义的高效层聚合网络(GELAN),高效结合YOLOv8,实现涨点。 将GELAN添加在backbone和head处,提供多个yaml改进方法 💡💡💡在多个私有数据集和公开数据集VisDrone2019、PASCAL VOC实现…

类变量【静态变量 static】

类变量【静态变量 static】 什么是类变量如何定义类变量如何访问类变量类变量使用注意事项和细节 什么是类变量 类变量,也叫静态属性/静态变量,是该类的所有对象共享的变量;   1)任何一个该类的对象去访问它时,取到的…

DAY 11有效括号 删除字符串中的相邻重复项 逆波兰表达式

3.有效的括号 给定一个只包括 (,),{,},[,] 的字符串 s ,判断字符串是否有效。 有效字符串需满足: 左括号必须用相同类型的右括号闭合。左括号必须以正确的顺序闭合。每个右括号都有一个对应的…

eclipse搭建java web项目

准备条件 eclipsejdk1.8 (配置jdk环境)apache-tomcat-8.5.97(记住安装位置) 一 点击完成 开始创建javaweb项目 import java.io.IOException; import java.io.PrintWriter;import javax.servlet.ServletException; import javax.s…