TypeScript is a super-set of JavaScript that transpiles/compiles into JavaScript. After reading this blog you will be with me when I say that Typescript is a big deal. The simple reason is that TypeScript does not try to invent something new but just takes the same old JavaScript and adds a few cool features. You are basically not learning something new, but just getting acquainted with a few extra concepts.
Typescript can significantly improve the code quality by helping developers to code in a very efficient way which would reduce a lot of time working around unpredictable errors and typos.
So, how can typescript improve your code quality significantly? Here’s how!
The Types..!
In TypeScript every variable you declare must be assigned a type. There are old types such as string, number and array; but a few interesting ones have been introduced such as any, tuple, union and enums. They are of huge advantage and help to catch errors before it is too late.
JavaScript as we all know makes it harder to find errors in your code until you run in. Developers are always prone to making mistakes while coding but the trick is to avoid it and catch errors and typos in the early stages before the code is shipped. In this context Typescript has a huge advantage where it tells the developer that there is something wrong during the compile time itself.
Imagine a scenario of calling the .toUpperCase() on a number. Typically, you will only be notified of this error during run-time; but in typescript your code is checked for accuracy before it runs. You will get a compilation type error stating that a number cannot have toUpperCase() method.
Type Inference
This is all about the types in TypeScript. If by chance you miss mentioning the type while declaring a variable, TypeScript will automatically try to infer the type for that variable. For example, a variable declared without a type but assigned a value of a number will automatically be assigned the type number. In this way if you try to do something wrong with this variable like trying to add it with string unlike JavaScript where this is allowed, TypeScript will show an error and highlight the fact that there is a problem. This can help you in saving time finding errors.
Block scoping
Unlike JavaScript var which is used to declare a variable, Typescript introduces something called as let. let is block scoped and allows one to maintain the scope of variables when and where required.
Consider the below example where two ‘for’ loops are nested. What happens here is, since let is used to declare the variables, the i in the inside for loop has different scope than the i on the outer for loop. But if var was used instead of let, the i in the inner loop would have gotten overwritten by the value of outer loop i and the result would be something very different and unforeseen.
Classes
Most people who are familiar with Object Oriented Programming would be familiar with the concept of classes. Classes come in handy when you would want to create multiple instances of the class and make use of inheritance. To be clear, it is not that you cannot make use of the classes’ concept in JavaScript using a few tricks, but it is way easier in TypeScript.
Classes have properties, constructors and methods. One interesting fact to be noted here is that when the code is transpiled to JavaScript, the methods in the classes are created making use of the prototype. This is because the prototype can save memory as it exists only once while creating the function.
 |
| Image: TypeScript code on the left and its transpiled JavaScript code on the right |
Where there are classes, there is Inheritance. Inheritance is where public properties and methods of parent class are allowed access by child classes which inherit the parent.
Interfaces
This is one of the most interesting features of TypeScript. Interfaces are used in TypeScript to define complex types such as an object containing other properties.
Modules
Modules help to separate code and maintain them in files which perform a particular task. Doing so would help developers maintain reused code, keep variables out of global scope etc. Below is given an example of modules and how they can be used.
Usage of code blocks is not possible outside the modules if you have not exported them. Use the export keyword to be able to use code block outside a particular module.
Conclusion
There are a ton of new features in TypeScript available to make use of to be able to write less tiring and efficient code. Introduction of new features has made Typescript more flexible and helpful. Few of the features were discussed in brief in this blog. Now it is your turn to go explore TypeScript.
One more important fact to be noted: TypeScript is recommended if you want to work with Angular2!
