web-dev-qa-db-ja.com

ESlint解析エラー "予期しないトークン" TypeScriptキャスト演算子 "as"

as演算子が出現すると、asの場所を指す[eslint] [E] Parsing error: Unexpected token, expected ";"が付与されます。コード例：

{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
[email protected] 
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

私の知る限り、自動生成された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"
  ]
}

なぜこれが起こるのか？

reactjstypescripteslint
2
Seweryn Niemiec

使ってみませんか

const bar:any = foo;
1
IreneC

問題の原因は-/ Coc （Vim8とNeovimのインテリセンスエンジン）の誤設定とその環境であることがわかりました。プロジェクトの外部からeslintの間違った（old）インストールを使用していました。 [〜＃〜] path [〜＃〜] を修正し、 workspace folder が正しく検出されることを確認する必要がありました。

[〜＃〜] edit [〜＃〜]：react-scriptsによってTypeScriptサポートが追加されたnpm install --save TypeScript @types/node @types/react @types/react-dom @types/jestベースのアプリケーションは、eslintによる.ts [x]ソースファイルのリンティングの準備ができていません。手動で設定する必要があります。私はこのガイドを使用しました： 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"
            }
        }
    ]
}

おそらく多くのチューニングが必要になります。

0
Seweryn Niemiec