ESLint报react/prop-types错误：value已定义仍提示缺失校验？

我通过React.SelectHTMLAttributes<HTMLSelectElement>扩展自定义Props类型ProductsLimitChoiceProps，这个内置类型明明已经包含value的定义，但ESLint还是报错：

ESLint: 'value' is missing in props validation

相关TypeScript代码如下：

import React from 'react';

type ProductsLimitChoiceProps = React.SelectHTMLAttributes<HTMLSelectElement> & {
  limits?: (string | number)[],
  onChange?: (value: string) => any,
}

export const ProductsLimitChoice = ({
  value,
  onChange = () => {},
  limits = [5, 10, 15, 20],
  ...props
}: ProductsLimitChoiceProps) => {
  return (
    <select className="select select-primary"
      value={value} onChange={({ target }) => onChange(target.value)} {...props}>
      {limits.map(v => <option key={v} value={v}>{v}</option>)}
    </select>
  );
};

问题原因 #

ESLint的react/prop-types规则默认只识别通过PropTypes库定义的props校验，完全不兼容TypeScript的类型声明逻辑。你虽然用TypeScript做了类型约束，但这个ESLint规则无法读取TypeScript类型里的属性定义，所以依然会抛出缺失验证的提示。

解决办法 #

有三种常见处理方式：

• 单个文件禁用规则：如果只是这个组件不想处理该提示，在文件顶部加注释关闭规则：

  /* eslint-disable react/prop-types */
  

• 全局禁用规则：如果项目全程用TypeScript做类型校验，react/prop-types规则本身就属于冗余校验，直接在ESLint配置文件（比如.eslintrc.js）里关掉：

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

• 手动添加PropTypes校验（不推荐）：如果非要保留该规则，就得手动给value补PropTypes定义，但这会和TypeScript类型重复，增加维护成本：

  import PropTypes from 'prop-types';
  
  // ...组件代码
  
  ProductsLimitChoice.propTypes = {
    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
  };
  

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