Typescript cómo saber que un elemento es un checkbox, para que element.checked no esté subrayado en rojo
Estoy verificando el tipo de entrada de algún elemento, por ejemplo un checkbox en TS. Ahora estoy seguro de que tengo un elemento que es un checkbox, por lo que este elemento debería tener la propiedad checked. Pero si simplemente hago
element: HTMLElement
if (element.InputType.toLowerCase() == "checkbox"){
element.checked = true;
}
que está funcionando, pero element.checked está subrayado en rojo. Creo que simplemente tengo que volver a escribir de HTMLElement a algo como CheckboxElement, pero no encontré nada adecuado para esta conversión. ¿Cómo deshacerme de esto? También me he encontrado con esto en el caso de element.value
Respuesta #1
No existe un tipo de elemento "checkbox", ya que solo es un elemento "input" con el tipo checkbox. Podrías usar/afirmar con el tipo HTMLInputElement, que es una extensión de 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;
}
Respuesta #2
La declaración if no es necesaria como otros ya han señalado. Sin embargo, hay varias maneras de hacer feliz al compilador:
// 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;
