实现通用TypeScript事件分发函数的类型兼容问题求助

问题原因 #

你遇到的错误是因为TypeScript泛型函数内部无法精确关联eventHandlersMap[type]的处理函数类型与对应的payload类型。当使用<T extends MyEvent>时，eventHandlersMap[type]会被推断为所有处理函数的联合类型（sendEventA | sendEventB），而联合类型的函数调用要求参数必须满足所有函数参数的交集——但{key: string}和{id: number}的交集是never，因此触发类型错误。

尽管外部调用时类型检查正常（因为泛型T被具体化为单个事件类型），但内部TypeScript无法跟踪这种具体关联，需要手动引导类型推断。

解决方案 #

方案1：类型断言（快速修复） #

利用外部调用已做类型校验的前提，在内部对处理函数做类型断言，明确它能接收当前payload：

type MyEvent = keyof typeof eventHandlersMap 
type HandlerPayload<T extends MyEvent> = Parameters<(typeof eventHandlersMap)[T]>[0]

const myDispatch = <T extends MyEvent>(type: T, payload: HandlerPayload<T>) => {
  // 断言handler为对应T类型的处理函数
  const handler = eventHandlersMap[type] as (payload: HandlerPayload<T>) => void;
  handler(payload);
};

方案2：显式事件映射类型（扩展性好） #

先定义事件类型与payload的映射关系，让TypeScript能更清晰地关联处理函数和参数：

// 定义全局事件- payload映射
type EventMap = {
  EventA: { key: string };
  EventB: { id: number };
};

// 基于EventMap定义处理函数
const sendEventA = (payload: EventMap['EventA']) => null;
const sendEventB = (payload: EventMap['EventB']) => null;

// 明确处理函数映射的类型
const eventHandlersMap: Record<keyof EventMap, (payload: any) => void> = {
  EventA: sendEventA,
  EventB: sendEventB,
};

// 实现分发函数，利用EventMap做精确类型关联
const myDispatch = <T extends keyof EventMap>(type: T, payload: EventMap[T]) => {
  const handler = eventHandlersMap[type] as (payload: EventMap[T]) => void;
  handler(payload);
};

这种方式新增事件时只需修改EventMap并添加对应处理函数，扩展性更强。

方案3：函数重载（类型提示直接） #

如果事件数量不多，可以用函数重载明确每个事件的参数类型，内部无需额外断言：

type MyEvent = keyof typeof eventHandlersMap 
type HandlerPayload<T extends MyEvent> = Parameters<(typeof eventHandlersMap)[T]>[0]

// 定义重载签名，明确每个事件的参数
function myDispatch(type: 'EventA', payload: { key: string }): void;
function myDispatch(type: 'EventB', payload: { id: number }): void;

// 实现通用逻辑
function myDispatch(type: MyEvent, payload: HandlerPayload<MyEvent>) {
  const handler = eventHandlersMap[type];
  handler(payload);
}

重载方案的类型提示更直接，但事件数量较多时会增加代码冗余。

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