ESlint parsing error "Unexpected token" on TypeScript cast operator "as"

Question

Any occurrence of as operator gives [eslint] [E] Parsing error: Unexpected token, expected ";" pointing to the place of as. Example code:

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

This cast to any is a workaround to some bug in react-hooks-form's useFormContext function.

When I ignore the error and compile the app it works fine.

This happens in a standard unejected Create React App with latest TypeScript and react-scripts:

$ npm list -dev -depth 0
[email protected] 
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

AFAIK there are no configuration files besides autogenerated 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"
  ]
}

Any ideas why this happens?

Answer 1

I was running into a similar problem, and a simple fix that worked for me was the following.
I added this to my package.json:

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

I noticed that create-react-app --template typescript generates a package.json with this in it.

Answer 2

I've found that the source of the problem was misconfiguration of Coc (intellisense engine for Vim8 & Neovim) and its environment. It was using wrong (old) installation of eslint from outside of my project. I had to correct PATH and make sure workspace folders are detected correctly.

EDIT: react-scripts based application with TypeScript support added by npm install --save typescript @types/node @types/react @types/react-dom @types/jest is not ready for linting .ts[x] source files by eslint. One have to manually configure it. I used this guide: https://github.com/typescript-eslint/typescript-eslint/blob/master/docs/getting-started/linting/README.md and came up with following config (.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"
            }
        }
    ]
}

Which probably will need a lot of tuning.

Answer 3

I was running into this issue while trying to use Jest with a tsx file with the as operator in it. I solved the problem by doing two simple things:

1. Run npm install --save-dev @babel/preset-typescript
2. In your babel.config.js, in the presets array, add '@babel/preset-typescript' at the end.