CRA创建的React项目集成TypeScript遇ESLint废弃API错误

核心原因 #

react-scripts 5.0.1内置了特定版本的@typescript-eslint工具链，你手动安装的v6版本和内置版本冲突，导致API调用不兼容，触发废弃警告。

解决方案 #

1. 移除手动安装的@typescript-eslint包 #

先卸载你手动添加的高版本插件和解析器：

npm uninstall @typescript-eslint/eslint-plugin @typescript-eslint/parser
# 用yarn的话执行下面这句
yarn remove @typescript-eslint/eslint-plugin @typescript-eslint/parser

2. 调整TypeScript版本至兼容范围 #

react-scripts 5.0.1对TypeScript 5.x的高版本兼容性有限，建议降级到适配的版本：

npm install typescript@~5.0.4 --save-dev
# yarn用户执行
yarn add typescript@~5.0.4 --dev

3. 保留CRA原生ESLint配置 #

CRA的react-app配置已经内置了TypeScript支持，无需手动配置@typescript-eslint相关项，保持你的eslintConfig如下即可：

"eslintConfig": {
  "extends": [
    "react-app",
    "react-app/jest"
  ]
}

4. 清除缓存并重启项目 #

删除依赖文件和缓存，重新安装后启动服务：

rm -rf node_modules package-lock.json
npm install
npm start

备选方案：用react-app-rewired自定义配置（需保留v6版本时用） #

如果必须使用@typescript-eslint v6，需要通过react-app-rewired覆盖CRA的内置配置：

• 安装依赖：

npm install react-app-rewired customize-cra @typescript-eslint/eslint-plugin@6 @typescript-eslint/parser@6 --save-dev

• 在项目根目录创建config-overrides.js：

const { override, adjustEslintConfig } = require('customize-cra');

module.exports = override(
  adjustEslintConfig((config) => {
    // 替换内置的解析器和插件
    config.parser = '@typescript-eslint/parser';
    config.plugins = [...(config.plugins || []), '@typescript-eslint'];
    // 按需添加自定义规则
    config.rules = {
      ...config.rules,
      // 示例："@typescript-eslint/no-unused-vars": "warn"
    };
    return config;
  })
);

• 修改package.json的启动脚本：

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test"
}

• 清除缓存后重启项目。

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