ESlint 在 TypeScript 转换运算符“as”上解析错误“意外标记”

Question

任何出现的as运算符都会[eslint] [E] Parsing error: Unexpected token, expected ";"指向 的位置as。示例代码：

{error && <small className="invalid-feedback">{(error as any).message}</small>}

此转换any为react-hooks-form的useFormContext功能中的某些错误的解决方法。

当我忽略错误并编译应用程序时，它工作正常。

这发生在带有最新 TypeScript 和 react-scripts 的标准未弹出 Create React App 中：

$ npm list -dev -depth 0
frontend@0.1.0 
??? eslint-plugin-flowtype@3.13.0
??? react-hot-loader@4.12.19
??? react-scripts@3.4.0
??? typescript@3.8.2

AFAIK 除了自动生成之外没有配置文件tsconfig.json：

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": [
    "src"
  ]
}

任何想法为什么会发生这种情况？

Answer 1

我遇到了类似的问题，对我有用的简单修复如下。
我将此添加到我的package.json：

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

我注意到在里面create-react-app --template typescript生成了一个package.json。

Answer 2

我发现问题的根源在于Coc（Vim8 和 Neovim 的智能感知引擎）及其环境的错误配置。它在我的项目之外使用了错误的（旧的）eslint安装。我必须更正PATH并确保正确检测到工作区文件夹。

编辑：react-scripts添加了 TypeScript 支持的基于应用程序npm install --save typescript @types/node @types/react @types/react-dom @types/jest还没有准备好通过 eslint 对 .ts[x] 源文件进行 linting。必须手动配置它。我使用了本指南：https : //github.com/typescript-eslint/typescript-eslint/blob/master/docs/getting-started/linting/README.md并提出了以下配置（.eslintrc.json）：

{
    "extends": [
        "standard",
        "plugin:react/recommended",
        "plugin:@typescript-eslint/eslint-recommended",
        "plugin:@typescript-eslint/recommended"
    ],
    "parser": "@typescript-eslint/parser",
    "plugins": [
        "@typescript-eslint"
    ],
    "settings": {
        "react": {
            "pragma": "React",
            "version": "detect",
            "flowVersion": "0.53"
        }
    },
    "overrides": [
        {
            "files": ["*.js", "*.jsx"],
            "rules": {
                "@typescript-eslint/explicit-function-return-type": "off"
            }
        }
    ]
}

这可能需要大量调整。

Answer 3

我在尝试将 Jest 与带有运算符的 tsx 文件一起使用时遇到了这个问题as。我通过做两件简单的事情解决了这个问题：

1. 跑步npm install --save-dev @babel/preset-typescript
2. 在 babel.config.js 的预设数组中，'@babel/preset-typescript'在末尾添加。