Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

I have a checkbox on my html file.

<input id="is3dCheckBox" type="checkbox" checked="checked" />
and I want to know in the .ts file if this checkbox is checked or not.

What cast should be done after I get this element in order to check it?
You just need to use a type assertion to tell TypeScript it is an HTMLInputElement:
var element = <HTMLInputElement> document.getElementById("is3dCheckBox");
var isChecked = element.checked;
Update:
  
Any ideas why var element =  document... works but
  var element: HTMLInputElement = document... does not?
When you use getElementById the element returned could be any kind of HTML element. For example, it could be a paragraph tag. For this reason, the type definition for this DOM method returns a very general HTMLElement type.
When you try the following:
var element: HTMLInputElement = document.getElementById('is3dCheckBox');
The compiler warns you that the result of getElementById is not an HTMLInputElement, or a sub-type of HTMLInputElement (because it is actually a super-type of the one you want).
When you know the element type, it is perfectly normal to use a type assertion to tell the compiler the type. When you use the Type Assertion, you tell the compiler you know better.
In some cases, the compiler will still warn you when using a type assertion, because it can tell that the assertion is likely to be a mistake - but you can still force it, but widening the type first:
var isChecked = (<HTMLInputElement><any>myString).checked;
The string variable is widened to the any type, before asserting the HTMLInputElement. Hopefully you won't need to use this kind of type assertion too often.
                Any ideas why var element = <HTMLInputElement> document... works but var element: HTMLInputElement = document... does not? Also, I couldn't find this syntax on the TS Handbook, care to point your source?
– Kostas
                May 3, 2015 at 17:39
                @Kostas, the solution provided by Fenton is not a standard way of handling the task you're trying to accomplish. The solution is pure Javascript (but type casted to HTMLInputElement for typescript), that's the reason you aren't able to find it in the TS Handbook.
– Aiguo
                Jun 19, 2017 at 1:25
                @Kostas you'll find it in the handbook under "Basic Types" -> "Type Assertions". This is part of the TypeScript language specification, and is recommended for situations where you know more about the type than the compiler: typescriptlang.org/docs/handbook/…
– Fenton
                Jun 19, 2017 at 8:41
For documet.getElementById you can use:  
let element = <HTMLInputElement> document.getElementById("is3dCheckBox");  
if (element.checked) { you code }
For documet.getElementsByName you can use:
let element = <any> document.getElementsByName("is3dCheckBox");  
if (element.checked) { you code }
If you use tsx files like i did you cant use the angle bracket sintax, you have to use "as"
  let element  =  document.getElementById("is3dCheckBox") as HTMLInputElement; 
  if(element.checked){
    // TODO
you can read more here
https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#type-assertions
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.