TypeScript 交叉类型与联合类型：区别与最佳实践

在使用 TypeScript 时，交叉类型（Intersection Types）和联合类型（Union Types）是两种非常强大的类型工具，但它们的使用场景和语义不同，容易混淆。以下是解决混淆问题的一些建议和最佳实践：

1. 理解交叉类型和联合类型的区别

• 交叉类型 (&)：将多个类型合并为一个类型，新类型具有所有类型的属性和方法。通常用于组合多个接口或类型。

  type A = { a: number };
  type B = { b: string };
  type C = A & B; // C 必须同时包含 a 和 b
  const obj: C = { a: 1, b: "hello" };
  

• 联合类型 (|)：表示一个值可以是多种类型中的一种。通常用于处理多种可能的输入。

  type A = { a: number };
  type B = { b: string };
  type D = A | B; // D 可以是 A 或 B
  const obj1: D = { a: 1 }; // 合法
  const obj2: D = { b: "hello" }; // 合法
  

2. 明确使用场景

• 交叉类型：适合用于组合多个类型，例如扩展对象或接口。

  type User = { name: string };
  type Admin = { role: string };
  type AdminUser = User & Admin; // 组合 User 和 Admin
  

• 联合类型：适合用于处理多种可能的输入，例如函数参数或返回值。

  function printId(id: string | number) {
    console.log(id);
  }
  

3. 类型守卫（Type Guards）

当使用联合类型时，TypeScript 无法直接推断出具体的类型，因此需要使用类型守卫来缩小类型范围。

• typeof 和 instanceof：用于基本类型和类的判断。

  function printValue(value: string | number) {
    if (typeof value === "string") {
      console.log(value.toUpperCase());
    } else {
      console.log(value.toFixed(2));
    }
  }
  

• 自定义类型守卫：通过函数判断类型。

  function isAdmin(user: User | Admin): user is Admin {
    return (user as Admin).role !== undefined;
  }
  

4. 避免过度使用交叉类型

交叉类型可能会导致类型过于复杂，尤其是在组合多个接口时。如果发现类型难以维护，可以考虑使用接口继承或类型别名。

• 接口继承：

  interface User {
    name: string;
  }
  interface Admin extends User {
    role: string;
  }
  

• 类型别名：

  type User = { name: string };
  type Admin = User & { role: string };
  

5. 工具辅助

• TypeScript Playground：在 TypeScript Playground 中测试类型，直观地查看类型推断结果。
• IDE 支持：利用 VSCode 等 IDE 的类型提示功能，实时查看类型信息。

6. 示例：解决混淆问题

假设你有一个函数，需要处理两种类型的输入：

type A = { a: number };
type B = { b: string };

function process(input: A | B) {
  if ("a" in input) {
    console.log(input.a); // 类型被推断为 A
  } else {
    console.log(input.b); // 类型被推断为 B
  }
}

如果误用交叉类型：

function process(input: A & B) {
  console.log(input.a, input.b); // 必须同时包含 a 和 b
}

通过明确使用场景和类型守卫，可以避免混淆。

总结

• 交叉类型用于组合类型，联合类型用于处理多种可能的输入。
• 使用类型守卫来缩小联合类型的范围。
• 避免过度使用交叉类型，优先选择接口继承或类型别名。
• 借助工具和 IDE 辅助理解类型。

通过以上方法，可以有效解决 TypeScript 中交叉类型和联合类型的混淆问题。