Typechecking throws error in VSCode in regular JS-File

Question

Let's say i have a HTML element as following:

<progress value="1" max="10" id="site_progress"></progress>

VSCode shows a problem ('Property "max" does not exist on type "Element"'), if i select this element like this:

const progress = document.querySelector('#site_progress');
progress.max = 9;

There will be no problems, if i select via element selector:

const progress = document.querySelector('progress');
progress.max = 9;

Can i do something like type assertion to avoid this kind of behavior or what are good practises to handle this problem in regular javascript?

queryselector can return any type of element of you provide an id, or class etc. So you will need to cast manually.. — Keith
– Keith, Commented Oct 1, 2020 at 8:46
Typescript cannot check your HTML. It can only deduce that if the selector is progress then the result is HTMLProgressElement | null. This will work for every other element too. div => HTMLDivElement, input => HTMLInputElement, etc... But if you add any other selector to it, it cannot do it. — Akxe
– Akxe, Commented Oct 1, 2020 at 9:21
What's a bit odd is, that even input#id doesn't tell TS, that the selected element is a HTMLProgessElement as far as i tested. — FelHa
– FelHa, Commented Oct 1, 2020 at 11:18

Keith · Accepted Answer · 2020-10-01 09:15:33Z

4

Personally I would just move to TS, but even then you would still need to cast. To cast the type in JS you can do ->

/** @type HTMLProgressElement */
const progress = document.querySelector('#id');
progress.max = 9;

In Typescript it would have been like ->

const progress = document.querySelector('#id') as HTMLProgressElement;
progress.max = 9;

Another nice feature, you can create type guards, and this also helps the compiler.

eg, this below will work in both TS & JS.

const progress = document.querySelector('#id');
if (progress instanceof HTMLProgressElement)
    progress.max = 9;

One slight issue with the above, is if #id is not a Progress it will silently continue. So another option is to throw an exception, this also acts as a type guard, but allows you to throw logical error messages when things are not right.

eg..

const progress = document.querySelector('#id');
if (!(progress instanceof HTMLProgressElement))
  throw new Error('#id not a progress');
progress.max = 9;

edited Oct 1, 2020 at 9:15

answered Oct 1, 2020 at 8:54

Keith

24.4k2 gold badges32 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

FelHa Over a year ago

nice. Didn't know about this feature!

Collectives™ on Stack Overflow

Typechecking throws error in VSCode in regular JS-File

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related