如何为指定类型的事件实现Payload类型推断？

要让TypeScript自动识别监听器中事件的具体类型，关键是给on函数定义泛型约束，让它根据传入的事件类型字面量，精准匹配对应的Event子类型。

1. 定义类型安全的on函数 #

type EventType = 'foo' | 'bar'

type Event = 
  | { type: 'foo', timestamp: number, payload: { a: number } }
  | { type: 'bar', timestamp: number, payload: { b: string } }

// 泛型T约束为EventType，通过Extract工具类型筛选对应事件子类型
function on<T extends EventType>(type: T, handler: (event: Extract<Event, { type: T }>) => void) {
  // 这里编写监听器的核心逻辑（比如事件绑定、触发处理等）
}

2. 使用验证 #

调用on时，TypeScript会自动根据传入的type参数推断出event的具体结构：

on('foo', event => {
  // event类型自动识别为{ type: 'foo', timestamp: number, payload: { a: number } }
  console.log(event.payload.a); // 类型合法，无编译错误
  console.log(event.payload.b); // TypeScript直接报错，提示foo类型的payload不存在b属性
})

on('bar', event => {
  console.log(event.payload.b); // 类型合法
})

原理说明 #

• Extract<Event, { type: T }> 是TypeScript内置工具类型，作用是从联合类型Event中提取出所有匹配{ type: T }的子类型。
• 通过泛型T约束为EventType，既保证了type参数的合法性，又让TypeScript能建立事件类型与对应结构的关联，无需改用枚举。

这是处理TypeScript辨别联合类型的标准方案，完全适配字面量联合类型的场景。

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