TS 之联合类型

Question

联合类型（Union Types）表示取值可以为多种类型中的一种。联合类型使用 | 分隔每个类型。

简单例子

// 联合类型
let myFavoriteNumber: string | number;
myFavoriteNumber = 'seven';
myFavoriteNumber = 7;

这里的 let myFavoriteNumber: string | number 的含义是，允许 myFavoriteNumber 的类型可以是 string 或者 number ，但不能是其他类型。

let myFavoriteNumber: string | number;
myFavoriteNumber = true;

// Type 'boolean' is not assignable to type 'string | number'.

访问联合类型的属性或方法

当 TypeScript 不确定一个联合类型的变量到底是哪个类型的时候，我们只能访问此联合类型的所有类型共有的属性或方法。

function getLength(something: string | number): number {
    return something.length;
}

// Property 'length' does not exist on type 'string | number'.
// Property 'length' does not exist on type 'number'.

上述例子中，length 不是 string 和 number 的共有属性，所以会报错。访问 string 和 number 的共有属性是没有问题的。

function getString(something: string | number): string {
    return something.toString();
}

联合类型的变量再被赋值的时候，会根据推论的规则推断出一个类型：

let myFavoriteNumber: string | number;
myFavoriteNumber = 'seven';             // 被推断成 string
console.log(myFavoriteNumber.length);   // 5
myFavoriteNumber = 7;                   // 被推断成 number
console.log(myFavoriteNumber.length);   // 编译时报错

// Property 'length' does not exist on type 'number'.

上述例子中，第二行的 myFavoriteNumber 被推断成了 string，访问它的 length 属性不会报错。而第四行的 myFavoriteNumber 被推断成了 number，访问它的 length 属性时自然就会报错了。