使用PropTypes进行类型检查

在React 15.5之前的版本中，PropTypes是React内置的类型检查功能，但目前这个功能已经被独立了出来，形成了一个新的名为prop-types的库。这个库虽然功能不及Flow或者Typescript可以这整个应用进行强制的类型约束，但是prop-types还可以可以完成对于组件的props属性的类型检查的。

要在应用中使用prop-types十分容易，只需要安装这个库即可。

npm install prop-types
yarn add prop-types

PropTypes主要是通过在组件的.propTypes属性上添加一系列的验证器来确保组件所收到的数据类型是有效的。例如以下使用示例。

import PropTypes from 'prop-types';

class Greeting extends React.Component {
  render() {
    return <div>Nice day, {this.props.name}.</div>;
  }
}

Greeting.propTypes = {
  name: PropTypes.string
};

示例中虽然是使用的基于class的组件，但是抽动实际使用中，PropTypes并没有限定组件类型，函数组件以及高阶组件等都可以使用PropTypes来验证内容类型。但是在使用函数组件或者高阶组件的时候，不能直接使用export default导出组件，而是需要在定义.propTypes属性之后再导出组件。例如以下示例。

import PropTypes from 'prop-types';

function Greeting({ name }) {
  retrun(<div>Nice day, {name}.</div>);
}

Greeting.propTypes = {
  name: PropTypes.string
};

export default Greeting;