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"
  ]
}

任何想法為什么會發生這種情況？