More specific DOM types (especially for checkJs)

[cyrilletuzi]

TypeScript Version: 2.3.3

Code

In a JavaScript file (not TypeScript), with checkJs option enabled.

let elementRoot = document.getElementById('test');

if (elementRoot) {

  /** @type {HTMLElement} */
  let elementFirstChild = elementRoot.children[0];
  
}

Actual behavior:

It raises the error [js] Type 'Element' is not assignable to type 'HTMLElement'. If switching back to type Element, Intellisense will be wrong and other errors will be raised when I'll use elementFirstChild like a HTML element, for example by setting styles : elementFirstChild.style.color = 'red';.

Expected behavior:

elementFirstChild should be of type HTMLElement instead of Element, because if elementRoot is an HTMLElement, its children will be too.

In TS files, we solve this situation with type casting : elementRoot.children[0] as HTMLElement.

But in JS files with the checkJs option, type casting is not possible as it's not valid JS (even if TS allows it while checking). So we're stuck, and the only (bad) solution is a // @ts-ignore.

It would be better for TS files too. And there may be similar issues with other DOM properties.

I know that some DOM types are already inferred dynamically (like with createElement), is there a specific reason it's not the case here ? If none, I can try to take care of the PR.

[cyrilletuzi]

Same problem with event.target.

[mhegazy]

Adding type assertion support is tracked by #15618 (comment)

[cyrilletuzi]

Will the issue you mention resolve this case ? Because the relation between the two cases (this one and the one from the other issue) is not obvious to me.

[mhegazy]

#15618 tracks adding type assertion syntax. so you would write your example as

let elementRoot = /** @type {HTMLDIVElement} */ document.getElementById('test');

[mhegazy]

Automatically closing this issue for housekeeping purposes. The issue labels indicate that it is unactionable at the moment or has already been addressed.

[cyrilletuzi]

#15618 is marked as closed as the corresponding PR is merged. But I tried with typescript@next (2.5 at the moment) and it does not work.