Проблема компиляции свойств Typescript и пользовательских элементов

Question

У меня есть эти пользовательские элементы:

class CustomElement extends HTMLElement{
 constructor(){ super(); }
config: ConfigModel;
}
window.customElements.define('my-element', CustomElement);

Затем, где-то в коде, у меня есть что-то вроде этого:

const myElement = document.createElement('my-element');
myElement.config = config;

TS выдает здесь ошибку: error TS2339: Property 'config' does not exist on type 'HTMLElement'.

Есть идеи, как решить эту проблему?

РЕДАКТИРОВАТЬ: Было предложено привести тип элемента.Хотя это работает, это создает 2 проблемы:

1. Я не обязательно хочу, чтобы все службы, использующие пользовательский элемент, знали о классе пользовательского элемента
2. Если я высмеиваю пользовательскийэлемент для тестирования, жестко запрограммированный пользовательский элемент в сервисе не допускает насмешек.

Вот суть, объясняющая это: https://gist.github.com/YonatanKra/de42be2fa5499157169ef141ba377998

Answer 1

Вам необходимо привести элемент к ожидаемому типу, поскольку Typescript не может знать тип в этом сценарии.

const myElement = <CustomElement>document.createElement('my-element');

Также вам нужно наследовать класс HTMLElement в вашем CustomElement:

class CustomElement extends HTMLElement {

Отредактированный ответ, основанный на дополнительных вопросах:

Очевидно, что если вы когда-нибудь захотите получить доступ к свойствам CustomElement объекта, вам нужно будет набрать cast.Однако во всех других случаях вы можете просто использовать тип по умолчанию HTMLElement.Он по-прежнему должен позволять вам выполнять определенные операции над объектом, только не связанные с CustomElement.Так что не все службы должны знать, что это CustomElement объект.

Для насмешки вы можете создать класс CustomElementMock, который наследуется от CustomElement

class CustomElementMock extends CustomElement {
}

.по-прежнему типа CustomElement, и ваш исходный код все равно должен его принять.Однако внутри смоделированного класса вы можете перезаписать все функции, чтобы либо ничего не делать, либо возвращать смоделированные данные.

Answer 2

Использование document.createElement('my-element') as CustomElement