React 19 中 PropTypes 的运行时类型检查替代方案咨询

以下是几种适配React 19的运行时类型校验方案：

• 使用第三方运行时类型库
  这类独立库不依赖React内置支持，能提供灵活强大的运行时校验能力：

  • zod：通过定义Schema描述props结构，在组件内部调用schema.parse(props)触发校验，开发环境下会抛出清晰错误提示，还能结合TypeScript生成类型定义，减少重复工作。
  • yup：支持链式调用定义校验规则，适合处理复杂的props校验场景，比如必填项、格式验证等。
  • io-ts：基于TypeScript类型系统构建，能实现编译时类型检查和运行时校验的统一，避免类型定义不一致的问题。

• 自定义校验逻辑
  若不想引入额外依赖，可以手动编写校验函数，在开发环境下执行检查：

  import { useEffect } from 'react';
  
  function MyComponent(props: { title: string; count?: number }) {
    useEffect(() => {
      if (process.env.NODE_ENV === 'development') {
        if (typeof props.title !== 'string') {
          console.error('MyComponent: title 必须为字符串类型');
        }
        if (props.count !== undefined && typeof props.count !== 'number') {
          console.error('MyComponent: count 必须为数字类型（可选）');
        }
      }
    }, [props]);
  
    return <div>{props.title}</div>;
  }
  

  可以把通用校验逻辑封装成工具函数，在多个组件中复用。

• 继续使用 PropTypes 包
  React 19只是移除了内置的PropTypes，但独立的prop-types包仍在维护，你可以单独安装它，然后像之前一样在组件上定义propTypes和defaultProps，它依然能在开发环境中提供运行时类型校验，完全兼容React 19。

这些方案都聚焦于开发环境的校验，不会影响生产环境性能，和你之前同时使用TypeScript+PropTypes的实践逻辑一致，能有效避免因TypeScript类型局限导致的意外问题。

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