Let's get to the point now, my assignment consisted of writing an application where the user is able to see the latest movies, using the TMDB service. In another view, I had to implement a "Search a movie" feature, which needed to show results as you typed. The requirements included writing code for a performant infinite scroll. You can see a demo of how the finished application works here.

I am not going to talk about the whole app, this is just to give you an idea of the things you can do with the approach I propose. For the sake of simplicity, I am going to focus on a simple part, the navigation to “Latest movies” view and the “Search movie” view. If you are curious, the complete assignment is my repo.

I wanted the resulting HTML to look like the plain HTML below.

This is not feasible to do without the help of the fancy frameworks, and I didn't have enough time to develop a framework of my own. And of course, writing a full framework just for an assignment is an overkill.

So I needed to add the nodes with JavaScript, using the plain document.createElement method. I had to either remember by heart all the methods for the elements I was creating or spend a lot of time at Mozilla's MDN site. This is very error-prone, not to mention that I only found errors at runtime. Just imagine how much time I would have wasted, and time was ticking for me.

So I decided to use TypeScript to help me with that.

I started with something like this:

Let me tell you something about types for the DOM in TypeScript since they are awesome. Writing this code using this language is actually quite easy because of all the help the IDE can give you in terms of auto-completion.

This is how the document.createElement is typed with TypeScript:

As you can see, the tagName is of type K , which can only be one of the possible keys of the HTMLElementTagNameMap interface. So you get compile-time checks on the tag name you pass to the createElement function.