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

【问题标题】：Typescript parsing error when EXTEND_ESLINT=true in create-react-app在 create-react-app 中 EXTEND_ESLINT=true 时打字稿解析错误
【发布时间】：2020-02-12 14:51:10
【问题描述】：

Stripped down demonstration - GitHub

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

在添加此设置之前，我的 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 and ESLint versions are compatible 和typescript-eslint。
我尝试了许多不同的.eslintrc 组合。我在附加存储库的.eslintrc.js 文件中留下了一些最有前途的。当前设置是recommended by create-react-app，其中Typescript linting 设置在overrides 部分。
ESLint Typescript 配置是按照 typescript-eslint monorepo 的说明设置的，特别是 typescript-eslint/parser 和 typescript-eslint/eslint-plugin

解决方案

弹出不是一种选择。如果找不到其他解决方案，我宁愿一次性完成 Flow -> TS 转换。
我们目前使用customize-cra 扩展我们的 CRA 配置。欢迎提供涉及此问题的解决方案。
我很享受 .eslintrc 为我提供的灵活性，但我很乐意取消它，前提是我仍然可以设置 lint 规则。

备注

我已将customize-cra 包含在演示存储库中以准确反映我们的项目，但没有customize-cra 时问题仍然存在，这表明它可能不是罪魁祸首。
有关问题语法的示例，请参见 src/components/TestComponent/fn.ts。
我目前的假设是 CRA ESLint 配置中的某些设置在 EXTEND_ESLINT=true 时不会被继承。

更新

I've opened an issue at create-react-app
列出了该问题的部分解决方法。仍然不理想。

【问题讨论】：

标签： reactjs typescript create-react-app parsing-error typescript-eslint

【解决方案1】：

更新：将 react-scripts 更新到至少 3.4.1 的最新版本。已修复。

对于 3.4.1 之前的 react-scripts 版本，

打开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之后自动应用

【讨论】：

【解决方案2】：

对于遇到此问题的其他人，open issue at CRA 似乎是原因。

【讨论】：