Property 'connectedCallback' does not exist on type 'HTMLElement'

user_1993890 0
Viewed 613

I have a project that I've returned to after a year. Something similar to the code below used to work but no longer works:

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();
    }
}

I now get a Property 'connectedCallback' does not exist on type 'HTMLElement' error. This isn't like many of the multitudes of questions on here where people needed to be more specific as to which type to use. I'm literally extending HTMLElement here. The default declarations for HTMLElement doesn't contain any of the custom element stuff, so I have for a while now been using an interface to fill in for what I've been using. Is there something additional I must be doing to get this working now?

typescript
1 Answers

You can extend the existing interface in *.d.ts file

interface HTMLElement {
    connectedCallback(): void;
}

OR

You can extend the existing interface directly in the *.ts file

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