TypeScript union 类型

摘要：在本教程中，你将了解 TypeScript 联合类型，它允许在变量中存储一种或多种类型的值。

TypeScript 联合类型简介

有时，你会遇到需要参数为数字或字符串的函数。 例如：

function add(a: any, b: any) {
    if (typeof a === 'number' && typeof b === 'number') {
        return a + b;
    }
    if (typeof a === 'string' && typeof b === 'string') {
        return a.concat(b);
    }
    throw new Error('Parameters must be numbers or strings');
}

在此示例中，如果参数是数字，则 add() 函数将计算其参数的总和。

如果参数是字符串，add() 函数会将它们连接成一个字符串。

如果参数既不是数字也不是字符串，则 add() 函数会抛出错误。

add() 函数参数的问题在于它的参数是 any 类型。 这意味着可以使用既不是数字也不是字符串的参数来调用函数，TypeScript 可以处理它。

此代码将成功编译，但在运行时会出现错误：

add(true, false);

要解决此问题，可以使用 TypeScript 联合类型。 联合类型允许将多种类型组合为一种类型。

例如，以下变量的类型为数字或字符串：

let result: number | string;
result = 10; // OK
result = 'Hi'; // also OK
result = false; // a boolean value, not OK

联合类型描述的值可以是多种类型之一，而不仅仅是两种。 例如 number | string | boolean，可以是数字、字符串或布尔值。

回到 add() 函数示例，可以将参数类型从 any 更改为联合类型，如下所示：

function add(a: number | string, b: number | string) {
    if (typeof a === 'number' && typeof b === 'number') {
        return a + b;
    }
    if (typeof a === 'string' && typeof b === 'string') {
        return a.concat(b);
    }
    throw new Error('Parameters must be numbers or strings');
}

概括

• TypeScript 联合类型允许在变量中存储一种或多种类型的值。