TypeScript下React组件继承接口触发ESLint react/prop-types错误

这不是Bug哦，其实是你没完全搞懂ESLint的react/prop-types规则的工作逻辑～

为什么会报错？ #

react/prop-types这个ESLint规则，最初是为JavaScript编写的React组件设计的——它要求你通过prop-types库来定义运行时的props校验规则。但这个规则本身不识别TypeScript的接口类型定义，哪怕你用了接口继承，它也没办法从TypeScript的类型系统里自动读取继承来的age字段的校验规则，所以会判定age缺少props验证。

简单说：TypeScript接口是编译时的类型检查，而react/prop-types规则盯的是运行时的PropTypes定义，两者不是一套体系。

解决办法有这几种： #

• 直接禁用该规则（最推荐，适合纯TypeScript项目）
  既然已经用TypeScript做编译时的严格类型检查了，运行时的prop-types校验其实有点冗余。你可以在ESLint配置文件（比如.eslintrc.js）里关掉这个规则：

  module.exports = {
    // ...其他配置
    rules: {
      "react/prop-types": "off"
    }
  };
  

• 手动补充PropTypes定义
  如果项目需要保留运行时校验，那你得手动给所有props（包括继承来的字段）添加PropTypes定义：

  import PropTypes from 'prop-types';
  
  interface SuperProps { age: number; }
  interface TestProps extends SuperProps { name: string; }
  
  const Test = ({ name, age }: TestProps) => {
    return <p>{name}: {age}</p>;
  };
  
  Test.propTypes = {
    name: PropTypes.string.isRequired,
    age: PropTypes.number.isRequired // 手动补上继承的age字段
  };
  

• 用工具自动转换
  可以用typescript-to-proptypes这类工具，它能自动把TypeScript接口转换成对应的PropTypes定义，减少手动编写的工作量，配置好之后就能让ESLint规则识别到继承的字段了。

内容的提问来源于stack exchange，提问作者Max Gordon