Typescript 在 create-react-app 中 EXTEND_ESLINT=true 时解析错误

Question

精简演示 - 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 和 ESLint 版本与 typescript typescript-eslint兼容。

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

• ESLint Typescript 配置是按照typescript typescript-eslint monorepo的说明设置的，特别是typescript-eslint/parser和typescript-eslint/eslint-plugin

解决方案

• 弹出不是一种选择。 如果找不到其他解决方案，我宁愿在一个 go 中进行 Flow -> TS 转换。

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

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

笔记

• 我在演示 repo 中包含了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 之前的 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后会自动应用补丁

Answer 2

对于遇到此问题的其他人，CRA 有一个未解决的问题，这似乎是原因。