在前端开发过程中，经常会用到 PropTypes 这个模块来验证组件的 props，而 Airbnb 的 PropTypes 风格是比较流行的一种，但是它并不是 React 自带的。如果我们想在 React 中使用 Airbnb 的 PropTypes 风格，我们可以使用 @types/airbnb-prop-types 这个 npm 包。
安装
要使用 @types/airbnb-prop-types 包，首先需要安装它。我们只需要在项目的根目录下执行以下命令即可：
npm install --save-dev @types/airbnb-prop-types
使用
我们先来看一下在 React 组件中如何使用 @types/airbnb-prop-types。
首先我们需要引入 PropTypes 和 @types/airbnb-prop-types：
import PropTypes from 'prop-types'; import airbnbPropTypes from '@types/airbnb-prop-types';
然后我们就可以像使用 PropTypes 一样使用 airbnbPropTypes：
class MyComponent extends React.Component {
static propTypes = {
foo: airbnbPropTypes.nonNegativeInteger,
bar: airbnbPropTypes.childrenOfType('span'),
};
// ...
}上面的例子中，我们定义了两个 props：foo 和 bar。其中 foo 要求是非负整数，而 bar 要求子组件都是 。
支持的 PropTypes
@types/airbnb-prop-types 支持 Airbnb 的所有 PropTypes，包括：
- any([isRequired]): 任意类型
- array([isRequired]): 数组类型
- bool([isRequired]): 布尔类型
- childrenOfType(type): 子组件类型
- element([isRequired]): React 元素类型
- elementType([isRequired]): React 元素类型
- exact(propTypes): 精确匹配子 PropTypes
- forbidden([isRequired]): 禁止出现该 PropType
- nonNegativeInteger([isRequired]): 非负整数
- object([isRequired]): 对象类型
- oneOf(['value']): 枚举类型
- oneOfType([PropTypes]): 可接受多个 PropTypes 类型中的一个
- range(min, max, [isRequired]): 连续数值范围
- regexp([isRequired]): 正则表达式
- shape({}): 对象类型精确匹配子 PropTypes
- string([isRequired]): 字符串类型
示例代码
下面是一个例子，我们使用 airbnbPropTypes 验证了一个部件 Loading：
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- -------------
------ --------------- ---- ---------------------------
----- ------- ------- --------------- -
------ --------- - -
------ -----------------------------------
-------- ---------------------------------------
--
------ ------------ - -
------ --
-------- -------------
--
----- - -
----- ------
--
------------------- -
---------- - ------------- -- -
--------------- ----- ---- ---
-- ------------------
-
---------------------- -
-------------------------
-
-------- -
----- - ---- - - -----------
----- - ------- - - -----------
------ -
---- --------------- - -------- ----- - -----------
-- -----------------------------
----------------------
------
--
-
-在上面的代码中，我们定义了两个 props：delay 和 message。其中 delay 要求是非负整数，表示 Loading 的延时时间；而 message 要求子组件都是 ，作为 Loading 的提示信息。此外还设置了 defaultProps 和 state，并在 componentDidMount 和 componentWillUnmount 生命周期中操作。
总结
通过上述例子的使用，相信大家都能很快上手使用 @types/airbnb-prop-types 这个工具包，它可以帮助我们更好地编写组件，并避免一些错误的产生。强烈建议大家使用该工具包来提高代码的健壮性和可读性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f3365c0dbf7be33b2566dda