我们先来看一下二者的定义

字符串字面量

字符串字面量类型用来约束取值只能是某几个字符串中的一个。

  1. type EventNames = 'click' | 'scroll' | 'mousemove';
  3. function handleEvent(ele: Element, event: EventNames) {};
  5. handleEvent(document.getElementById('hello'), 'scroll');  // 没问题
  7. handleEvent(document.getElementById('world'), 'dbclick'); // 报错，event 不能为 'dbclick'
  9. // error TS2345: Argument of type '"dbclick"' is not assignable to parameter of type 'EventNames'.

联合类型

联合类型（Union Types）表示取值可以为多种类型中的一种。

  1. let myFavoriteNumber: string | number;
  2. myFavoriteNumber = 'seven';
  3. myFavoriteNumber = 7;
  5. myFavoriteNumber = true;
  7. // error TS2322: Type 'boolean' is not assignable to type 'string | number'.

二者的区别

理解二者的定义后，我们就能比较直观地看出二者的区别了。

  • 字符串字面量 限定了使用该字面量的地方仅接受特定的值
  • 联合类型 对于值并没有限定，仅仅限定值的类型需要保持一致