如何在PropTypes中使用TypeScript枚举？解决类型报错

这个报错的核心原因很明确：PropTypes.oneOf()需要接收枚举值组成的数组，但你直接传入了枚举的类型对象（typeof DROPDOWN_MENU_TYPE）——它本质是个编译后的JS对象，不是数组，所以类型完全不匹配。

接下来分两种常见场景给你解决方案：

场景1：字符串枚举（推荐，避免双向映射问题） #

如果你的枚举是字符串类型（每个成员都赋值了字符串），直接用Object.values()提取所有值即可，因为字符串枚举编译后是单向映射的对象，Object.values()只会返回枚举值：

// 先定义字符串枚举
enum DROPDOWN_MENU_TYPE {
  Default = "DEFAULT",
  Primary = "PRIMARY",
  Secondary = "SECONDARY"
}

interface Props {
  headerType: DROPDOWN_MENU_TYPE;
  headerContent: SVGClass;
  isReverse: boolean;
};

const MyComp: React.FC<Props> = () => {
  // 组件逻辑
  return <div></div>;
};

// 处理PropTypes
MyComp.propTypes = {
  // 用Object.values提取枚举值数组，加类型断言让TS识别类型
  headerType: PropTypes.oneOf(Object.values(DROPDOWN_MENU_TYPE) as readonly DROPDOWN_MENU_TYPE[]),
  headerContent: PropTypes.instanceOf(SVGClass),
  isReverse: PropTypes.bool
};

场景2：数字枚举 #

数字枚举编译后是双向映射的对象（既存键->值也存值->键），所以Object.values()会同时返回数字和字符串，需要过滤出纯数字的枚举值：

enum DROPDOWN_MENU_TYPE {
  Default,
  Primary,
  Secondary
}

// 过滤出仅数字类型的枚举值，用类型断言确保类型正确
const validDropdownTypes = Object.values(DROPDOWN_MENU_TYPE).filter(
  (val): val is DROPDOWN_MENU_TYPE => typeof val === "number"
);

// 组件定义部分和之前一致...

MyComp.propTypes = {
  headerType: PropTypes.oneOf(validDropdownTypes),
  headerContent: PropTypes.instanceOf(SVGClass),
  isReverse: PropTypes.bool
};

备选方案：手动列出枚举值 #

如果你的枚举成员很少，也可以直接手动把允许的枚举值列成数组，这种方式最直观：

MyComp.propTypes = {
  headerType: PropTypes.oneOf([
    DROPDOWN_MENU_TYPE.Default,
    DROPDOWN_MENU_TYPE.Primary,
    DROPDOWN_MENU_TYPE.Secondary
  ]),
  // ...其他props
};

最后补充一句：你已经用TypeScript做了编译时类型检查，PropTypes是运行时校验的补充，两种方式结合能让组件的类型安全更完善~

内容的提问来源于stack exchange，提问作者Trí Phan