在 create-react-app 中 EXTEND_ESLINT=true 时打字稿解析错误

Question

精简演示 - GitHub

我们目前有一个 create-react-app 项目，该项目正在进行从 Flow 到 Typescript 的增量迁移。这意味着禁用一些不需要的 ESLint 规则。为了自定义 ESLint，我添加EXTEND_ESLINT=true到.env文件中。

在添加此设置之前，我的 Typescript 代码编译良好。之后，我在某些（但不是全部）Typescript 语法上遇到解析错误。

// Type guards
export function f0<T>(x: T|undefined): x is T { ...

// Constrained generics
export function f1<T extends number>(x: T) { ...

// Type assertions
... return x as T

可能还有其他无法识别的语法我还没有找到。

迄今为止

• 我还没有发现任何类似的问题或错误报告。我知道某些 Typescript 功能在当前的 CRA 版本中不可用，例如const enum，但我没有发现上面列出的功能的任何提及。我也很确定我的Typescript 和 ESLint 版本与typescript-eslint.

• 我尝试了许多不同的.eslintrc组合。我.eslintrc.js在附加存储库的文件中留下了一些最有希望的。当前设置是create-react-app 推荐的设置，其中 Typescript linting 在overrides部分设置。

• 所述ESLint打字稿配置成立以下从指令typescript-eslintmonorepo，特别地，typescript-eslint/parser和typescript-eslint/eslint-plugin

解决方案

• 弹出不是一种选择。如果找不到其他解决方案，我宁愿一次性完成 Flow -> TS 转换。

• 我们目前使用custom-cra扩展了我们的 CRA 配置。欢迎涉及此问题的解决方案。

• 我喜欢它.eslintrc给我的灵活性，但我很乐意取消它，前提是我仍然可以设置 lint 规则。

笔记

• 我已经包含customize-cra在演示仓库中以准确反映我们的项目，但问题仍然存在customize-cra，表明它可能不是罪魁祸首。

• 有关src/components/TestComponent/fn.ts问题语法的示例，请参阅。

• 我目前的假设是 CRA ESLint 配置中有一些设置不会在EXTEND_ESLINT=true.

更新

• 我在 create-react-app 上打开了一个问题
• 问题中列出的部分解决方法。还是不理想。

Answer 1

更新：将react-scripts更新到最新版本至少3.4.1。它是固定的。

对于反应脚本 3.4.1 之前的版本，

打开node_modules/react-scripts/config/webpack.config.js

将第 365 行的代码块替换为此代码。

  if (process.env.EXTEND_ESLINT === 'true') {
    return undefined
  } else {
    return {
      extends: [require.resolve('eslint-config-react-app')],
    };
  }
})(),
useEslintrc: process.env.EXTEND_ESLINT === 'true',

现在，如果您通过yarn或npm启动您的应用程序，您将看到它已修复。

该修复最初是在这里介绍的

https://github.com/facebook/create-react-app/issues/7776#issuecomment-567587642

运行npx patch-package react-scripts为其打补丁。并添加"postinstall": "patch-package"到您的 package.json 脚本部分。

补丁将在之后自动应用npm install