“HTMLElement”类型上不存在属性“connectedCallback”答案

【问题标题】：Property 'connectedCallback' does not exist on type 'HTMLElement'“HTMLElement”类型上不存在属性“connectedCallback”
【发布时间】：2020-03-11 22:37:39
【问题描述】：

我有一个项目，一年后我又回来了。类似于以下代码的东西曾经可以工作但不再工作：

interface HTMLElement {
    attributeChangedCallback(attributeName: string, oldValue: string, newValue: string): void;
    connectedCallback(): void;
    disconnectedCallback(): void;
    observedAttributes: string[];
}

export default class TestElement extends HTMLElement {
    connectedCallback(): void {
        super.connectedCallback();
    }
}

我现在收到 Property 'connectedCallback' does not exist on type 'HTMLElement' 错误。这与这里的许多问题不同，人们需要更具体地确定使用哪种类型。我在这里扩展HTMLElement。 HTMLElement 的默认声明不包含任何自定义元素的内容，因此我有一段时间一直在使用界面来填写我一直在使用的内容。我现在还必须做些什么才能使其正常工作吗？

【问题讨论】：

是Property 'connectedCallback' does not exist on type 'HTMLElement' tslint 错误，还是构建错误，还是？
接口不能实例化，可以像class TestElement implements HTMLElement一样实现。
@Yeheshuah 这是构建错误。
@ArtemBozhko 是的，我知道这一点，但问题是 HTMLElement 必须在被转译的 JavaScript 中扩展以创建自定义元素。我需要一种让 TypeScript 理解 HTMLElement 确实有 connectedCallback 的方法。

标签： typescript

【解决方案1】：

您可以在 *.d.ts 文件中扩展现有接口

interface HTMLElement {
    connectedCallback(): void;
}

或

您可以直接在*.ts文件中扩展现有接口

declare global {
    interface HTMLElement {
        connectedCallback(): void;
    }
}

【讨论】：

行得通！将 d.ts 文件添加到我在 tsconfig 中的包含中，然后很高兴。谢谢！
IINM，connectedCallback 应该是可选的，即 'connectedCallback?(): void;'。