在纯功能代码中使用 react proptypes 进行验证答案

【问题标题】：Use react proptypes for validation in purely functional code在纯功能代码中使用 react proptypes 进行验证
【发布时间】：2015-09-07 07:45:52
【问题描述】：

我真的很喜欢 react proptypes 的想法，我想知道它们是否可以用来验证任何给定函数的输入，而不仅仅是传递给 react 组件的 props。

例如：

function doSomething (thing1, thing2) {
    Proptypes.validate(arguments, [Proptypes.string, Proptypes.number]);
}

有没有办法让 proptypes 做到这一点？

谢谢！

【问题讨论】：

您设想validate 会做什么？您不打算在“纯功能代码”中使用 exceptions，是吗？ ಠ_ಠ
理想情况下，这将是一种在开发过程中进行类型检查的方法，以确保函数的参数实际上是正确的类型。它也可以作为一种文档。
哦，如果在生产中运行代码时能够完全删除它，那就太好了！
也许你会对TypeScript感兴趣？
我不确定这是我想要的，因为我认为如果从另一个文件中使用模块，它不会出错。就像说我从一个单独的文件中调用一个函数并传递不正确的数据，我认为打字稿目前不会捕捉到它..？也许我错了。

标签： javascript validation reactjs

【解决方案1】：

是的，尽管您需要传递一些无关的参数。

您可能想要做一个包装函数来让生活更轻松，但不要忘记React.PropTypes 本身就是函数。

例如：

React.PropTypes.string(props, propName, componentName)

props 是组件的整个 props 对象，propName 是被检查的 prop 的名称（和键），componentName 是您从中调用它的组件的名称。

尽管我认为自己编写可能会更好，因为自己编写的代码量非常少，并且可以保护你免受 React.PropTypes 在未来版本的 React 中工作方式的任何潜在变化。

【讨论】：

你知道有没有人写过这样的包装器？似乎验证函数的参数将是一个非常普遍的需求。
不确定，由于每次需求略有不同，我通常在各种项目中编写自己的。不过肯定有人做了一个通用的！

【解决方案2】：

Prop 验证器是函数，因此您可以调用它们。正如Prop Validation 文档中的customProp 示例所示，参数是props、propName 和componentName。该函数在成功时返回null，在失败时返回Error。例如：

React.PropTypes.number({'a': 4}, 'a', 'foo')
// null

React.PropTypes.number({'a': 'b'}, 'a', 'foo')
// Error: Invalid undefined `a` of type `string`
// supplied to `foo`, expected `number`

【讨论】：