TypeScript中处理异构事件回调数组的泛型技巧与最佳实践

本文探讨了在typescript中使用泛型回调处理包含不同事件类型的数组时遇到的类型推断问题。针对typescript默认的同构数组推断机制，文章提出了两种解决方案：一是通过将泛型参数扩展为元组类型，并结合映射元组和可变参数元组类型来精确定义异构数组；二是通过利用分布式对象类型重构事件类型本身，从而简化泛型函数签名。这些方法能有效确保在处理复杂事件系统时的类型安全性和代码健壮性。

在开发基于事件的系统时，我们经常需要创建一个通用的事件处理器，它能够根据不同的事件名称（如"pointerdown"、"pointermove")自动推断出对应的事件类型（如PointerEvent）。然而，当尝试将多个具有不同事件类型的回调函数封装到一个数组中并传递给一个泛型函数时，TypeScript可能会因为其默认的同构数组类型推断行为而报告类型错误。

遇到的问题：泛型回调与异构数组的冲突

考虑以下场景，我们定义了一个ContainedEvent类型来封装事件名称和回调函数，并希望useContainedMultiplePhaseEvent函数能够接受一个包含不同事件类型的ContainedEvent数组：

export type ContainedEvent<K extends keyof HTMLElementEventMap> = {
    eventName: K;
    callback: ContainedEventCallback<K>;
};

export type ContainedEventCallback<K extends keyof HTMLElementEventMap> = (
    event: HTMLElementEventMap[K],
) => void;

// 初始尝试的泛型事件处理器
export default function useContainedMultiplePhaseEvent<
    K extends keyof HTMLElementEventMap = keyof HTMLElementEventMap
>(
    el: HTMLElement,
    events: ContainedEvent<K>[], // 问题所在：期望 K 是单一类型
) {
    for (const e of events) {
        el.addEventListener(e.eventName, (ev) => e.callback(ev));
    }
}

const div = document.createElement("div");
const doA: ContainedEventCallback<"pointerdown"> = (e) => {
    console.log("A", e.type);
};
const doB: ContainedEventCallback<"pointermove"> = (e) => {
    console.log("B", e.type);
};

// 当传入异构事件数组时，TypeScript会报错
useContainedMultiplePhaseEvent(div,
    [
        { eventName: "pointerdown", callback: doA, },
        { eventName: "pointermove", callback: doB, }
    ]
);

上述代码中，useContainedMultiplePhaseEvent函数的events参数被定义为ContainedEvent<K>[]。这意味着TypeScript会尝试为整个数组推断出一个单一的、最窄的K类型。然而，数组中包含ContainedEvent<"pointerdown">和ContainedEvent<"pointermove">两种不同类型的元素，它们无法统一到一个单一的K中。TypeScript的默认行为是推断同构数组，因此在这里会产生类型不匹配的错误。

为了解决这个问题，我们需要引导TypeScript正确地推断出数组中每个元素的具体类型，即使它们是异构的。以下是两种有效的解决方案。

方案一：利用元组类型和映射元组实现异构数组推断

此方案的核心思想是改变泛型参数K的定义，使其不再代表单个事件类型，而是代表一个包含所有事件名称的元组。然后，通过映射元组类型，为events数组中的每个元素生成其精确的ContainedEvent类型。

// 保持 ContainedEvent 和 ContainedEventCallback 定义不变

function useContainedMultiplePhaseEvent<
    K extends readonly (keyof HTMLElementEventMap)[] // K 现在是一个事件名称的元组
>(
    el: HTMLElement,
    events: [...{ [I in keyof K]: ContainedEvent<K[I]> }], // events 是一个映射元组
) {
    for (const e of events) {
        // TypeScript 此时能够正确推断 e.eventName 和 e.callback 的类型关联
        el.addEventListener(e.eventName, (ev) => (e.callback as ContainedEventCallback<typeof e.eventName>)(ev));
    }
}

const div = document.createElement("div");
const doA: ContainedEventCallback<"pointerdown"> = (e) => {
    console.log("A", e.type);
};
const doB: ContainedEventCallback<"pointermove"> = (e) => {
    console.log("B", e.type);
};

// 示例用法：现在编译通过
useContainedMultiplePhaseEvent(div, [
    { eventName: "pointerdown", callback: doA, },
    { eventName: "pointermove", callback: doB, }
]);

代码解析：

1. K extends readonly (keyof HTMLElementEventMap)[]:

   • 这里将泛型参数K定义为一个只读的事件名称元组（或数组）。例如，当传入["pointerdown", "pointermove"]时，K的类型将被推断为["pointerdown", "pointermove"]。
   • readonly关键字有助于确保元组的长度和元素类型在创建后不可变，这对于精确的类型推断至关重要。

2. events: [...{ [I in keyof K]: ContainedEvent<K[I]> }]:

   • 这是此解决方案的关键部分，它利用了映射元组类型（Mapped Tuple Types）和可变参数元组类型（Variadic Tuple Types）。
   • { [I in keyof K]: ContainedEvent<K[I]> }: 这是一个映射元组类型。它遍历K元组的每一个索引I（例如0, 1, 2...），并为该索引处的元素K[I]生成一个对应的ContainedEvent<K[I]>类型。
     • 如果K是["pointerdown", "pointermove"]，那么这个映射将生成一个类型，其第一个元素是ContainedEvent<"pointerdown">，第二个元素是ContainedEvent<"pointermove">。
   • ...: 这是一个可变参数元组类型语法。它向TypeScript编译器提示，我们希望events参数的类型被推断为一个精确的元组类型（例如[ContainedEvent<"pointerdown">, ContainedEvent<"pointermove">]），而不是一个普通的数组类型（例如(ContainedEvent<"pointerdown"> | ContainedEvent<"pointermove">)[]）。这对于确保数组字面量中的异构元素能够被正确地按位置推断其类型至关重要。

