TypeScript如何根据枚举参数值动态推断回调函数参数类型？

你的核心问题是on方法中没有建立eventName和callback的类型关联，导致TypeScript无法确认两者的匹配关系。通过给on方法添加泛型约束就能解决这个问题，修改后的完整代码如下：

interface User {
  name: string;
}
enum EventsEnum {
  JOIN = "join",
  LEAVE = "leave",
}
export interface EventsCallback {
  [EventsEnum.JOIN]: (users: User[]) => void;
  [EventsEnum.LEAVE]: (userId: string) => void;
}
export type Listener = {
  [eventName in EventsEnum]?: { callback: EventsCallback[eventName] };
};

class EventListener {
  listeners: Listener = {};

  // 关键改动：添加泛型E绑定eventName和callback的类型关联
  on<E extends EventsEnum>(eventName: E, callback: EventsCallback[E]) {
    if (!this.listeners[eventName]) {
      // 现在编译正常，类型匹配
      this.listeners[eventName] = { callback };
    }
  }

  sampleDispatch(eventName: EventsEnum) {
    if (eventName === EventsEnum.JOIN) {
      this.listeners[eventName]?.callback([{ name: "user" }]);
    } else if (eventName === EventsEnum.LEAVE) {
      this.listeners[eventName]?.callback("user");
    }
  }
}

const event = new EventListener();
event.on(EventsEnum.JOIN, (users) => {
  // users 仍正确推断为 User[]
  console.log(users[0].name);
});

event.on(EventsEnum.LEAVE, (userId) => {
  // userId 仍正确推断为 string
  console.log(userId);
});

关键说明 #

• 泛型E extends EventsEnum限制了eventName必须是EventsEnum中的某个具体值，同时让callback的类型严格对应EventsCallback[E]，也就是和当前传入的eventName绑定。
• 这样TypeScript就能明确this.listeners[eventName]的回调类型和传入的callback完全匹配，编译错误自然消失。
• 调用on方法时的类型推断不受影响，依然能自动识别回调参数的类型。

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