使用带有 PropTypes 的 TypeScript Enum 来定义 React 组件的 props答案

【问题标题】：Use TypeScript Enum with PropTypes to define React Component props使用带有 PropTypes 的 TypeScript Enum 来定义 React 组件的 props
【发布时间】：2019-11-02 09:26:03
【问题描述】：

我有组件，我使用 TypeScript 接口来定义它的道具：

interface Props {
    headerType: DROPDOWN_MENU_TYPE, //DROPDOWN_MENU_TYPE is enum
    headerContent: SVGClass
    isReverse: boolean;
};

const MyComp: React.FunctionComponent<Props> = () => {};

然后我使用 PropTypes 在运行时验证它的 props：

DropDownMenu.propTypes = {
    headerType: PropTypes.oneOf(DROPDOWN_MENU_TYPE), //error here
    headerContent: PropTypes.instanceOf(SVGClass),
    isReverse: PropTypes.bool
};

我得到了这个错误：

“typeof DROPDOWN_MENU_TYPE”类型的参数不能分配给“只读 DROPDOWN_MENU_TYPE[]”类型的参数。

“typeof DROPDOWN_MENU_TYPE”类型缺少“只读 DROPDOWN_MENU_TYPE[]”类型的以下属性：长度、连接、连接、切片等 16 个。

如何将 TypeScript enum 与 PropTypes 一起使用？我该如何解决这个错误？

【问题讨论】：

标签： javascript reactjs typescript

【解决方案1】：

你可以试试

const DropdownMenuType = PropTypes.oneOf(
  Object.values(DROPDOWN_MENU_TYPE) as DROPDOWN_MENU_TYPE[]
);

DropDownMenu.propTypes = {
  headerType: DropdownMenuType,
  ...
};

每当我需要验证枚举时都适合我。

【讨论】：

【解决方案2】：

如果你的枚举有数值并且你想传递这样的值，试试

headerType: PropTypes.oneOf(
  Object.values(DROPDOWN_MENU_TYPE).filter(x => typeof x === 'number')
)

【讨论】：