3. e.callback as ContainedEventCallback<typeof e.eventName>: 在for循环内部，尽管e的类型是ContainedEvent<K[I]>，但addEventListener的第二个参数期望一个EventListener，其类型参数与第一个参数eventName相关联。为了在运行时保持类型安全，这里可以添加一个类型断言，明确告诉TypeScript e.callback的类型与e.eventName是匹配的。在大多数现代TypeScript版本中，控制流分析可能会自动处理这种关联，但显式断言可以提高代码的可读性和健壮性。

优点：

即构数智人

即构数智人是由即构科技推出的AI虚拟数字人视频创作平台，支持数字人形象定制、短视频创作、数字人直播等。

36

查看详情

• 提供了非常精确的类型推断，能够严格匹配传入的异构事件数组结构。
• 保持了ContainedEvent和ContainedEventCallback的原始简洁定义。

方案二：利用分布式对象类型重构 ContainedEvent

另一种方法是改变ContainedEvent本身的定义，使其成为一个联合类型，能够表示任意一种具体的事件类型及其回调。这样，useContainedMultiplePhaseEvent函数就不再需要是泛型的。

// 重新定义 ContainedEvent 类型
type ContainedEvent<K extends keyof HTMLElementEventMap = keyof HTMLElementEventMap> =
    { [P in K]: { // 映射 K 中的每个 P
        eventName: P;
        callback: ContainedEventCallback<P>;
    } }[K]; // 通过索引访问 K，生成联合类型

// ContainedEventCallback 定义不变
export type ContainedEventCallback<K extends keyof HTMLElementEventMap> = (
    event: HTMLElementEventMap[K],
) => void;

// useContainedMultiplePhaseEvent 函数不再需要泛型参数
function useContainedMultiplePhaseEvent(el: HTMLElement, events: ContainedEvent[]) {
    events.forEach(<K extends keyof HTMLElementEventMap>(e: ContainedEvent<K>) =>
        el.addEventListener(e.eventName, (ev) => e.callback(ev)));
}

const div = document.createElement("div");
const doA: ContainedEventCallback<"pointerdown"> = (e) => {
    console.log("A", e.type);
};
const doB: ContainedEventCallback<"pointermove"> = (e) => {
    console.log("B", e.type);
};

// 示例用法：现在编译通过
useContainedMultiplePhaseEvent(div, [
    { eventName: "pointerdown", callback: doA, },
    { eventName: "pointermove", callback: doB, }
]);

代码解析：

1. type ContainedEvent<K extends keyof HTMLElementEventMap = keyof HTMLElementEventMap> = { [P in K]: { eventName: P; callback: ContainedEventCallback<P>; } }[K];:

   • 这是一种分布式对象类型（Distributive Object Type）的用法。
   • 当K是一个联合类型（例如"pointerdown" | "pointermove"）时，TypeScript会将其分解，分别对联合类型中的每个成员P进行处理。
   • { [P in K]: ... }: 为K中的每个类型P创建一个对象类型，其中eventName是P，callback是ContainedEventCallback<P>。
   • [K]: 这是一个索引访问类型。当K是联合类型时，它会从前面生成的对象中提取所有对应的属性，并将它们合并成一个联合类型。
   • 例如，如果K是"pointerdown" | "pointermove"，那么ContainedEvent最终会解析为：

     { eventName: "pointerdown"; callback: ContainedEventCallback<"pointerdown">; } |
     { eventName: "pointermove"; callback: ContainedEventCallback<"pointermove">; }

     登录后复制

     这是一个联合类型，表示它可以是pointerdown事件的容器，也可以是pointermove事件的容器。

2. function useContainedMultiplePhaseEvent(el: HTMLElement, events: ContainedEvent[]):

   • 由于ContainedEvent现在本身就是一个联合类型，可以容纳所有可能的事件类型，events参数可以直接声明为ContainedEvent[]，而无需额外的泛型参数。这使得函数签名更加简洁。

3. events.forEach(<K extends keyof HTMLElementEventMap>(e: ContainedEvent<K>) => ...):

   • 在forEach回调内部，为了确保addEventListener的类型安全，我们可以使用一个局部泛型K来捕获每个e的实际事件类型。TypeScript的控制流分析通常可以正确推断出e.eventName和e.callback之间的关联。

优点：

• useContainedMultiplePhaseEvent函数的签名变得更简洁，不含泛型参数。
• events数组的类型声明更直观，直接表示“包含任意事件类型的事件容器数组”。

缺点：

• ContainedEvent的类型定义相对复杂，理解起来需要对分布式对象类型有一定了解。

总结与选择

两种方案都有效地解决了TypeScript在处理异构事件回调数组时的类型推断问题。

• 方案一（利用元组类型和映射元组）：更侧重于通过精确的元组类型推断来解决问题，适用于需要严格控制数组元素顺序和类型匹配的场景。

以上就是TypeScript中处理异构事件回调数组的泛型技巧与最佳实践的详细内容，更多请关注php中文网其它相关文章！