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

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');

您还需要在 CustomElement 中继承 HTMLElement 类：

class CustomElement extends HTMLElement {

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

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

对于模拟，您可以创建一个继承自 CustomElement 的 CustomElementMock 类

class CustomElementMock extends CustomElement {
}

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

Answer 2

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