TypeScript中如何抽象格式相同的枚举作为组件Props

1. 提取公共值类型，定义通用枚举约束 #

先把两个枚举共有的取值范围提取为统一类型，再基于它定义通用枚举类型，所有结构匹配的枚举都能自动兼容：

// 定义所有枚举允许的取值集合
type EnumAllowedValue = "val1" | "val2" | "val3" | "val4" | "val5";

// 通用枚举类型：键为任意字符串，值必须属于EnumAllowedValue
type GenericValueEnum = Record<string, EnumAllowedValue>;

2. 修改组件Props使用通用类型 #

把原来的联合类型替换成上面定义的GenericValueEnum，后续新增符合取值要求的枚举时，无需修改Props定义：

interface ComponentProps {
  valueEnums: GenericValueEnum;
}

3. 类型安全地遍历枚举 #

由于Object.keys()默认返回string[]，可以通过类型断言或工具函数实现类型安全的遍历：

方式一：直接类型断言

function MyComponent({ valueEnums }: ComponentProps) {
  // 获取枚举成员名（类型为枚举键的联合类型）
  const enumKeys = Object.keys(valueEnums) as Array<keyof typeof valueEnums>;
  // 获取枚举值（类型为EnumAllowedValue数组）
  const enumValues = Object.values(valueEnums) as EnumAllowedValue[];

  // 遍历示例
  return (
    <div>
      {enumKeys.map(key => (
        <div key={key}>{`${key}: ${valueEnums[key]}`}</div>
      ))}
    </div>
  );
}

方式二：封装工具函数（复用性更好）

// 工具函数：获取枚举的类型安全键数组
function getEnumKeys<T extends GenericValueEnum>(enumObj: T): Array<keyof T> {
  return Object.keys(enumObj) as Array<keyof T>;
}

// 组件内使用
function MyComponent({ valueEnums }: ComponentProps) {
  const enumKeys = getEnumKeys(valueEnums);
  
  return (
    <div>
      {enumKeys.map(key => (
        <div key={key}>{`${key}: ${valueEnums[key]}`}</div>
      ))}
    </div>
  );
}

4. 新增枚举的兼容性 #

后续新增的枚举只要取值符合EnumAllowedValue，直接传入组件即可，无需修改任何类型定义：

export enum val3 {
  val31 = "val1",
  val32 = "val2",
  val33 = "val3",
  val34 = "val4",
  val35 = "val5"
}

// 直接传入组件，完全兼容
<MyComponent valueEnums={val3} />

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