How to handle ESLint error during type casting of document.getElementById() method in TypeScript?

Question

According to all of these pages:

• https://mcmap.net/q/82303/-how-to-use-document-getelementbyid-method-in-typescript
• https://mcmap.net/q/83154/-type-assertion-via-quot-as-quot-keyword-in-a-new-create-react-app-project-results-in-parsing-error-unexpected-token-expected-quot-quot
• https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#type-assertions

I expected this to work:

/**
 * Destroy current user session.
 */
function logOut() {
  const form = document.getElementById('logout-form') as HTMLFormElement;
  form.submit();
}

Instead, I see this ESLint error in VS Code:

Parsing error: Unexpected token, expected ";"

This approach threw errors, too: const form = <HTMLFormElement>document.getElementById('logout-form');

I've tried this same function in both a .tsx file and a .ts file.

What am I doing wrong?

P.S. I'm using Prettier and ESLint and https://github.com/airbnb/javascript rules and https://mcmap.net/q/83155/-airbnb-eslint-prettier-conflict-over-switch-and-case-indentation

Fletcherfletcherism

You can see this #13669904 – Defoliate

Answer 1

https://khalilstemmler.com/blogs/typescript/eslint-for-typescript/#Installation-and-setup was super helpful.

I think the main key was to change parser in my .eslintrc.js file to parser: '@typescript-eslint/parser',.

I also adjusted plugins and extends as instructed.

Then I added these lines to the rules object in my .eslintrc.js because of https://stackoverflow.com/a/64024916/:

// We must disable the base rule (since it can report incorrect errors) and replace it (https://stackoverflow.com/a/64024916/):
'no-use-before-define': 'off',
'@typescript-eslint/no-use-before-define': ['error'],

Fletcherfletcherism