TypeScript 中如何将对象类型转换为联合类型？

你可以通过TypeScript的映射类型搭配索引访问，实现从「事件名-事件数据」映射到事件联合类型的自动转换，不需要手动逐个定义事件类型。

核心转换泛型 #

// 通用转换工具类型，传入你的EventMapping即可生成对应的联合类型
type CreateEventUnion<T extends Record<string, any>> = {
  [K in keyof T]: {
    type: K
    data: T[K]
  }
}[keyof T]

使用示例 #

套入你给出的EventMapping即可直接得到目标Event类型：

// 提前定义示例中用到的Point类型
type Point = {
  x: number
  y: number
}

// 你已有的EventMapping类型
type EventMapping = {
  click: {
    position: Point;
  };
  scroll: {
    top: number;
    bottom: number;
  };
}

// 自动生成目标Event联合类型，和手动写的效果完全一致
type Event = CreateEventUnion<EventMapping>

// 测试校验效果
const events: Event[] = [];

// 类型校验通过
events.push({
  type: 'scroll',
  data: {
    top: 0,
    bottom: 0,
  }
});

// 类型校验报错：click事件的data应该包含position属性，和传入属性不匹配
events.push({
  type: 'click',
  data: {
    top: 0,
    bottom: 0,
  }
});

实现逻辑 #

1. 首先通过[K in keyof T]遍历传入的映射类型所有键（即所有事件名）
2. 对每个事件名，生成对应的{type: 事件名, data: 对应事件数据结构}的对象类型
3. 最后通过[keyof T]做索引访问，取出所有事件对象类型，自动合并为联合类型

后续如果需要新增事件，只需要在EventMapping中添加对应的键值对即可，Event类型会自动更新，不需要手动修改联合类型定义。

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