Javascript в JetBrains IDE: подсказка типа для автономного экземпляра пользовательского элемента

Question

Рассмотрим следующее:

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

myCustomElement будет экземпляром MyCustomElement во время выполнения (производная HTMLElement); но подсказка типа myCustomElement заставляет IDE JetBrains из PhpStorm пожаловаться:

Тип инициализатора HTMLElement нельзя назначить типу переменной MyCustomElement

Удивительно, но IDE полностью подходит для встроенных типов:

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

Итак, что мне нужно сделать, чтобы было очень подходящим? " вводить подсказки "в IDE (не используя *) при разрешении предупреждения ?!

---

Я мог бы создать экземпляр myCustomElement с помощью оператора new; и, кажется, работает, но нет никаких ссылок на различия между подходами (о том, использовать ли new или использовать document.createElement(), и почему или почему - не выбирать один из других ?!)

Answer 1

Закрытие не понимает, что вы создаете экземпляр экземпляра MyCustomElement из document.createElement, потому что оно не понимает значения customElements.define * для своей внутренней системы типов, когда вы создаете HTMLElement с именем тега "my-custom-element".

То, что вы, вероятно, захотите сделать, приведёт результат функции createElement (HTMLElement) к MyCustomElement:

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

*: Насколько я знаю; нет никаких доказательств того, что они намерены.