Proptypes中的React with Typescript组件抛出错误TS 2322

Question

我在React上使用TypeScript，在运行时使用PropTypes验证道具。最近我更新了TypeScript 3.9。3.从那时起，情况就不一样了。鉴于此接口：

interface StoryQuestionsProps extends WithMediaProps {
  questionObject: {
    question: string,
    answer: string,
    nid?: string,
    path?: string,
    type?: string,
  },
  children?: JSX.Element | string,
}

如果我声明这些proptype：

StoryQuestions.propTypes = {
  questionObject: PropTypes.shape({
    question: PropTypes.string.isRequired,
    answer: PropTypes.string.isRequired,
    nid: PropTypes.string,
    path: PropTypes.string,
    type: PropTypes.string,
  }).isRequired,
  children: PropTypes.oneOfType([
    PropTypes.element,
    PropTypes.string,
  ]),
}

抛出错误TS2322：

类型验证器；答案：验证器；nid：必需；路径：必需；类型：必需；}

相反，应为任何类型：

StoryQuestions.propTypes = {
  questionObject: PropTypes.any.isRequired,
  children: PropTypes.oneOfType([
    PropTypes.element,
    PropTypes.string,
  ]),
}

它不会返回错误，但这样我将错过questionObject属性验证。为什么propType。shape（）不工作吗？我也尝试过包装propTypes。shape（）与propTypes。objectOf（PropTypes.shape（…） 但没有效果。




Answer 1

虽然propTypes是一个很好的工具，但在使用TypeScript和React时，不需要使用propTypes。您可以简单地用接口或组件道具的类型别名替换propTypes。

一旦定义了接口，就可以安全地从组件中删除propTypes。您可能希望以增量方式进行测试，以防出现任何问题。

话虽如此，我看不出任何问题与故事问题道具的定义方式。