TypeScript联合类型

在 TypeScript 中，联合类型（Union Types）允许你将多个类型组合成一个类型。联合类型通过竖线 (|) 符号来表示。这种类型在函数参数、返回值以及变量声明中都非常有用。

下面是一个关于如何定义和使用联合类型的详细示例：

示例：处理不同类型的用户输入

假设我们有一个函数，该函数可以接受一个字符串或数字作为输入，并输出一个对应的消息。

1、定义联合类型：

首先，我们定义一个联合类型 InputType，它可以是一个字符串或一个数字。

type InputType = string | number;

2、创建函数：

然后，我们创建一个函数 processInput，该函数接受 InputType 类型的参数，并返回一个字符串。

function processInput(input: InputType): string {
    if (typeof input === 'string') {
        return `Received a string: ${input}`;
    } else if (typeof input === 'number') {
        return `Received a number: ${input}`;
    }

    // 这里 TypeScript 的类型检查机制已经确保了只会进入上述两个分支之一，
    // 所以这里实际上不会执行到，但为了严谨性，我们仍然保留一个默认分支。
    return 'Unknown input type';
}

3、使用函数：

最后，我们调用 processInput 函数，并传入不同类型的参数。

const stringInput: InputType = 'Hello, World!';
const numberInput: InputType = 42;

console.log(processInput(stringInput)); // 输出: Received a string: Hello, World!
console.log(processInput(numberInput)); // 输出: Received a number: 42

示例：更复杂的联合类型

假设我们有一个函数，该函数可以接受一个字符串、数字或布尔值，并根据输入类型返回不同的结果。

1、定义联合类型：

type ComplexInputType = string | number | boolean;

2、创建函数：

function handleComplexInput(input: ComplexInputType): string {
    if (typeof input === 'string') {
        return `You provided a string: "${input}"`;
    } else if (typeof input === 'number') {
        return `You provided a number: ${input}`;
    } else if (typeof input === 'boolean') {
        return `You provided a boolean: ${input}`;
    }

    // 同样，TypeScript 的类型检查机制已经确保了只会进入上述三个分支之一。
    return 'Unknown input type';
}

3、使用函数：

const stringInput: ComplexInputType = 'TypeScript';
const numberInput: ComplexInputType = 100;
const booleanInput: ComplexInputType = true;

console.log(handleComplexInput(stringInput)); // 输出: You provided a string: "TypeScript"
console.log(handleComplexInput(numberInput)); // 输出: You provided a number: 100
console.log(handleComplexInput(booleanInput)); // 输出: You provided a boolean: true

总结

通过联合类型，你可以让你的 typescript 代码更加灵活和强大。在处理不同类型的输入时，联合类型能够帮助你避免很多类型相关的错误，从而提高代码的健壮性和可维护性。希望这个示例对你有所帮助！

本文地址：https://www.tides.cn/p_typescript-union