TypeScript: A JavaScript BodyGuard To Your Rescue!

BUGS! BUGS! BUGS!

Every developer out there must have faced these words in their lives. Bugs are a part of a developer’s life. Whatever amount of code we write everyday has probability to have some bugs.

As the number of bugs goes on increasing, our overall code quality decreases and no-one wishes of having such bugs in their code 😦

Personally I have also felt that, In JavaScript we face more bugs compared to other compile time languages. The reason behind this point of mine is, JavaScript is an interpreted language. It gets interpreted in the browser line by line.

So unless and until your code is interpreted in the browser, you don’t get to know about any syntax errors or bugs in your code (unlike compile time languages where the errors are stated at compilation itself before the code is executed). Also JavaScript is loosely typed, this increases the possibility of more type errors in code.

So what will help us or can save us from such errors and bugs in JS?
Don’t worry! We have a body guard to our rescue — TypeScript

What is TypeScript ?

“TypeScript is a superset of javascript. It is an open-source language which builds on JavaScript, by adding static type definitions.”

TypeScript has been growing in popularity from last few years. It was listed in the top 5 promising languages in 2020. It was designed by Anders Hejlsberg (designer of C#) at Microsoft.

So many people have this confusion that they assume typescript as a completely different language than JavaScript. That’s not true
Typescript is just a superset of JavaScript, that means only something extra (static types & new features) has been added to JavaScript to form TypeScript.

This also means that all your javascript code is also typescript code (just the missing thing would be static-types).

Oh wait! But browsers can’t execute TypeScript!

Yes, that’s right! Browsers can’t execute typescript directly because they are trained or programmed in such a way that they can execute only JavaScript.

So we need to convert our typescript code into javascript before executing it in browser and this work is done by the TypeScript compiler.

To compile a typescript file using typescript compiler –

> tsc filename.ts

We can configure the typescript compiler according to our requirements to compile the typescript code into targeted version of JavaScript i.e. ES3, ES5, ES6 etc. There are many other compiler options provided which we can use to manage the strictness level of our compilation.

We can manage all of these configurations through the tsconfig.json file in our typescript project.

Why to use TypeScript ?

We have seen what typescript is, now let’s see what all benefits it provide

So these all are the benefits typescript –

• Early Detection of Errors
  Now this is one of the main advantages of using typescript. Typescript helps in spotting out all syntax & type errors at compile time itself. This saves developers time by early detection and fixing errors.
  Let’s see an example
  Here is a code snippet wrote in javascript

We can see that in above example we had a simple object with two properties ‘height’ and ‘width’. 
A simple multiplication for calculating the area was done but we accessed a wrong property from object (heigth instead of height) but still javascript didn’t gave us any error and we got the wrong output ie NaN.

Now imagine you had done this mistake while working over a project and you didn’t caught this bug while development. Now you have moved on some different task and you get this bug assigned from the QA.
It would be really frustrating for you to create a new branch for this bug fix and all of this process, just to fix a spelling mistake!!

Let’s see the same code example in TypeScript.

The only additional thing we have done here is we have defined a static type for the object on the first line and assigned the type ‘Obj1’ to our object storing data.

Now in the IDE itself we get to know about the error by red underline for the wrong spelling and on hovering over the error a complete message stating “heigth property does not exist on type”. Even if we miss such errors in IDE, we would get it in compilation process where we need to fix it to get successful compilation.

This will help the developer fix the error there itself and save a lot of time.

• Improves Code Readability
  Static types used in the code helps the user understand the code better and find out what type of data is stored in variables and the code flow efficiently.
• Promotes Dependable Refactoring
  Dependable refactoring is one of the best advantages of typescript. In JavaScript whenever you refactor some code there are chances of breaking other code modules.
  But with typescript this fear has been kicked out. With typescript you can completely depend upon it to find out any errors that may occur while refactoring the code and typescript will inform you about these errors at the compilation itself. This will help you to fix all those errors and have a reliable code at the end of refactoring.

“With TypeScript Orienting oneself in complex, large-scale systems is not a nightmare anymore.”

• Improved IDE Support
  With the type definations or static types used in code the IDE’s provide more and better intellisense and development support.

Along with all this, TypeScript also provides Type Inference System and other OOP features which improve the code quality and the developer’s efficiency.

Type Inference System — 
When user doesn’t provides the type information to a variable, typescript makes use of type inference system to infer the type to variable.
Type inference system is the method of assigning type to variable based on the assigned values.

In the above first example you can see that x was not assigned any type explicitly but still typescript asssigned type ‘number’ to x. This was done with the help of Type Inference System. It checked the assigned value and assigned respective type to the variable.

In the second example, combination of values has been assigned to x i.e. [0,1,null]. So in such cases Type Inference System uses the “Best Common Type” Algorithm.

So it found out the best common type for the assigned values in the second example which was (number | null)[] ie Array of Number or Null.

OOP Features — 
TypeScript supports all OOP concepts like Classes, Interfaces, Inheritance etc. which can be used to make our code more modular and reusable.

Migration Stories

Now we have seen all the benefits Typescript provides to user. Let’s see some organization stories who started using Typesctipt

Not the Last but everyone’s favourite…

Conclusions

Seeing all the benefits typescript provides us it’s really worth of using. Even if you don’t know typescript completly still you can start small by using some of its features and then grow gradually. Typescript is very easy to understand and there is not need to be afraid of it.

Summary

In the blog, we have discussed all the potential benefits that typescript offers. Referring to this information, you can easily start your typescript learning journey and then grow gradually.