PropTypes.array与arrayOf(PropTypes.any)校验差异及ESLint错误咨询

咱们先直接给结论：这两种校验方式在运行时的表现完全没有差异，官方文档的说法是准确的——PropTypes.array本质就是PropTypes.arrayOf(PropTypes.any)的语法糖，二者对非数组类型的校验报错完全一致。

那为什么ESLint会揪着PropTypes.array报错呢？咱们拆解一下：

一、ESLint报错的核心原因 #

react/forbid-prop-types这条规则的设计初衷，是避免过于宽泛的类型校验。PropTypes.array和PropTypes.object这类校验只检查了外层容器的类型，完全不约束内部元素/属性的类型：

• 如果组件实际需要的是字符串数组，用PropTypes.array的话，传入数字数组也不会触发校验错误，容易埋下隐性bug。
• ESLint更推荐开发者使用精确的校验逻辑，比如PropTypes.arrayOf(PropTypes.string)来明确约束数组元素类型，哪怕暂时确实需要接受任意类型元素，用PropTypes.arrayOf(PropTypes.any)也比PropTypes.array更具可读性，未来要细化约束时也更容易修改。

二、能不能忽略这个ESLint错误？ #

分两种情况来看：

• 不推荐全局忽略：如果项目追求代码的健壮性和可维护性，最好遵循ESLint的建议，改用PropTypes.arrayOf(PropTypes.any)代替PropTypes.array，这只是微小的语法调整，却能让组件的属性约束更清晰。
• 局部忽略的合理场景：如果你确定这个数组确实需要接受任意类型的元素，且短期内不会有细化约束的需求，可以在代码中用注释局部忽略该错误：

// eslint-disable-next-line react/forbid-prop-types
Component.propTypes = {
  someProp: PropTypes.array,
}

当然，这么做之前最好和团队成员达成共识，避免无节制地忽略规则导致代码质量下降。

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