如何用TypeScript自动从ActionDefinition生成AllActions联合类型？

你可以通过TypeScript的映射类型和索引访问类型实现GenerateActions，自动从ActionDefinition生成对应的联合类型，无需手动枚举每个Action：

核心实现 #

type GenerateActions<Def extends Record<string, any>> = {
  [K in keyof Def]: {
    action: K;
    payload: Def[K];
  };
}[keyof Def];

使用示例 #

结合你的ActionDefinition，直接调用即可生成目标联合类型：

// Action Definition
type ActionDefinition = {
  addItem: { value: string }
  updateItem: { key: string, value: string }
  removeItem: { key: string }
}

// 自动生成所有Action的联合类型
type AllActions = GenerateActions<ActionDefinition>;

原理拆解 #

1. 映射类型遍历：[K in keyof Def]会遍历ActionDefinition的所有键名（比如addItem、updateItem），为每个键生成对应的Action结构（包含action和payload字段）。
2. 联合类型提取：通过[keyof Def]索引访问映射后的类型，TypeScript会自动将所有生成的Action类型合并为一个联合类型——这是因为用键名的联合类型去索引对象类型时，会返回对应值类型的联合。

验证效果 #

生成的AllActions和你手动编写的完全一致，编辑器会正确提示类型：

// 合法的Action示例
const addAction: AllActions = {
  action: 'addItem',
  payload: { value: 'new item' }
};

const updateAction: AllActions = {
  action: 'updateItem',
  payload: { key: 'item1', value: 'updated value' }
};

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