Getting hold of inputs and casting using the as operator

In todo-it.ts, add the following line: const todoInput: HTMLInputElement = document.getElementById('todoInput') as HTMLInputElement;.

This allows us to retrieve the todoInput input object from the DOM. We'll use that to get the value of the input.

The Document Object Model (DOM) is the in-memory representation of a page that web browsers create once they have loaded your page. The DOM evolves while users interact with the page, usually through event handlers that modify its structure. Web browsers include an API to interact with the DOM, just like we did previously. Through that API, you can easily query and modify the DOM. DOM manipulation is actually the bread and butter of all web frameworks. If you want to know more, have a look here: https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction

This allows us to mention a few more things about TypeScript.

TypeScript includes type definitions for some standard libraries, including the DOM API. As you saw before, we did not declare HTMLInputElement, but TypeScript already knows about it.

Check out https://github.com/Microsoft/TypeScript/blob/master/src/lib/dom.generated.d.ts and try to find the definition of HTMLInputElement in it. This file (and others) is included automatically when you compile using tsc.

In the preceding code, did you notice the as keyword? Note that as is the cast operator; it simply lets you tell TypeScript to consider a type as if it was another one. In this example, we did it because document.getElementById(...​) returns a generic HTMLElement element while we know for a fact that our element should be an HTMLElement one.