JetBrains IDE : type-hinting the autonomous custom element instance 上的 Javascript

Question

考虑以下:

class MyCustomElement extends HTMLElement {}
customElements.define('my-custom-element', MyCustomElement);
/** @type {MyCustomElement} */
const myCustomElement = document.createElement('my-custom-element');
//                      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

myCustomElement将是 MyCustomElement 的一个实例在运行时( HTMLElement 的派生)；但是， type-hinting myCustomElement让 PhpStorm 的 JetBrains IDE 提示:

Initializer type HTMLElement is not assignable to variable type MyCustomElement

令人惊讶的是，IDE 在内置类型上完全没问题:

/** @type {HTMLDivElement} */
const myDiv = document.createElement('div');

那么，在解决警告的同时，我应该怎么做才能对 IDE 提供非常合适的“键入提示”(不使用 * )？!

我可以实例化 myCustomElement使用 new 运算符(operator);并且它似乎有效，但是没有关于方法之间差异的引用(关于是否使用 new 或使用 document.createElement() ，以及为什么或为什么不选择一个而不是另一个？!)

Answer 1

Closure 不明白您正在从 document.createElement 实例化 MyCustomElement 的实例。因为看不懂customElements.define对其内部类型系统的影响* 您正在创建一个标签名为“my-custom-element”的 HTMLElement。
您可能想要做的是转换 createElement 的结果。函数 ( HTMLElement ) 作为 MyCustomElement :

/** @type {MyCustomElement} */
const myCustomElement = /** @type {MyCustomElement} */ (document.createElement('my-custom-element'));

*: 据我所知;没有证据表明他们打算这样做。