您的位置：首页 > 编程技术 > js  >  TypeScript中的交叉类型和联合类型示例讲解

TypeScript中的交叉类型和联合类型示例讲解

 更新时间：2023年1月3日 12:54  点击：789 作者：不叫猫先生

在这里插入图片描述

交叉类型（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会把字面量类型和枚举成员类型给缩减掉，只剩下原始类型和枚举类型

原文出处：https://blog.csdn.net/qq_38951259/article/details/128431425

[!--infotagslink--]

相关文章

  • 浅谈TypeScript 索引签名的理解

    这篇文章主要给大家分享的是TypeScript 索引签名的理解，索引签名由方括号中的索引名称及其类型组成，后面是冒号和值类型：{ [indexName: KeyType]: ValueType }， KeyType 可以是一个 string、number 或 symbol，而ValueType 可以是任何类型，下面就俩简单了解一下吧...2021-10-15

  • vue cli4.0项目引入typescript的方法

    这篇文章主要介绍了vue cli4.0项目引入typescript的方法，本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-07-17

  • 详解Vue3.0 + TypeScript + Vite初体验

    这篇文章主要介绍了详解Vue3.0 + TypeScript + Vite初体验，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-02-22

  • 使用TS来编写express服务器的方法步骤

    这篇文章主要介绍了使用TS来编写express服务器的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-10-30

  • TypeScript魔法堂之枚举的超实用手册

    这篇文章主要介绍了TypeScript魔法堂之枚举的超实用手册，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-10-29

  • 你不知道的 TypeScript 高级类型(小结)

    这篇文章主要介绍了你不知道的 TypeScript 高级类型(小结)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-08-29

  • 如何在Vue项目中应用TypeScript类

    与如何在React项目中应用TypeScript类类似在VUE项目中应用typescript，我们需要引入一个库vue-property-decorator，需要的小伙伴可续看下文具体介绍...2021-09-15

  • TypeScript中条件类型精读与实践记录

    这篇文章主要给大家介绍了关于TypeScript中条件类型精读与实践的相关资料,，条件类型就是在初始状态并不直接确定具体类型,而是通过一定的类型运算得到最终的变量类型,需要的朋友可以参考下...2021-10-05

  • CocosCreator入门教程之用TS制作第一个游戏

    这篇文章主要介绍了CocosCreator入门教程之用TS制作第一个游戏，对TypeScript感兴趣的同学，一定要看一下...2021-04-16

  • webpack搭建脚手架打包TypeScript代码

    本文主要介绍了webpack搭建脚手架打包TypeScript代码，文中通过示例代码介绍的非常详细,具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-09-21

  • TypeScript前端上传文件到MinIO示例详解

    这篇文章主要为大家介绍了TypeScript前端上传文件到MinIO示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪...2022-10-12

  • 利用vue3+ts实现管理后台（增删改查）

    这篇文章主要介绍了利用vue3+ts实现管理后台(增删改查),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-10-30

  • TypeScript中正确使用interface和type的方法实例

    在ts中定义类型由两种方式:接口(interface)和类型别名(type alias),interface只能定义对象类型,下面这篇文章主要给大家介绍了关于TypeScript中正确使用interface和type的相关资料,需要的朋友可以参考下...2021-09-15

  • 详解Typescript里的This的使用方法

    这篇文章主要介绍了详解Typescript里的This的使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-01-08

  • TypeScript如何开启严格空值检查

    这篇文章主要介绍了TypeScript如何开启严格空值检查，文章围绕TypeScript的相关资料展开详情内容，需要的小伙伴可以参考一下...2022-03-30

  • 深入理解typescript中的infer关键字的使用

    infer 这个关键字，整理记录一下，避免后面忘记了。具有一定的参考价值，需要的朋友们下面随着小编来一起学习学习吧...2021-06-27

  • 使用TypeScript开发微信小程序的方法

    TypeScript是C#之父Anders Hejlsberg的又一力作，很多喜欢c#语法的朋友对typescript都爱不释手，今天小编给大家介绍下TypeScript开发微信小程序的方法，感兴趣的朋友一起看看吧...2020-06-25

  • TypeScript中枚举类型的理解与应用场景

    如 TypeScript 官方文档所说，枚举类型是对 JavaScript 标准数据类型集的扩充,所以下面这篇文章主要给大家介绍了关于TypeScript中枚举类型的理解与应用场景的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下...2021-09-03

  • vue3+TypeScript+vue-router的使用方法

    本文详细讲解了vue3+TypeScript+vue-router的使用方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2022-01-05

  • TypeScript接口介绍

    这篇文章主要介绍了TypeScript接口，接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。下面我们一起进入文章看看TypeScript接口得具体定义吧,需要的朋友也可以参考一下...2021-12-10