TypeScript高阶函数中如何根据事件名推断回调参数类型？

要让TypeScript根据传入的事件名自动推断回调函数的event参数类型，核心是用泛型+内置工具类型绑定事件名称与对应事件类型，具体实现如下：

完整代码示例 #

type Event = 
  | { name: "NamedEvent", data: { a: number, b: string } }
  | { name: "OtherEvent", data: { c: string, d: number } };

function subscribe<T extends Event["name"]>(
  eventName: T,
  callback: (event: Extract<Event, { name: T }>) => void
): void {
  // 这里编写实际的订阅逻辑，比如将回调存入对应事件的监听队列
}

// 使用验证
subscribe("NamedEvent", (event) => {
  // event自动推断为{ name: "NamedEvent", data: { a: number, b: string } }
  console.log(event.data.a); // 类型合法，无报错
  console.log(event.data.b);
});

subscribe("OtherEvent", (event) => {
  // event自动推断为{ name: "OtherEvent", data: { c: string, d: number } }
  console.log(event.data.c);
  console.log(event.data.d);
});

关键逻辑说明 #

• 泛型约束：T extends Event["name"]确保传入的eventName只能是Event联合类型中定义的合法事件名，避免传入无效值。
• 类型提取：Extract<Event, { name: T }>是TypeScript内置工具类型，作用是从Event联合类型中筛选出name属性等于T的具体子类型，让回调参数的类型与事件名严格对应。

可选：单独维护EventName类型 #

如果需要单独定义EventName类型，也可以调整实现，效果一致：

type EventName = "NamedEvent" | "OtherEvent";

type Event = 
  | { name: "NamedEvent", data: { a: number, b: string } }
  | { name: "OtherEvent", data: { c: string, d: number } };

function subscribe<T extends EventName>(
  eventName: T,
  callback: (event: Extract<Event, { name: T }>) => void
): void {
  // 实现逻辑
}

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