TypeScript 强制转换运算符“as”上的 ESlint 解析错误“Unexpected token”答案

【问题标题】：ESlint parsing error "Unexpected token" on TypeScript cast operator "as"TypeScript 强制转换运算符“as”上的 ESlint 解析错误“Unexpected token”
【发布时间】：2020-06-18 04:34:48
【问题描述】：

任何出现的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"
  ]
}

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

【问题讨论】：

标签： reactjs typescript eslint

【解决方案1】：

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

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

我注意到create-react-app --template typescript 生成了一个package.json，其中包含此内容。

【讨论】：

【解决方案2】：

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

编辑：react-scripts 基于 npm install --save typescript @types/node @types/react @types/react-dom @types/jest 添加的 TypeScript 支持的应用程序尚未准备好通过 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"
            }
        }
    ]
}

这可能需要大量调整。

【讨论】：

【解决方案3】：

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

运行npm install --save-dev @babel/preset-typescript
在您的 babel.config.js 中，在预设数组的末尾添加 '@babel/preset-typescript'。

【讨论】：