使用 PropTypes 进行类型检查

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

Deprecated warning

在React 19中，PropTypes已被废弃，要使用类型检查功能，可以选择使用JSDoc、Flow或者直接使用Typescript。如果项目需要升级到React 19，那么就需要尽快先完成类型检查功能的重构。

要在应用中使用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;

Live with React

使用 PropTypes 进行类型检查