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

Question

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, in particular, typescript-eslint/parser and 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
• 针对该问题列出了部分解决方法。还是不理想。

Answer 1

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

Answer 2

更新：至少将 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

后自动应用