TypeScript 联合类型

摘要：在本教程中，您将学习 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');
}Code language: JavaScript (javascript)

在这个例子中，如果参数是数字，add() 函数将计算其参数的总和。

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

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

add() 函数参数的问题在于，其参数具有any 类型。这意味着您可以使用既不是数字也不是字符串的参数调用该函数，TypeScript 不会报错。

此代码将成功编译，但在运行时会导致错误

add(true, false);Code language: JavaScript (javascript)

为了解决这个问题，您可以使用 TypeScript 联合类型。联合类型允许您将多个类型组合成一个类型。

例如，以下变量的类型为 number 或 string

let result: number | string;
result = 10; // OK
result = 'Hi'; // also OK
result = false; // a boolean value, not OKCode language: JavaScript (javascript)

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

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

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');
}Code language: JavaScript (javascript)

我们可以为 add 函数指定联合类型

function add(a: number | string, b: number | string) :  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');
}Code language: JavaScript (javascript)

稍后，您将学习有关泛型类型 的知识，以便更优雅地处理此问题。

总结

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