如何在TypeScript中实现事件与对应处理器的强类型Map？

可以为Map的每个键值对建立类型关联，通过TypeScript的泛型与映射类型就能实现需求，以下是具体方案：

定义强类型Map类型 #

先声明事件类与对应处理器的类型映射，再基于此构建强类型Map：

// 定义事件到处理器的类型映射表
type EventHandlerMapping = {
  [EventA]: (event: EventA) => void;
  [EventB]: (event: EventB) => void;
};

// 构建强类型Map，重写get/set方法确保键值类型关联
type EventToHandlerMap = Map<keyof EventHandlerMapping, EventHandlerMapping[keyof EventHandlerMapping]> & {
  get<K extends keyof EventHandlerMapping>(key: K): EventHandlerMapping[K] | undefined;
  set<K extends keyof EventHandlerMapping>(key: K, value: EventHandlerMapping[K]): this;
};

验证类型检查效果 #

将上述类型加入代码后：

• 正确的事件-处理器映射可通过检查：

const map: EventToHandlerMap = new Map([
  [EventA, handleA],
  [EventB, handleB]
]); // ✅ 类型检查通过

• 错误的映射会触发类型报错：

const map: EventToHandlerMap = new Map([
  [EventA, handleB],
  [EventB, handleA]
]); // ❌ 类型检查失败，提示handleB无法匹配EventA对应的处理器类型

原理说明 #

• EventHandlerMapping 明确了每个事件类对应的处理器类型，直接建立键与值的强关联关系。
• 重写Map的get和set方法后，TypeScript会根据键的具体类型，自动校验对应值的类型是否匹配，从根源上避免错误的映射。

内容的提问来源于stack exchange，提问作者alaboudi