Typescript how to tell that element is checkbox, so element.checked is not red underlined

Question

I am checking for input type of some element, fe checkbox in TS. Now I am sure that I have element that is checkbox, so this element should have property checked. But if I simply do

element: HTMLElement
if (element.InputType.toLowerCase() == "checkbox"){
    element.checked = true;
}

than it is working, but element.checked is red underlined. I think that I simply have to retype from HTMLElement to something like CheckboxElement, but did not find anything suitable for this conversion. How to get rid of this ? I have facing this also in case of element.value

Answer 1

There is no "checkbox" element type as it is just an "input" element with type checkbox. You could use/assert with the type HTMLInputElement which is an extension of HTMLElement:

var element: HTMLInputElement;
//... You still need to do all the null checks as necessary
//The below check may be irrelevant depending upon what you are actually doing. 
//But i am just adding here to show that you need to refer to the property "type" and 
//not "InputType"
if (element.type.toLowerCase() == "checkbox") { 
     element.checked = true;
}

Answer 2

The if statement is not necessary as others have already stated. However, there are several ways how to make compiler happy:

// 1st (best variant in my opinion)
let e1: HTMLInputElement; // type of variable
e1.checked = true;

// 2nd (sometimes a good option too)    
let e2 = document.getElementById('myInput');
(<HTMLInputElement>e2).checked = true; // "hint" the type to TypeScript

// 3rd (a hack that may come handy sometimes)
let e3 = document.getElementById('myInput');
e2['checked'] = true;