时间戳

首页 > 解决方案 > 打字稿和自定义元素属性编译问题

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

问题描述

我有这个自定义元素：

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'.

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

编辑：建议转换元素的类型。虽然这可行，但它确实带来了两个问题：

  1. 我不一定希望使用自定义元素的每个服务都知道自定义元素的类
  2. 如果我为测试模拟自定义元素，服务中的硬编码自定义元素将不允许模拟。

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

标签： javascripttypescriptcustom-element

解决方案

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

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

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

class CustomElement extends HTMLElement {

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

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

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

class CustomElementMock extends CustomElement {
}

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

推荐阅读