TS的联合类型和交叉类型你真的懂吗？

前言

有很多人会把TS的联合类型和交叉类型与数学中的交集和并集拿出来相提并论，其实两者有着很大的区别，

联合类型《 | 》

当声明的类型为字符串string | 数字number |布尔boolean 这些基本类型的时候：

type D = string;
type E = number;
type G = boolean;

type F = D | E | G;

const fuh: F = '12';
const fui: F = 12;
const fuj: F = false;

//不会报错
console.log(fuh, fui, fuj);

当声明的类型为复杂类型 如对象的时候:

type A = {
  name: string;
  id: number;
}
type B = {
  name: number;
  age: number;
}

注:此时A，B的类型中的name属性的类型是不相同的，前者是string,后者是number

声明一个联合类型C,并定义一个对象count,类型为C；

在使用 联合类型 的时候并且是赋值的时候，count必须要有全部的是属性也是就A，B的全部属性：如下图，缺一不可

type C = A | B ;
const count: C = {
  id: 12,
  age: 12,
  //name的类型可以为A，B任意一个的类型《string | number》
  name: 12
}

console.log(count);

否则就像现在一样： 但是在使用 联合类型 的时候并且是读取属性的时候，只能读到他们共有的部分 《name》

交叉类型《 & 》

当声明的类型为字符串string | 数字number |布尔boolean 这些基本类型的时候：

type D = string;
type E = number;
type G = boolean;

type F = D & E & G;

const fuh: F = '12';
const fui: F = 12;
const fuj: F = false;
//会报错，错误如下：
console.log(fuh, fui, fuj);

注：如果两个类型不相同的话，TS会默认把它解析成never类型

注意：一般基本数据很少使用联合类型

当声明的类型为复杂类型 如对象的时候在 《交叉类型》 的情况下并且赋值的时候，应该要包含A中的所有类型，或者包含B中所有的类型，或者AB所有类型,如下图所示：

type C = A & B ;

const count: C = {
  name: 12,
  age: 12,
  id:12
}
//或者
const count: C = {
  name: 12,
  id: 12,
}
//或者
const count: C = {
  name: 12,
  age: 12,
}
console.log(count);