跳到主要内容

TypeScript 联合类型

在TypeScript中，联合类型（Union Types）是一种强大的工具，允许你定义一个变量、参数或返回值可以接受多种类型。通过联合类型，你可以更灵活地处理不同类型的数据，同时保持类型安全。

什么是联合类型？​

联合类型使用 | 符号将多个类型组合在一起。例如，string | number 表示一个值可以是 string 类型或 number 类型。联合类型在处理不确定类型的场景时非常有用。

基本语法​

typescript
let value: string | number;
value = "Hello"; // 合法
value = 42;      // 合法
value = true;    // 错误：布尔类型不在联合类型中

在上面的例子中，value 可以是 string 或 number 类型，但不能是其他类型。

联合类型的实际应用​

1. 函数参数​

联合类型常用于函数参数，允许函数接受多种类型的输入。

typescript
function printId(id: number | string) {
    console.log(`ID is: ${id}`);
}

printId(101);       // 输出: ID is: 101
printId("ABC123");  // 输出: ID is: ABC123

在这个例子中，printId 函数可以接受 number 或 string 类型的参数。

2. 类型守卫​

当使用联合类型时，TypeScript 需要确保你在操作变量时使用的是正确的类型。这时可以使用类型守卫（Type Guards）来缩小类型范围。

typescript
function printId(id: number | string) {
    if (typeof id === "string") {
        console.log(`ID is a string: ${id.toUpperCase()}`);
    } else {
        console.log(`ID is a number: ${id}`);
    }
}

printId("abc123");  // 输出: ID is a string: ABC123
printId(456);       // 输出: ID is a number: 456

在这个例子中，typeof 操作符用于检查 id 的类型，并根据类型执行不同的操作。

3. 联合类型与数组​

联合类型也可以用于数组，允许数组中的元素是多种类型。

typescript
let mixedArray: (string | number)[] = ["Hello", 42, "World", 100];

在这个例子中，mixedArray 数组可以包含 string 和 number 类型的元素。

实际案例：处理用户输入​

假设你正在开发一个表单，用户可以在表单中输入文本或数字。你可以使用联合类型来处理这种不确定的输入。

typescript
function processInput(input: string | number) {
    if (typeof input === "string") {
        console.log(`Input is a string: ${input.trim()}`);
    } else {
        console.log(`Input is a number: ${input.toFixed(2)}`);
    }
}

processInput("  Hello  ");  // 输出: Input is a string: Hello
processInput(3.14159);      // 输出: Input is a number: 3.14

在这个案例中，processInput 函数根据输入的类型执行不同的操作，确保处理逻辑的正确性。

总结​

联合类型是TypeScript中一个非常有用的特性，它允许你定义可以接受多种类型的变量、参数或返回值。通过联合类型，你可以编写更灵活且类型安全的代码。

附加资源​

练习​

  1. 编写一个函数 calculateArea，接受 number 或 string 类型的参数，并返回计算后的面积。如果参数是 string，则将其转换为 number 后再计算。
  2. 创建一个联合类型 Status，它可以是 "active"、"inactive" 或 number 类型，并编写一个函数来处理这些状态。

通过练习，你可以更好地理解和掌握联合类型的使用。