The 'connectedCallback' property is not found in the 'HTMLElement' type

Question

The 'connectedCallback' property is not found in the 'HTMLElement' type

After taking a break from my project for a year, I came back to find that certain code which used to work is now causing issues:

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

An error message stating

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

is now appearing. Even though I am extending the HTMLElement class directly, the default declarations for HTMLElement do not include any of the custom element functions. I have been using an interface to compensate for this absence. Is there something else I need to do in order to make it work correctly?

typescript

Answer 1

Answer №1

If you want to make additions to an existing interface, you have a couple of options:

interface HTMLElement {
    connectedCallback(): void;
}

Alternatively, you can directly extend the existing interface within your *.ts file like this:

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

Answer 2

If you want to make additions to an existing interface, you have a couple of options:

interface HTMLElement {
    connectedCallback(): void;
}

Alternatively, you can directly extend the existing interface within your *.ts file like this:

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

The 'connectedCallback' property is not found in the 'HTMLElement' type

Answer №1

Similar questions

I am struggling to delete real-time records in Angular using Firestore

How can I dynamically replace a specific element inside a .map() function with a custom component when the state updates, without replacing all elements at once?

What could be preventing my state from changing to false when I click the close button on the menu?

The metadata for Company#companyTypesLinks could not be located. Please verify that the entity object has been correctly specified

Add the slide number and total count in between the navigation arrows of the owl carousel

Merging declarations fails to function properly following the release of the npm module

Executing an individual .ts file within a Next.js application using ts-node for the purpose of testing

The "ng2-CKEditor" package is experiencing compatibility issues with TypeScript in Angular 2

Tips for incorporating conditional types into function parameters based on existing input

Displaying an error message following the dynamic retrieval of the input field's value

Sorting arrays of objects with multiple properties in Typescript

What is the solution for resolving an Element that implicitly has said it has an 'any' type as the expression of type 'string' cannot be used to index the type?

Set an array to a JSON object as a fresh entity

Managing Observable<Person[]> in ng-bootstrap typeahead instead of Observable<string[]>: a complete guide

Derivation of the general function parameter

I am interested in adding a personalized icon to the progress bar in Material-UI

Nest is having trouble resolving dependencies for this service

Exploring the use of MockBackend to test a function that subsequently invokes the .map method

Can I retrieve the return type of useFetch in Nuxt3?

Arranging an array of arrays based on the mm/dd/yyyy date field