TypeScript类型化事件系统问题：handler参数类型不符合预期

问题原因 #

你定义的EventListener接口设置了默认泛型参数keyof Events，当声明UserListener时未指定具体泛型，TypeScript会将TEvent推断为所有事件类型的联合（Event.ItemCreated | Event.UserUpdated），对应的handler参数自然变成两种事件回调参数的联合类型（string | number）。

解决方案 #

1. 显式指定泛型参数 #

声明UserListener时明确指定泛型为Event.UserUpdated，让TypeScript精准推断参数类型：

const UserListener: EventListener<Event.UserUpdated> = {
  event: Event.UserUpdated,
  handler: (handlerArgs) => {
    console.log(handlerArgs); // 类型为number
  },
};

2. 移除类型注解，依赖自动推断 #

直接去掉EventListener类型注解，TypeScript会根据event的具体值自动推导handler的参数类型：

const UserListener = {
  event: Event.UserUpdated,
  handler: (handlerArgs) => {
    console.log(handlerArgs); // 类型为number
  },
};

3. 优化接口定义（可选） #

如果希望避免默认产生联合类型，可以移除EventListener的默认泛型参数，强制使用者必须指定具体事件类型：

export interface EventListener<TEvent extends keyof Events> {
  event: TEvent;
  handler: (...args: Parameters<Events[TEvent]>) => void;
}

// 此时必须指定泛型，否则会触发类型错误
const UserListener: EventListener<Event.UserUpdated> = {
  event: Event.UserUpdated,
  handler: (handlerArgs) => {
    console.log(handlerArgs);
  },
};

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