How To Solve “Property ‘select’ does not exist on type HTMLElement” in TypeScript

There is a common error when working with DOM in TypeScript that is the “Property ‘select’ does not exist on type HTMLElement” error. The error occurs when you use the select method on HTMLElement. To fix this error, we use Type Assertion. Let’s get started.

The cause of the error “Property ‘select’ does not exist on type HTMLElement”

This error occurs when you try to use the select method on an object with data type HTMLElement, which is returned by default from the document.getElementById method. Let’s see an example of the code that causes the error.

Error Example:

const inputName = document.getElementById("input-name");

// Use the select method on an object with data type HTMLElement
inputName.select();

Output:

Property 'select' does not exist on type 'HTMLElement'. Did you mean 'onselect'?

In the above example, we mistakenly thought that the document.getElementById() method would return the data type of HTMLInputElement, but actually, the returned data type is HTMLElement, and the select() method does not exist on the data type HTMLElement, so the error occurs

Solutions for Error “Property ‘select’ does not exist on type HTMLElement”

Use Type Assertion

TypeScript doesn’t understand that we want to work on an object whose data type is HTMLInputElement, so in order for the program to understand what we want, we will use Type Assertion with an as statement followed by the data type which we want to work with. Now TypeScript understands our intention, and the error is resolved.

Example of correct code:

// Use Type Assertion to convert to type HTMLInputElement
const inputName = document.getElementById("input-name") as HTMLInputElement;

// Now we can use the select() method
inputName.select();
const check = inputName instanceof HTMLInputElement &&
    "inputName is instance of HTMLInputElement type";
console.log(check);

Output:

inputName is instance of HTMLInputElement type

In the above code, we use Type Assertion to let the program understand that we are working on the HTMLInputElement data type. Then we call the select() method on inputName. There is no error because in the HTMLInputElement data type, there is a select() method. To be sure, we use instanceof statement to check the data type.

Use Type Assertion with union

We should use union type HTMLInputElement or null because maybe the document.getElementById() method will return a null data type if the id we get does not exist in the DOM tree.

Example:

const inputName = document.getElementById(
    "input-name"
) as HTMLInputElement | null;

Summary

Now we understand why “Property ‘select’ does not exist on type HTMLElement” error appears. When you want to use a certain data type, use type assertion to get the data type you want. Thanks for reading, and happy coding!

Carolyn Hise

Carolyn Hise has three years of software development expertise. Strong familiarity with the following languages is required: Python, Typescript/Nodejs, .Net, Java, C++, and a strong foundation in Object-oriented programming (OOP).