高级类型：联合类型和交叉类型

联合类型

多种不同的类型的组合。

{
  interface Bird {
    fly(): void;
    layEggs(): void;
  }
  interface Fish {
    swim(): void;
    layEggs(): void;
  }
  const getPet: () => Bird | Fish = () => {
    return {
     // ...
    } as Bird | Fish;
  };
  const Pet = getPet();
  Pet.layEggs(); // ok
  // 类型“Bird | Fish”上不存在属性“fly”。
  // 类型“Fish”上不存在属性“fly”。ts(2339)
  // Pet.fly();
}

交叉类型

将多个类型合并成一个类型。合并后类型将拥有所有成员类型。交叉类型的真正用武之地是将多个接口类型合并成一个类型。

如果合并的多个接口类型存在同名属性会是什么效果呢？

type IntersectionTypeConfict = { id: number; name: string; } 
    & { age: number; name: number; };
  const mixedConflict: IntersectionTypeConfict = {
    id: 1,
    name: 2, // ts(2322) 错误，'number' 类型不能赋给 'never' 类型
    age: 2
  };

• 如果同名类型不兼容，合并后，将会出现两个类型的交叉类型，如同名属性 name: string 和 name: number。合并后 name: string & number，即 never。
• 如果同名类型兼容，比如一个是 number，另一个是 number 的子类型、数字字面量类型，合并后 name 属性的类型就是两者中的子类型。

合并联合类型

合并联合类型为一个交叉类型，这个交叉类型需要同时满足不同的联合类型限制，也就是提取了所有联合类型的相同类型成员。这里，我们也可以将合并联合类型理解为求交集。

type UnionA = 'px' | 'em' | 'rem' | '%';
  type UnionB = 'vh' | 'em' | 'rem' | 'pt';
  type IntersectionUnion = UnionA & UnionB;
  const intersectionA: IntersectionUnion = 'em'; // ok
  const intersectionB: IntersectionUnion = 'rem'; // ok
  const intersectionC: IntersectionUnion = 'px'; // ts(2322)
  const intersectionD: IntersectionUnion = 'pt'; // ts(2322)

联合、交叉组合

联合操作符 | 的优先级低于交叉操作符 &，同样，我们可以通过使用小括弧 () 来调整操作符的优先级。