TypeScript联合类型的用法（附带实例）

TypeScript 中的联合类型（Union Types）表示变量的取值可以为多种类型中的任意一种，在类型定义时使用“|”分隔。

例如，在将 myName 变量声明为 string 类型或 number 类型中的任意一种类型时，就可以书写为：

let myName:string|number

那么，myName 变量的类型就是 string 或 number 两者之一，但不能是其他类型，代码如下：

let myName: string | number;
myName = 'zhangsan';
myName = 2015;

myName = true; // error, 不能将 true 赋值给类型为 string 与 number 联合类型的变量

联合类型涉及多种类型，而不同类型的变量是有其不同属性的。例如，string 类型的变量有 length 属性，而 number 类型的变量没有 length 属性。如果将 myName 变量声明为 string 或 number 类型的联合类型，那么其是否会有 length 属性呢？

尝试定义一个函数 getLength，设置形参为 myName，将其类型限定为“string|number”，那么是否可以直接使用 return 返回 myName.length 属性呢？答案是：不可以。虽然 string 类型的变量有 length 属性，但 number 类型的变量是没有 length 属性的，因此会报错，代码如下：

function getLength(myName: string | number): number {
    return myName.length; // error, number 类型的变量没有 length 属性
}

不过 string 和 number 类型的变量拥有一个共同的方法 toString，调用共同方法不会有任何问题，代码如下：

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

联合类型也可以结合 TypeScript 的类型推断实现相应功能，比如声明：

let myName:string|number;

没有为变量赋予初始值，会将其推断为 any 类型，但联合类型的声明并不会直接将其推断为 any 类型，而是会在赋值后根据联合类型中声明的类型进行推断。

比如将 myName 变量赋值为“zhangsan” string 类型时，myName 变量的类型就会被推断为联合类型中的 string 类型；如果将 myName 变量的类型赋值为“2015” number 类型时，myName 变量的类型又会被推断为联合类型中的 number 类型，因此 VSCode 编辑器将产生类型“number”的变量不存在属性“length”的错误提示，代码如下：

let myName: string | number;
myName = 'zhangsan';
console.log(myName.length); // 8
myName = 2015;
console.log(myName.length); // error