如何配置ESLint禁止TypeScript中直接使用React.MouseEvent类型

你当前配置的no-restricted-imports规则仅能校验模块导入语句层面的写法，无法识别通过命名空间（即React.XXX形式）访问的类型成员，因此会漏掉React.MouseEvent的违规场景。

方案1：使用@typescript-eslint/no-restricted-types规则（推荐，覆盖最全面） #

这是TypeScript-ESLint官方提供的类型级限制规则，不依赖导入语句做校验，无论类型是通过具名导入、命名空间访问还是全局声明引入，只要在代码中使用就会被识别，配置方式如下：

1. 确保项目已安装并启用@typescript-eslint/eslint-plugin，且解析器配置为@typescript-eslint/parser
2. 在ESLint配置中新增如下规则，可移除之前no-restricted-imports中针对MouseEvent的限制逻辑：

{
  "rules": {
    "@typescript-eslint/no-restricted-types": ["error", {
      "types": {
        "React.MouseEvent": {
          "message": "禁止直接给事件参数标注React.MouseEvent类型，请统一将函数变量标注为React.MouseEventHandler类型，由TS自动推导event类型，规范写法：const submit: React.MouseEventHandler = (event) => {}"
        },
        "MouseEvent": {
          "message": "禁止直接从react导入MouseEvent做参数类型标注，请统一使用MouseEventHandler标注函数变量类型",
          "from": "react"
        }
      }
    }]
  }
}

如果需要覆盖其他事件类型（比如ChangeEvent、KeyboardEvent），按照相同格式在types配置项里追加即可。

方案2：自定义ESLint规则做AST匹配 #

如果项目不方便引入TypeScript-ESLint相关能力，可以写一个轻量的自定义ESLint规则，通过AST节点匹配覆盖两种违规场景：

• 匹配从react模块导入MouseEvent的导入声明节点
• 匹配类型注解位置的TS限定名节点，即成员表达式结构为React.MouseEvent的类型节点
  匹配到对应节点后抛出符合你团队规范的报错提示即可，逻辑复杂度很低，不需要额外依赖。

方案3：增加自动修复能力降低改造成本 #

如果团队项目存量违规代码较多，可以在上述规则的基础上扩展自动修复逻辑：

• 识别到const xxx = (e: React.MouseEvent<XXXElement>) => {}写法时，自动给函数变量追加: React.MouseEventHandler<XXXElement>类型注解
• 自动移除事件参数上多余的MouseEvent类型标注
  修复后代码直接符合规范，不需要开发者手动调整，泛型参数可以直接透传，不会出现类型丢失问题。

注意：如果团队规范要求所有事件处理函数都用Handler类型标注，还可以结合@typescript-eslint/explicit-module-boundary-types、@typescript-eslint/typedef等规则做补充校验，避免漏网的不规范写法。

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