typescript definitions

[snuup]

I was maybe a bit fast with opening this issue: #1227

I have a typescript based web framework, that utilises the types in lib.dom.d.ts - the obvious reference. I wonder why happy-dom exposes its interface with own types that are perfectly unrelated with these "public" types. For that reason I used jsdom instead of happy-dom, jsdom exposes the public types. I would like happy-dom to also use the public types, like HTMLElement and so on.

What do you think?

[snuup]

Browsing source code on github I find that others struggle exactly like me:

    // JSDOM for document
    // const dom = new JSDOM(bangumiContents);
    // const document = dom.window.document;

    // HappyDOM for document
    // const window = new Window({ url: bangumiURL });
    // const document = window.document as unknown as Document;  // <<<<<<<<<<<<< ugly double cast required
    // // TODO: HappyDOM の型定義を正して、上記の型アノテーションを削除する
    // document.body.innerHTML = bangumiContents;

(https://github.com/xtetsuji/bangumi-js/blob/e67e4893785920bb537ca9db177a85f4998b3896/apps/cli/src/service/bangumi2gcal_service.ts#L5)

[WebMechanic]

Same here :-) using WebStorm with JS (not TS) in Vue, Vitest and HappyDOM. I have tsconfig configured for other libs to simplfy my life in the IDE, but HappyDOM somehow interferes. I have not added its types anyplace I am aware of other than for the tests (packages.json "@happy-dom/global-registrator and test file @vitest-environment happy-dom)

This is likely more a problem with the IDE, but it'd be helpful if somebody knows how to fix/repair this behaviour. I don't know enough about TS and typedef resolution to tackle this.

WebStorm apparently finds the type definitions of HappyDOM overriding it's own built in DOM and Browser types and then claims things like "Initializer type IElement is not assignable to variable type HTMLElement" for every native method like document.getElementById. This is flooding my "problems" panel with false positives.
Adding JSDocs with types doesn't help either.

/** @type {HTMLElement} */
const eltApp = document.getElementById('app');

I didn't realize at first that IElement and Co come from HappyDOM. WebStorm also loves to add an automatic import to HappyDOM's node package for the real thing like "HTMLElement", if I add @type {HTMLElement} into a comment and press return.
This often broke my build 'cos I didn't see the import beeing added at the top of the component or script.
I had to disable this feature in the IDE which is unfortunate...

Any ideas and solutions are welcome.
Thanks.