prop-types 是 React 中用于运行时 props 类型校验的轻量 npm 包，仅在开发环境生效、生产环境零开销；需安装引入后通过 Button.propTypes 定义类型规则，并可配合 defaultProps 设置默认值。

JavaScript 本身是动态类型语言，运行时才确定变量类型，所以需要额外工具做类型检查。在 React 中，prop-types 是最轻量、兼容性最好的运行时 props 类型校验方案（尤其适合不使用 TypeScript 的项目）。

prop-types 是什么

prop-types 是一个独立的 npm 包，用于为 React 组件的 props 提供运行时类型检查。它不会改变代码行为，只在开发环境（process.env.NODE_ENV === 'development'）下生效，生产环境自动跳过，零性能开销。

怎么安装和引入

先安装：

npm install prop-types

然后在组件文件中引入：

立即学习“Java免费学习笔记（深入）”；

java-enterprise

Java企业开发专家，专注于Spring Boot、微服务架构和JVM优化。适用于：Java语言掌握、

下载

import PropTypes from 'prop-types';

基本用法：给 props 定义类型规则

在函数组件或 class 组件定义后，直接挂载 propTypes 静态属性：

function Button({ label, onClick, disabled }) {
  return <button onClick={onClick} disabled={disabled}>{label}</button>;
}

Button.propTypes = {
  label: PropTypes.string.isRequired,
  onClick: PropTypes.func,
  disabled: PropTypes.bool,
};

说明：

• PropTypes.string 表示必须是字符串
• .isRequired 表示该 prop 不可省略（否则控制台报 warning）
• 没加 .isRequired 的 prop 允许不传，也允许传 undefined 或 null（除非额外用 PropTypes.oneOfType 约束）

常用类型和进阶写法

常见类型包括：

• PropTypes.number、PropTypes.bool、PropTypes.array、PropTypes.object、PropTypes.string、PropTypes.node（可渲染内容，如字符串/元素/数组）、PropTypes.element（单个 React 元素）
• 必填 + 默认值写法：disabled: PropTypes.bool.isRequired；默认值建议配合 defaultProps 使用
• 枚举值：size: PropTypes.oneOf(['small', 'medium', 'large'])
• 多种类型之一：color: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
• 自定义对象结构：user: PropTypes.shape({ id: PropTypes.number, name: PropTypes.string.isRequired })
• 数组元素类型统一：items: PropTypes.arrayOf(PropTypes.string)

设置默认值（仅对非 required 的 prop 有意义）：

Button.defaultProps = {
  disabled: false,
};

基本上就这些。prop-types 不复杂但容易忽略——它不能捕获所有类型错误，也不如 TypeScript 编译期检查强大，但在快速验证、团队协作和遗留项目中依然很实用。