Using Typescript in your next Javascript Project

One of the main pain points for web application developers working with javascript is the fact that you have no idea what type of value a given method will receive or return. For instance, given the following function:

I could infer that the two values x and y should be numbers and it would return a number, but this may not necessarily be the case. In fact I could basically send two strings x = “3” and y = “4”, this would make it consider a string and concatenate it and return 34. Also the return value of the operation could be anything. Now let’s look at it written a bit differently:

This way of writing the function makes it a bit more clear as to what is  expected from the method… Basically it’s telling the developer that this method receives 2 numbers x and y and returns a number value. This helps greatly when wanting to have type safety in your code. This is possible thanks to Typescript. So let’s start by explaining what typescript is.

Typescript is a javascript superset (created by Microsoft) that allows you to create code in a typesafe manner, it also allows you to use ES6 and ES7 features of javascript which are not yet 100% compliant in all browsers. The code is then converted to Vanilla Javascript (ES5) so that browsers can understand it. For this blog post I’ll be focussing on the type safety of the code and its benefits, on a future blog post I’ll dig more into the modern Javascript Features.

So if we were to transpile the above code, the outcome would be exactly like the first example.

So I’m guessing you’re thinking how would this benefit web application developers? The type of safety lies on the Editor/IDE you are using in the end. For the next examples, I’ll be using the Visual Studio Code Editor which comes with excellent support for Typescript. Plugins exist for most Editors and IDE’s But VS CODE comes baked already in.

So let’s continue with the example we were working on. If I was to assign the return value of the function to a variable but made a mistake with the type this is what would happen:

As you can see the editor is reporting an error on the: assignment, if we were to see more details it would show the following

The code editor is capable of telling me that the return value is of type number so the developer can become aware of this mistake.

Now let’s try another case: let’s make a mistake on the parameters passed and see what it tells me.

As you can see it’s telling me that the parameter has a mistake. This is, in particular, a great feature and allows developers to write cleaner code so that others can see how the method is used.

Another interesting feature of using Type safety is Intellisense. When using an ide or editor like VS CODE you can have auto-completion of code let’s see an example:

So here we can see how the editor is showing me exactly what the code receives and returns making it a lot easier to understand.

Let’s make it even more interesting and add a comment to the function like this:

Now when we start typing:

As you can see this can help drastically improve your developer workflow and make the code readable.

I do recommend you try typescript, it has a lot more features that I will be covering in future posts. It is used by major corporations for creating elegant code, one of them is Angular (Google), the entire framework was rewritten using typescript and it is currently the go-to code to build with the framework.

Below link with more information on Typescript and a list of IDE’s Plugins that currently support this workflow. See you in the next post.

Typscript

https://www.typescriptlang.org/

IDE’s and Editors

• IntelliJ WebStorm (Natively supported, Also available as a plugin for other IDES)
• Sublime (Plugin - TypeScript - Packages - Package Control)
• Atom (Plugin - atom-typescript)
• Visual Studio Code (Natively Supported)
• Visual Studio 2015 / 2017 (Natively Supported)