TypeScript中如何定义事件名与关联数据类型绑定的事件载荷类型

解决方案 #

你需要的是自动遍历EventMap的键生成对应联合类型，无需手动枚举每个事件名，可以用以下两种业内常用的规范写法，都能保证event和data的类型严格绑定，不会出现不匹配的问题：

写法1：映射类型索引访问（最常用） #

type EventMap = {
  created: { created: string },
  updated: { updated: string }
}

type Payload<T extends keyof EventMap> = {
  event_id: string;
  event: T;
  data: EventMap[T];
};

// 自动生成所有事件的联合类型
type Payloads = {
  [K in keyof EventMap]: Payload<K>
}[keyof EventMap]

原理是先构造一个「键为事件名、值为对应Payload类型」的映射类型，再通过索引访问取出所有值的联合，后续新增事件只需要修改EventMap即可，Payloads会自动同步更新。

写法2：分发条件类型 #

type Payloads = keyof EventMap extends infer T 
  ? T extends keyof EventMap 
    ? Payload<T> 
    : never 
  : never

利用TS条件类型的分发特性，遍历EventMap的所有键生成对应的Payload类型，再组合为联合，效果和写法1完全一致。

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