javascript - 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 在这里抛出错误: 错误 TS2339:“HTMLElement”类型上不存在属性“config”。

知道如何解决这个问题吗？

编辑:建议强制转换元素的类型。虽然这有效，但它确实带来了两个问题:

1. 我不一定希望每个服务都使用自定义元素 了解自定义元素的类
2. 如果我 mock 这个习俗 测试元素，服务中的硬编码自定义元素 不允许 mock 。

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

Answer 1

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

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

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

class CustomElement extends HTMLElement {

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

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

为了进行模拟，您可以创建一个继承自 CustomElement 的 CustomElementMock 类

class CustomElementMock extends CustomElement {
}

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