TypeScript交叉类型&联合类型

2023-11-20 14:02:54 浏览数 (1)

一、交叉类型（Intersection types）

什么事交叉类型呢？简单来说就是通过&符号将多个类型进行合并成一个类型，然后用type来声明新生成的类型。这里我举个例子，具体如下：

代码语言：javascript复制
interface ClassA{
    name:string;
    age:number
}
interface ClassB{
    name:string;
    phone:number;
}

将接口ClassA和接口ClassB通过&进行合并创建一个新的接口类型Class

代码语言：javascript复制
type Class = ClassA & ClassB
let info:Class = {
    name:'zhagsan',
    age:18,
    phone:1573875555
}

1.要点

任何类型都能通过&合并成新的类型吗？

  • 这肯定是不行的，原子类型进行合并是没有任何意义，因为它们合并后的类型是never，比如string&number，这肯定是错误的，因为不可能有既满足字符串又满足数字类型。

合并的接口类型中具有同名属性，该怎么处理？

  • 这里分两种情况，如果同名属性的类型相同则合并后还是原本类型，如果类型不同，则合并后类型为never

2.基本数据类型交叉

any和number交叉结果是any类型，any和boolean交叉结果是any类型，any和never交叉结果是never类型。

注意：any 类型和除 never 类型以外的任何类型交叉时都为any，不愧是any大法

代码语言：javascript复制
type A = any & 1; //any
type B = any & boolean; //any
type C = any & never; //never

其他情况比较：

代码语言：javascript复制
type A = number & 1; //1
type B = 'maoxiansheng' & string; //'maoxiansheng'
type C = boolean & true; //true

3.对象类型交叉

3.1 键的类型是基本数据类型
代码语言：javascript复制
interface X{
	q:number,
	w:string
}
interface Y{
	q:boolean,
	r:string,
}
type XY = X&Y

编辑器中直接就给我们了提示，如下图所示：

在这里插入图片描述在这里插入图片描述
3.2 键的类型是对象类型

A、B、C三个类型都有相同的键inner，但是键的数据类型不同，分别是D、E、F，此时A&B&C会将inner键的类型进行合并，其实是D、E、F的交叉类型。

代码语言：javascript复制
interface A {
    inner: D;
}
interface B {
    inner: E;
}
interface C {
    inner: F;
}

interface D {
    d: boolean;
}
interface E {
    e: string;
}
interface F {
    f: number;
}
代码语言：javascript复制
type ABC = A & B & C;
let abc: ABC = {
    inner: {
        d: false,
        e: 'className',
        f: 5
    }
};

4.键的类型是字面量类型或字面量联合类型

字面量类型是可辨识的类型，当键的类型是不同的字面量类型，则交叉后类型为never类型。

代码语言：javascript复制
type A = {
   kind:'a',
   loyal:number
}
type B = {
   kind:'b',
   loyal:string
}

type AB = A&B;//never

5.函数类型的交叉运算

函数类型的交叉运算会使用ts中函数重载来实现。

代码语言：javascript复制
type A = (a:number,b:number) => void
type B = (a:string,b:string) => void
type AB = A&B;

let func:AB = (a:number | string ,b:number | string) => {} 
func(1,2)//正常
func('a','b')//正常
func(1,'b')//报错

当编译到func(1,'b')的时候代码报错，具体如下：

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

解决上面的问题，只需要再加一个数据类型，其中 a为number类型，b为string类型。具体如下：

代码语言：javascript复制
type A = (a:number,b:number) => void
type B = (a:string,b:string) => void
type C = (a:number,b:string) => void
type ABC = A&B&C;

let func:ABC = (a:number | string ,b:number | string) => {} 
func(1,2)//正常
func('a','b')//正常
func(1,'b')//正常

但是如果编译func('a',1)时也会报错，这时需要再加一个数据类型，其中 a为string类型，b为number类型即可。

二、联合类型（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' }
  • 多个接口类型进行联合
  • 函数接口类型进行联合
代码语言：javascript复制
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操作符来判断

代码语言：javascript复制
if('x' in testFunc) testFunc.x()
  • 扩展：boolean 类型可以看成是 true | false 的联合类型四、类型缩减
  • 当字面量类型和原始类型进行联合，那么就会造成类型缩减。
代码语言：javascript复制
type A = 'a' | string;  //string类型
type B = false | boolean; //bolean 类型
type C = 1 | number; //number类型
  • 当然枚举也会有类型缩减现象，如下：
代码语言：javascript复制
enum Class{
   A,
   B
 }
type C = Class.A | Class;//Class类型

我们发现：TS会把字面量类型和枚举成员类型给缩减掉，只剩下原始类型和枚举类型

typescript 2023腾讯·技术创作特训营第三期

0 人点赞