本文深入探讨了在 typescript 中使用泛型回调函数处理不同事件类型的集合时遇到的类型推断挑战。针对 typescript 默认的同构数组推断行为，文章提供了两种主要解决方案：一是通过调整泛型参数，利用映射元组类型和可变参数元组类型强制编译器进行异构元组推断；二是通过定义分布式对象类型，将泛型事件类型转换为联合类型，从而简化泛型函数的实现。
在构建灵活的事件处理系统时，我们经常需要创建一个能够处理多种不同事件类型的通用函数。例如，一个 useContainedMultiplePhaseEvent 函数可能需要接收一个事件配置数组，其中每个配置包含事件名称（如 “pointerdown”、”pointermove”）及其对应的回调函数。理想情况下，TypeScript 应该能够根据事件名称自动推断出回调函数的事件参数类型（如 PointerEvent）。然而，当我们将不同事件类型的配置放入同一个数组时，TypeScript 的默认类型推断行为可能会导致类型错误。
理解类型推断挑战
问题的核心在于 TypeScript 对数组字面量的泛型推断倾向于同构（homogeneous）数组。这意味着，当一个泛型函数接收一个 T[] 类型的参数时，如果传入一个数组字面量，TypeScript 会尝试为 T 推断出一个单一类型，使得数组中的所有元素都符合这个类型。
考虑以下初始的类型定义和函数实现：
export type ContainedEvent = { eventName: K; callback: ContainedEventCallback;};export type ContainedEventCallback = ( event: HTMLElementEventMap[K],) => void;export default function useContainedMultiplePhaseEvent( el: HTMLElement, events: ContainedEvent[],) { for (const e of events) { el.addEventListener(e.eventName, (ev) => e.callback(ev)); }}const div = document.createElement("div");const doA: ContainedEventCallback = (e) => { console.log("A", e.type);};const doB: ContainedEventCallback = (e) => { console.log("B", e.type);};// 尝试使用时会遇到类型错误// useContainedMultiplePhaseEvent(div, [// { eventName: "pointerdown", callback: doA, },// { eventName: "pointermove", callback: doB, }// ]);
在这个例子中，useContainedMultiplePhaseEvent 函数的泛型参数 K 试图从 events 数组中推断出来。当数组中包含 ContainedEvent 和 ContainedEvent 两种不同类型的元素时，TypeScript 无法推断出一个单一的 K 类型来同时满足两者，因此会报告类型不匹配错误。它会尝试找到一个兼容所有元素的最小公共类型，但在这里，”pointerdown” 和 “pointermove” 并没有一个共同的、更具体的 K 类型（除了 keyof HTMLElementEventMap 这个宽泛的联合类型，但这会导致回调函数参数 event 类型变得不精确）。
解决方案一：利用元组类型实现异构推断
要解决这个问题，我们需要改变 TypeScript 推断 events 数组类型的方式，使其能够识别出一个异构的元组类型，而不是一个同构数组。这可以通过调整 useContainedMultiplePhaseEvent 的泛型参数和 events 参数的类型定义来实现。
我们将泛型参数 K 从单个事件键的类型，改为一个包含所有事件键的元组类型。然后，利用映射元组类型和可变参数元组类型，确保 events 参数的类型被精确地推断为一个异构元组。
// 类型定义保持不变export type ContainedEvent = { eventName: K; callback: ContainedEventCallback;};export type ContainedEventCallback = ( event: HTMLElementEventMap[K],) => void;// 调整 useContainedMultiplePhaseEvent 函数的泛型和参数类型function useContainedMultiplePhaseEvent( el: HTMLElement, // events 现在被推断为 ContainedEvent 实例的元组 events: [...{ [I in keyof K]: ContainedEvent }],) { for (const e of events) { // TypeScript 现在能够正确推断 e.eventName 和 e.callback 的类型 el.addEventListener(e.eventName, (ev) => e.callback(ev as HTMLElementEventMap[typeof e.eventName])); }}const div = document.createElement("div");const doA: ContainedEventCallback = (e) => { console.log("A", e.type); // e 是 PointerEvent};const doB: ContainedEventCallback = (e) => { console.log("B", e.type); // e 是 PointerEvent};useContainedMultiplePhaseEvent(div, [ { eventName: "pointerdown", callback: doA, }, { eventName: "pointermove", callback: doB, }]); // 类型检查通过！
解析：
K extends readonly (keyof HTMLElementEventMap)[]: 这里 K 不再是单个事件名称的类型，而是一个由 keyof HTMLElementEventMap 组成的只读元组类型。例如，当传入 [“pointerdown”, “pointermove”] 时，K 将被推断为 [“pointerdown”, “pointermove”]。[…{ [I in keyof K]: ContainedEvent }]: 这是实现异构元组推断的关键。{ [I in keyof K]: … }: 这是一个映射类型，它遍历元组 K 的所有属性（索引）。对于 K 中的每个索引 I，它会生成一个 ContainedEvent 类型。例如，如果 K 是 [“pointerdown”, “pointermove”]：当 I 为 0 时，K[I] 是 “pointerdown”，生成 ContainedEvent。当 I 为 1 时，K[I] 是 “pointermove”，生成 ContainedEvent。[… ] (可变参数元组类型): 这个语法提示 TypeScript 编译器，我们希望将 events 参数推断为一个元组类型，而不是一个普通数组。这在 TypeScript 4.0 引入，能够更好地处理函数参数中的元组类型推断。它确保了 events 的类型是一个精确的元组，例如 [ContainedEvent, ContainedEvent]。ev as HTMLElementEventMap[typeof e.eventName]: 在 addEventListener 的回调中，ev 的类型默认是 Event。为了确保 e.callback 能够接收到正确且类型安全的事件对象，我们进行了一个类型断言。typeof e.eventName 确保了 eventName 的字面量类型被用于查找 HTMLElementEventMap 中的对应事件类型。
通过这种方式，TypeScript 能够精确地推断出 events 数组中的每个元素的具体类型，从而解决了类型错误。
解决方案二：使用分布式对象类型
另一种方法是重新定义 ContainedEvent 类型，使其本身就是一个联合类型（union type），从而让 useContainedMultiplePhaseEvent 函数不再需要泛型参数来处理 events 数组。这可以通过使用分布式对象类型（Distributive Object Type）来实现。
分布式对象类型允许我们将一个泛型类型参数 K 映射到一个对象类型，然后通过索引 [K] 来“分发”这个对象类型，使其成为一个联合类型。
// 重新定义 ContainedEvent 为一个分布式对象类型type ContainedEvent = { [P in K]: { // 遍历 K 中的每个类型 P eventName: P; callback: ContainedEventCallback; } }[K]; // 通过索引 [K] 来分发，生成一个联合类型// ContainedEventCallback 保持不变export type ContainedEventCallback = ( event: HTMLElementEventMap[K],) => void;// useContainedMultiplePhaseEvent 函数不再需要泛型function useContainedMultiplePhaseEvent(el: HTMLElement, events: ContainedEvent[]) { events.forEach((e: ContainedEvent) => el.addEventListener(e.eventName, (ev) => e.callback(ev as HTMLElementEventMap[K])));}const div = document.createElement("div");const doA: ContainedEventCallback = (e) => { console.log("A", e.type);};const doB: ContainedEventCallback = (e) => { console.log("B", e.type);};useContainedMultiplePhaseEvent(div, [ { eventName: "pointerdown", callback: doA, }, { eventName: "pointermove", callback: doB, }]); // 类型检查通过！
解析：
type ContainedEvent = { [P in K]: { … } }[K];:当 K 是一个联合类型（例如 “pointerdown” | “pointermove”）时，这个分布式对象类型会将其“分发”开来。它首先创建一个映射类型 { [P in K]: { eventName: P; callback: ContainedEventCallback
; } }。
然后通过 [K] 索引访问这个映射类型。当 K 是一个联合类型时，这种索引访问会产生一个联合类型。例如，如果 K 是 “pointerdown” | “pointermove”，那么 ContainedEvent 最终会变成：{ eventName: “pointerdown”, callback: ContainedEventCallback } | { eventName: “pointermove”, callback: ContainedEventCallback }这是一个联合类型，表示 ContainedEvent 可以是其中任何一种具体的事件配置。function useContainedMultiplePhaseEvent(el: HTMLElement, events: ContainedEvent[]):由于 ContainedEvent 本身就是一个联合类型，events 数组的类型 ContainedEvent[] 已经足够表达其异构性。函数不再需要额外的泛型参数。events.forEach((e: ContainedEvent) => …):在 forEach 循环内部，我们仍然需要一个类型断言 e: ContainedEvent 来帮助 TypeScript 在循环体内精确地识别 e 的具体事件类型，从而确保 e.callback 的类型安全。这里的 K 是一个局部泛型，仅用于 forEach 的回调函数内部。
这种方法的好处是 useContainedMultiplePhaseEvent 函数的签名更简洁，因为它不需要处理复杂的元组泛型。它的缺点是，在 events 数组外部，我们可能失去了关于整个事件集合的具体元组结构信息。
总结与注意事项
这两种解决方案都有效地解决了 TypeScript 在处理泛型回调和异构数组时的类型推断问题。
解决方案一（元组类型推断） 提供了更严格和精确的类型推断，它能够保留 events 数组的元组结构信息。如果你需要函数内部或外部对事件列表的顺序或具体类型有强依赖，或者希望在编译时捕获到数组结构不匹配的错误，这种方法更为合适。解决方案二（分布式对象类型） 简化了 useContainedMultiplePhaseEvent 函数的签名，使其不再需要泛型。它更侧重于确保 events 数组中的每个元素都是类型安全的 ContainedEvent 实例，而不过多关注整个数组的精确元组结构。如果你的事件处理函数只需要遍历并处理每个事件，而不需要知道整个事件列表的精确元组结构，这种方法可能更简洁。
在实际开发中，选择哪种方案取决于你的具体需求和对类型推断严格程度的偏好。无论选择哪种，理解 TypeScript 的泛型推断机制和高级类型工具（如映射类型、元组类型、分布式对象类型）都是编写健壮、可维护代码的关键。
以上就是TypeScript 泛型回调处理多事件类型时的类型推断与解决方案的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1531576.html
微信扫一扫 
支付宝扫一扫 
