logo-tera
logo-tera

Using Typescript in your next Javascript Project

  • Javascript
  • Software Development

05 April 2018

Share
facebookfacebookfacebook
banner

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:

ArtFr1.png

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:

ArtFr2.png

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:

ArtFr3.png

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

ArtFr4.png

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.

ArtFr5.png

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:

ArtFr6.png

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:

ArtFr7.png

Now when we start typing:

ArtFr8.png

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)

  • Web Application Developers

Related Articles

  • Business
  • Agile
  • Software Development

Hiring Dev Professionals | Teravision Technologies

17 June 2024
cards-img-web
  • Agile
  • Mobile App Development
  • Software Development
  • Startups

5 cool Healthcare apps to check out while you envision yours

17 April 2024
cards-img-web
  • Agile
  • Digital Agencies
  • Software Development
  • Software Outsourcing

3 Tips for Marketing Agencies and Their Dedicated Software Development Team.

01 April 2024
cards-img-web
Let's
build
together

SET UP A DISCOVERY CALL WITH US TODAY AND accelerate your product development process by leveraging our 20+ years of technical experience and our industry-leading capability for quick deployment of teams with the right talents for the job.