You have trouble with the error message: “Property ‘checked’ does not exist on type ‘HTMLElement'” when working with the ‘HTMLElement’ type in TypeScript. The reason is that the element of type ‘HTMLElement’ has no property ‘checked’. You must type the element as ‘HTMLInputElement’ to resolve this problem. Keep reading for further information.
Why does this error occur?
You will receive the error message: “Property ‘checked’ does not exist on type ‘HTMLElement'” in TypeScript when accessing the ‘checked’ property on the element of type ‘HTMLElement’. To illustrate, let me reproduce the error.
We create a file named ‘home.html’ containing the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Demo</title>
</head>
<body>
<input type="checkbox" name="commit" id="commit" />
<script src="./src/home.ts"></script>
</body>
</html>And here is the ‘home.ts’ file where the error occurs:
// Access to the element using document.getElementById() method
const checkableElement = document.getElementById("commit");
if (checkableElement != null) {
input.checked = true;
}Error:
Error: Property 'checked' does not exist on type 'HTMLElement'.ts(2339)For more clarification on the cause of this error. The ‘document.getElementById()’ method returns the element of type ‘HTMLElement’ or null, while the ‘checked’ property does not exist on elements of that type. Therefore, an error will inevitably appear when you access the ‘checked’ property on the ‘checkableElement ‘ element.
Solved – Property ‘checked’ does not exist on type ‘HTMLElement’
To overcome this error, you need to change the element’s type to ‘HTMLInputElement’ using type assertion.
Type assertion is a logic mechanism of TypeScript that allows you to set the type of a variable and tell TypeScript not to infer the type of the variable itself. Now we can manually manage the variable type or the type returned from a function.
Continuing with the example above, let’s see how we solve this problem:
// Type the element as an 'HTMLInputElement' using the type assertion
const checkableElement = document.getElementById("commit") as HTMLInputElement | null;
if (checkableElement != null) {
input.checked = true;
}In the above example, we use union type because the ‘document.getElementById()’ method could still return ‘null’ if the ‘id’ we provided does not exist.
The if statement ensures that the element we are working with is not ‘null’ before accessing its ‘checked’ property to avoid other unexpected errors.
Now the error seems to have been solved. You can continue working on your TypeScript project.
Summary
In summary, we just showed you how to fix the “Property ‘checked’ does not exist on type ‘HTMLElement'” error in TypeScript. To access the ‘checked’ property without the error, you must type the element as an ‘HTMLInputElement’ using the type assertion. That’s the end of this article. Hopefully, the information we provide will be helpful to you.
My name’s Christopher Gonzalez. I graduated from HUST two years ago, and my major is IT. So I’m here to assist you in learning programming languages. If you have any questions about Python, JavaScript, TypeScript, Node.js, React.js, let’s contact me. I will back you up.
Name of the university: HUST
Major: IT
Programming Languages: Python, JavaScript, TypeScript, Node.js, React.js