TypeScript 入门 08 - 联合类型与交叉类型

联合类型

单一、原子的类型元素：基础类型、字面量类型、函数类型、接口类型。

联合类型： “|” 操作符

• 可以使用一个更明确表示可能是 number 或 string 的联合类型来注解size参数

function format (size: number | string) {
	// ...
}

• 可以组合任意个、任意类型来构造更满足我们诉求的类型

• 可以使用类型别名抽离上边的联合类型，然后再进一步地联合

  type ModernUnit = 'vh' | 'vw'
  type Unit = 'px' | 'em'
  type MessedUp = ModernUnit | Unit
  

• 类型缩减

  • 如果将 string 原始类型和“string字面量类型”组合成一个联合类型，就会“类型缩减成 string”。

    类型缩减可以被控制，只要给父类型添加 “&{}”，所有的子类型都会被保留：

    type BorderColor = 'red' | 'green' | 'blue' | string & {}  // 字面类型都会被保留
    

  • 当联合类型的成员是接口类型，如果满足其中一个接口的属性是另外一个接口属性的子集，类型也会被缩减。

交叉类型

交叉类型： “&” 操作符来声明

type Useless = string & number 	// 类型别名Useless类型是never,没有值能既是string，又是number

• 合并接口类型 【求并集】

  将多个接口类型合并成一个类型，从而实现等同继承的效果。

  type IntersectionType = {id: number, name: string} & {age: number}
  const mixed: IntersectionType = {
  	id: 1,
  	name: 'John',
  	age: 18
  }
  

  同名类型，合并后是两个原子类型的交叉类型，如 number 与 string 的交叉类型是never。

  同名类型，如果两个类型是父类型（如 string）与 子类型（如字面量类型 'prop'），合并后是子类型。

• 合并联合类型

  需要同时满足不同的联合类型限制，也就是提取了所有联合类型的相同类型成员。【求交集】

  type UnionA = 'px' | 'em' | 'rem' | '%'
  type UnionB = 'vh' | 'em' | 'rem' | 'pt'
  type IntersectionUnion = UnionA & UnionB     // 'em' | 'rem'
  

  如果多个联合类型中没有相同的类型成员，交叉出来的类型自然就是 never 了。

联合、交叉组合

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

• 可以把分配律、交换律等基本规则引入类型组合中。