打字稿和自定义元素属性编译问题

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 个问题：

我不一定想要每个使用自定义元素的服务了解自定义元素的 class
如果我嘲笑习俗测试元素，服务中的硬编码自定义元素不允许嘲笑。

这是解释它的要点：https://gist.github.com/YonatanKra/de42be2fa5499157169ef141ba377998

Answer 1

使用document.createElement('my-element') as CustomElement

Answer 2

您需要将元素转换为预期的类型，因为在这种情况下 Typescript 无法知道类型。

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

您还需要继承 CustomElement 中的 HTMLElement class：

class CustomElement extends HTMLElement {

根据进一步的问题编辑答案：

显然，如果您想访问 CustomElement 对象的属性，则需要键入 cast。但是在所有其他情况下，您可以只使用默认的 HTMLElement 类型。它应该仍然允许您对对象执行某些操作，只是没有任何 CustomElement 相关。所以不是每个服务都需要知道它是一个 CustomElement 对象。

为了模拟，你可以创建一个继承自 CustomElement

的 CustomElementMock class

class CustomElementMock extends CustomElement {
}

模拟版本仍然是 CustomElement 类型，您的原始代码应该仍然接受它。但是在模拟的 class 中，您可以覆盖所有功能以不执行任何操作或返回模拟数据。

打字稿和自定义元素属性编译问题

Typescript and custom elements properties compilation issue

javascript

typescript

custom-element