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的应用程序，通过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"
            }
        }
    ]
}

这可能需要大量调整。

Answer 3

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

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

Answer 4

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

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

此铸造到any是一种变通方法在一些bug 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"
  ]
}

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