【TS】交叉类型 和 联合类型

1. 交叉类型（Intersection Types）

交叉类型将多个类型合并为一个类型，这个新类型具有所有类型的特性。使用 & 符号来定义交叉类型。

两个 接口出现重名 但类型不同的情况

interface IPerson1 {
  name: string;
  age: number;
}

interface IPerson2 {
  color: string;
  age: string;
}

type IPerson3 = IPerson1 & IPerson2;

const person: IPerson3 = {
  name: "123",
  color: "red",
  // 因为 age 是 never 类型，赋值的时候有以下 两种写法
  // age: undefined as never,
  age: (function a() {
    throw Error()
  })()
};

IPerson3 的 age 属性是一个 never 类型，因为 IPerson1 和 IPerson2 都有 age ，但这俩类型又不一样，导致合并之后 age 就是 never 类型了

两个 接口出现重名 类型相同的情况

interface IPerson4 {
  name: string;
  age: number;
}

interface IPerson5 {
  color: string;
  age:number
}

type IPerson6 = IPerson4 & IPerson5;
const person2: IPerson6 = {
  ""
}

IPerson4 和 IPerson5 都有这个age ，就不显示来源于那个 接口了

2. 联合类型（Union Types）

简单的联合类型

type dirction = "left" | "right" | "top" | "bottom";
type dirction2 = "leftTop"
type dirction3 = dirction | dirction2;
const dirction4: dirction3 = ""

这个时候， dirction4 的值 可以是 bottom/left/lefttop/right/top 这些值的其中之一

使用类型别名创建接口的联合类型

interface IPerson7 {
  name: string;
  age: number;
}
interface IPerson8 {
  color: string;
  age: string;
}
type IPerson9 = IPerson7 | IPerson8;
const person3: IPerson9 = {
  name: "123",
  age: 23,
};

这个时候，需要保证 person3 的值，要么 符合 IPerson7 要么 符合 IPerson8

但是需要注意的是，访问的时候 只能访问age，

当你访问联合类型中的属性时，TypeScript 只能确保访问那些在所有联合类型中都有的属性

如若非得访问，可以这样写

const person4: IPerson9 = {
  name: "123",
  age: 23,
};

const person5: IPerson9 = {
  color: "red",
  age: "23",
};

function getPerson(person: IPerson9) {
  if ("name" in person) {
    console.log("访问到了 name", person.name);
  } else if ("color" in person) {
    console.log("访问到了 color", person.color);
  }
}

getPerson(person4); // 访问到了 name 123
getPerson(person5); // 访问到了 color red