面试题：TypeScript条件类型与分布式条件类型的深度剖析及应用

Question

实现一个类型 `Diff<T, U>`，它使用分布式条件类型来计算两个联合类型 `T` 和 `U` 的差集。例如，`Diff<'a' | 'b' | 'c', 'a' | 'c' | 'd'>` 应返回 `'b'`。在实现过程中，请详细解释分布式条件类型是如何工作的，以及为什么你的实现能够正确计算差集。并且，说明在实际项目中，这种类型工具可能在哪些场景下会被用到。

Answer 1

type Diff<T, U> = T extends U? never : T;

分布式条件类型的工作原理

在 TypeScript 中，当条件类型作用于联合类型时，它会自动地对联合类型中的每个成员进行分发处理。例如，对于 T extends U? X : Y，如果 T 是联合类型 A | B | C，那么它会被处理为 (A extends U? X : Y) | (B extends U? X : Y) | (C extends U? X : Y)。这意味着条件类型会针对联合类型的每个成员独立进行判断。

为什么此实现能正确计算差集

在 Diff<T, U> = T extends U? never : T 这个类型定义中，对于 T 联合类型中的每一个成员，都会检查它是否可以赋值给 U。如果 T 的某个成员可以赋值给 U，那么这个成员就会被映射为 never，表示要从结果中排除。如果 T 的某个成员不能赋值给 U，那么这个成员就会保留在结果中。这样，通过分布式条件类型对 T 联合类型中每个成员的独立判断，最终得到的就是 T 相对于 U 的差集。

实际项目中的应用场景

1. 类型过滤和筛选：在处理复杂的类型系统时，可能需要从一组可能的类型中排除某些已经处理过或不相关的类型。例如，在一个状态管理库中，可能有一组所有可能的状态类型，但是在某个特定的 reducer 中，需要排除已经处理过的状态类型，只处理剩余的状态。
2. 组件属性类型控制：在 React 组件开发中，可能有一个基础的组件属性类型集合，而某个特定的子组件只接受其中一部分属性。通过 Diff 类型工具，可以从基础属性类型集合中排除子组件不接受的属性，确保子组件的属性类型正确。
3. 事件处理：在处理 DOM 事件时，可能有一个通用的事件类型联合，但是某个特定的事件处理函数只关心其中一部分事件类型。使用 Diff 类型工具可以从通用事件类型中过滤出特定处理函数关心的事件类型。