The argument provided, labeled as 'Element', cannot be matched with the parameter labeled as 'HTMLElement'

Question

The argument provided, labeled as 'Element', cannot be matched with the parameter labeled as 'HTMLElement'

const labelEl: HTMLElement = document.createElement('label')
const isElOfNeededType = (el: HTMLElement): boolean =>
    ["INPUT", "TEXTAREA"].includes(el.tagName);

let result

if (isElOfNeededType(labelEl.nextElementSibling)) {
    result = true
}

Take a look at my code playground: here

Can you help me understand why I'm receiving an error regarding labelEl.nextElementSibling?

The argument of type 'Element' isn't compatible with the parameter type 'HTMLElement'

Isn't HTMLElement supposed to extend Element?

2. (not crucial, but some clarification would be appreciated) Why does TS playground show an error for [ ].includes even though I've specified Config -> Target = esnext?

typescript

Answer 1

Answer №1

labelEl.nextElementSibling is classified as a Element. Take a look at the definition in Definitely Typed. Therefore, your code attempts to provide an Element when an HTMLElement is needed.

While it's true that HTMLElement extends Element, you cannot always substitute an Element for an HTMLElement because the former may lack certain properties of the latter. However, you can substitute an HTMLElement for an Element since an HTMLElement includes all properties of an Element.

Since you are specifically interested in the tagName property, which is found on Element, I recommend adjusting your code to utilize Element.

const labelEl: HTMLElement = document.createElement('label')
const isElOfNeededType = (el: Element): boolean =>
    ["INPUT", "TEXTAREA"].includes(el.tagName);

let result

if (isElOfNeededType(labelEl.nextElementSibling)) {
    result = true
}

Answer 2

labelEl.nextElementSibling is classified as a Element. Take a look at the definition in Definitely Typed. Therefore, your code attempts to provide an Element when an HTMLElement is needed.

While it's true that HTMLElement extends Element, you cannot always substitute an Element for an HTMLElement because the former may lack certain properties of the latter. However, you can substitute an HTMLElement for an Element since an HTMLElement includes all properties of an Element.

Since you are specifically interested in the tagName property, which is found on Element, I recommend adjusting your code to utilize Element.

const labelEl: HTMLElement = document.createElement('label')
const isElOfNeededType = (el: Element): boolean =>
    ["INPUT", "TEXTAREA"].includes(el.tagName);

let result

if (isElOfNeededType(labelEl.nextElementSibling)) {
    result = true
}

Answer 3

Answer №2

Though the circumstances were different, I encountered a similar issue.

As pointed out by @Colliere in a previous response, the problem lies in the fact that .nextElementSibling returns an Element instead of an HTMLElement which is often required.

A simple solution would be to convert the type to HTMLElement before using it.

In your case, you can utilize type assertion like so:

const labelEl: HTMLElement = document.createElement('label')
const isElOfNeededType = (el: HTMLElement): boolean =>
    ["INPUT", "TEXTAREA"].includes(el.tagName);

let result

if (isElOfNeededType(labelEl.nextElementSibling as HTMLElement)) {
    result = true
}

When using JSDOC, I had to incorporate JSDOC type casting with additional parentheses:

    const nextElementSibling = (
        /** @type {HTMLElement} */
        (labelEl.previousElementSibling)
    );

Answer 4

Though the circumstances were different, I encountered a similar issue.

As pointed out by @Colliere in a previous response, the problem lies in the fact that .nextElementSibling returns an Element instead of an HTMLElement which is often required.

A simple solution would be to convert the type to HTMLElement before using it.

In your case, you can utilize type assertion like so:

const labelEl: HTMLElement = document.createElement('label')
const isElOfNeededType = (el: HTMLElement): boolean =>
    ["INPUT", "TEXTAREA"].includes(el.tagName);

let result

if (isElOfNeededType(labelEl.nextElementSibling as HTMLElement)) {
    result = true
}

When using JSDOC, I had to incorporate JSDOC type casting with additional parentheses:

    const nextElementSibling = (
        /** @type {HTMLElement} */
        (labelEl.previousElementSibling)
    );

The argument provided, labeled as 'Element', cannot be matched with the parameter labeled as 'HTMLElement'

Answer №1

Answer №2

Similar questions

Protractor experiencing difficulty recognizing Angular functionality

`Why does the npm test command in vue2 source code fail with the error "Type ... is not assignable to type ..."?`

It appears that Typescript mistakenly interprets a class or type as a value, indicating that "'Classname' is being referred to as a value but used as a type here."

Configuring routes for Angular4 router is a vital step in creating a

What are the steps for integrating angular2 starter with express?

Unable to choose Typescript as a programming language on the VSCode platform

Error encountered when packaging WebAssembly using Rollup

How do you obtain the string name of an unknown object type?

Tips for integrating JavaScript libraries into TypeScript build process in Visual Studio

What is the recommended method for deleting sequelize.connectionManager.getConnection according to the Sequelize documentation?

Unable to retrieve a random element from an array in Angular 10

The issue of a mocked MobX store in Jest not resetting between tests is causing problems

Tips for passing parameters from an anchor click event in TypeScript

Obtaining the interface for a Typegoose class model

Issue occurred while trying to deploy Firebase functions following GTS initialization

Properties are determined by both the type and sub-type

Deriving the type of a generic parameter from another generic parameter in TypeScript

Using Typescript to Declare Function and React Component Types

Tips on incorporating esbuild extensions in the template.yaml file of AWS SAM

Removing empty options from a select dropdown in Angular 9