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

 更新时间:2022年12月31日 10:33:20   作者:不叫猫先生  
交叉类型简单来说就是通过&符号将多个类型进行合并成一个类型,然后用type来声明新生成的类型,联合类型和交叉类型比较相似,联合类型通过|符号连接多个类型从而生成新的类型,本文就这两个类型结合示例代码详细讲解,感兴趣的朋友跟随小编一起学习吧

在这里插入图片描述

交叉类型(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

到此这篇关于TypeScript交叉类型和联合类型的文章就介绍到这了,更多相关TS交叉类型与联合类型内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 自动完成的搜索框javascript实现

    自动完成的搜索框javascript实现

    这篇文章主要介绍了自动完成的搜索框javascript实现代码,感兴趣的小伙伴们可以参考一下
    2016-02-02
  • js实现一个省市区三级联动选择框代码分享

    js实现一个省市区三级联动选择框代码分享

    省市区三级联动在填写表单时有关地址这一块显得尤为重要,直接提高了用户的填写速度与准确度,接下来本文使用js代码实现一个,感兴趣的你可以参考下希望可以帮助到你
    2013-03-03
  • tab栏切换原理

    tab栏切换原理

    本文主要介绍了tab栏切换的原理以及实现方法代码。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • 使用 bootstrap modal遇到的问题小结

    使用 bootstrap modal遇到的问题小结

    bootstrap提供了一个写好的css文件和js文件然而在使用时遇到了一下并不是很好的问题,今天在使用弹出对话框时遇到了一个这样的问题,今天小编给大家分享下使用 bootstrap modal遇到的问题小结,一起看看吧
    2016-11-11
  • IE和Firefox下event事件杂谈

    IE和Firefox下event事件杂谈

    如果在使用javascript的时候涉及到event处理,就需要知道event在不同的浏览器中的差异。
    2009-12-12
  • JavaScript判断对象和数组的两种方法

    JavaScript判断对象和数组的两种方法

    这篇文章主要介绍了JavaScript判断对象和数组的两种方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-05-05
  • javascript自定义右键菜单插件

    javascript自定义右键菜单插件

    这篇文章主要为大家详细介绍了javascript自定义右键菜单插件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-12-12
  • 建立完全独立的JS对象

    建立完全独立的JS对象

    建立完全独立的JS对象...
    2006-12-12
  • JavaScript 中的引用类型Date 和RegExp的详细介绍

    JavaScript 中的引用类型Date 和RegExp的详细介绍

    这篇文章主要介绍了JavaScript中的引用类型Date和RegExp的详细介绍,引用值(或者对象)是某个特定引用类型的实例,下文相关介绍,需要的小伙伴可以参考一下
    2022-07-07
  • echarts实现词云自定义形状的示例代码

    echarts实现词云自定义形状的示例代码

    这篇文章主要介绍了echarts实现词云自定义形状的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-02-02

最新评论