如何重构React组件中依赖枚举的冗长TypeScript联合类型？

当然可以通过TypeScript的映射类型简化这个联合类型的定义，核心是建立枚举键与对应组件类型的映射关系，再自动遍历枚举生成目标类型，不用手动写冗长的联合成员。

步骤1：修正枚举语法（你的示例里枚举值用了:，TypeScript枚举需用=） #

enum ComponentName {
  ComponentA = "component.a",
  ComponentB = "component.b",
  ComponentC = "component.c",
  // 后续新增枚举项直接追加在这里
}

步骤2：创建枚举键到组件类型的映射表 #

这个表用来明确每个枚举键对应的组件类型，让TypeScript能找到对应关系：

// 先定义好各个组件类型
type ComponentA = {
  attributes: { /* 具体属性定义 */ }
}

type ComponentB = {
  attributes: { /* 具体属性定义 */ }
}

type ComponentC = {
  attributes: { /* 具体属性定义 */ }
}

// 建立映射关系
type ComponentMap = {
  ComponentA: ComponentA;
  ComponentB: ComponentB;
  ComponentC: ComponentC;
  // 新增枚举项时，在这里同步添加对应的键值对即可
};

步骤3：自动生成目标联合类型 #

利用映射类型遍历枚举的所有键，生成每个联合成员，最后转成联合类型：

type Component = {
  // 遍历枚举的每个键K
  [K in keyof typeof ComponentName]: {
    id: string;
    name: typeof ComponentName[K]; // 对应枚举的具体值
    component: ComponentMap[K]; // 对应映射表中的组件类型
  };
// 把映射类型转换为所有成员的联合类型
}[keyof typeof ComponentName];

效果说明 #

生成的Component类型和你手动编写的冗长联合类型完全等价。后续新增枚举项时，只需要两步操作：

1. 在ComponentName枚举里添加新项
2. 在ComponentMap里添加对应的组件类型映射
   Component类型会自动更新，无需手动修改联合成员。

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