联合类型是 TypeScript 强大的特性之一，允许一个变量拥有多个可能的类型，提供更灵活且安全的编程方式。本文将详细介绍联合类型的定义、使用场景、类型守卫以及最佳实践，并提供相关参考资料。

目录

  1. 联合类型的基本概念
  2. 联合类型在函数中的使用
  3. 联合类型的类型缩小（Type Narrowing）
  4. 联合类型与对象类型
  5. 字面量联合类型
  6. 最佳实践与注意事项
  7. 参考资料

1. 联合类型的基本概念

联合类型（Union Type） 使用 | 竖线操作符，表示一个变量可以是多个类型中的一种。

let value: string | number;
value = "hello";  // ✅ 合法
value = 42;       // ✅ 合法
// value = true;  // ❌ 报错，`boolean` 不是 `string | number`

2. 联合类型在函数中的使用

联合类型可以用于函数参数，使函数更加通用。

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

printId(101);      // ✅ 合法
printId("2023");   // ✅ 合法
// printId(true);  // ❌ 报错，`boolean` 不是 `string | number`

3. 联合类型的类型缩小（Type Narrowing）

在使用联合类型时，我们需要确保访问的属性是类型安全的。这可以通过 类型守卫（Type Guards） 进行处理，例如使用 typeof：

function printLength(value: string | string[]) {
    if (typeof value === "string") {
        console.log(value.length); // 确保是 string
    } else {
        console.log(value.length); // 确保是 string[]
    }
}

4. 联合类型与对象类型

联合类型不仅可以用于基本类型，还可以用于对象类型：

type Dog = { bark: () => void };
type Cat = { meow: () => void };

function makeSound(animal: Dog | Cat) {
    if ("bark" in animal) {
        animal.bark(); // 处理 Dog
    } else {
        animal.meow(); // 处理 Cat
    }
}

in 操作符可以检查对象是否包含某个特定属性，从而进行类型判断。

5. 字面量联合类型

使用 字面量联合类型 可以提高代码的可读性和安全性，避免使用魔法字符串（magic strings）。

type Status = "success" | "error" | "loading";

function handleStatus(status: Status) {
    if (status === "success") {
        console.log("Operation was successful!");
    } else if (status === "error") {
        console.log("An error occurred.");
    } else {
        console.log("Loading...");
    }
}

handleStatus("success"); // ✅ 合法
// handleStatus("failure"); // ❌ 报错，不属于 `Status` 类型

6. 最佳实践与注意事项

  • 尽可能使用字面量类型：如果联合类型仅限于某些特定值，建议使用字面量联合类型。
  • 使用类型守卫：避免在未知类型上直接访问属性，使用 typeof 或 in 进行类型判断。
  • 避免过度使用联合类型：如果类型过于复杂，可能需要考虑 类型别名（Type Alias） 或 接口（Interface）。

7. 参考资料

通过联合类型，TypeScript 提供了更灵活且安全的类型支持，使代码更加健壮。在实际开发中，合理使用联合类型可以提高代码的可读性和可维护性。