Website-Suche

Typescript wie man erkennt, dass ein Element ein Kontrollkästchen ist, damit element.checked nicht rot unterstrichen ist

Ich überprüfe den Eingabetyp eines Elements, z. B. Checkbox in TS. Jetzt bin ich sicher, dass ich ein Element habe, das eine Checkbox ist, also sollte dieses Element die Eigenschaft checked haben. Aber wenn ich einfach mache

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

als dass es funktioniert, aber element.checked ist rot unterstrichen. Ich denke, dass ich einfach von HTMLElement zu etwas wie CheckboxElement umschreiben muss, habe aber nichts Passendes für diese Umwandlung gefunden. Wie wird man das los? Ich stoße auch auf dieses Problem im Fall von element.value.

Antwort #1

Es gibt keinen "checkbox"-Elementtyp, da es sich nur um ein "input"-Element mit dem Typ checkbox handelt. Sie könnten den Typ HTMLInputElement verwenden/asserten, der eine Erweiterung von HTMLElement ist:

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;
}

Antwort #2

Die if-Anweisung ist, wie andere bereits erwähnt haben, nicht notwendig. Es gibt jedoch mehrere Möglichkeiten, den Compiler zufrieden zu stellen:

// 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;

Verwandte Artikel