Argument of type 'HTMLElement' not assignable to type in TS

avatar

Borislav Hadzhiev

Last updated: Mar 31, 2022

banner

Photo from Unsplash

Argument of type 'HTMLElement' not assignable to type in TS #

Use a type assertion to solve the "Argument of type 'HTMLElement' is not assignable to parameter of type" error, e.g. myFunction(element as HTMLInputElement);. The types of the passed in argument and the expected parameter have to be compatible.

argument type htmlelement not assignable parameter

Here are 2 examples of how the error occurs.

index.ts
const element = document.getElementById('example') as HTMLElement; function example1(el: HTMLInputElement) { return el; } // ⛔️ Argument of type 'HTMLElement' is not assignable // to parameter of type 'HTMLInputElement'. example1(element); // ----------------------------------------------- function example2(el: HTMLCanvasElement) { return el; } // ⛔️ Argument of type 'HTMLElement' is not assignable // to parameter of type 'HTMLCanvasElement'. example2(element);

The reason the error occurs in the first example is - the function expects a parameter of type HTMLInputElement and we're passing it a parameter of type HTMLElement.

In the second example, the function expects a parameter of type HTMLCanvasElement, and we're passing it a parameter of type HTMLElement.

We can use a type assertion to solve the error.

index.ts
const element = document.getElementById('example') as HTMLElement; function example1(el: HTMLInputElement) { return el; } example1(element as HTMLInputElement); // 👈️ type assertion function example2(el: HTMLCanvasElement) { return el; } example2(element as HTMLCanvasElement); // 👈️ type assertion
You have to use the specific parameter type that is mentioned in your error message.

Type assertions are used when we have information about the type of a value that TypeScript can't know about.

We effectively tell TypeScript that the element variable stores a value of a specific type and not to worry about it.

The type you have to use in the type assertion is the type of the parameter the function expects.

The cause of the "Argument of type 'HTMLElement' is not assignable to parameter of type" error is - we are passing an argument of type HTMLElement to a function that has a parameter of a different type.

You could also use a type assertion when selecting the element.

index.ts
// 👇️ use type assertion here const element = document.getElementById('example') as HTMLInputElement; function example1(el: HTMLInputElement) { return el; } example1(element);

We typed the element variable as an HTMLInputElement element, which is exactly the type of parameter the example1 function expects.

When calling a function, we have to make sure the type of the passed-in argument is compatible with the type of the expected parameter.

If you defined the function, you can also widen the type of its expected parameter using a union type.

src/index.ts
const element = document.getElementById('example') as HTMLElement; function example1(el: HTMLInputElement | HTMLElement) { return el; } example1(element);

Now the example function expects a parameter of type HTMLInputElement or HTMLElement, so passing it an argument of type HTMLElement satisfies the expected parameter type.

Conclusion #

Use a type assertion to solve the "Argument of type 'HTMLElement' is not assignable to parameter of type" error, e.g. myFunction(element as HTMLInputElement);. The types of the passed in argument and the expected parameter have to be compatible.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.