Post
Ask Question

Top 5 Essential Benefits Of Using TypeScript

This article will explain the benefits if we use Typescript in our project. Basically, you definitely know what Typescript is if you are a javascript developer. So if you are confused about what Typescript is and why  we use it when we have already javascript available which is fulfilling all our needs, let'slook in detail. 
 

What is TypeScript?

 
Typescript is an Open source programming language developed and maintained by Microsoft. It is designed for the development of large-scale applications and the most important difference between Typescript and Javascript is that they are two different programming languages, though Typescript is heavily based on Javascript. In simple people use to call it as Typescript is a superset of Javascript It means that all valid code is written in Javascript is also valid in Typescript as well.
 

Benefits of using Typescript in your project 

 
TypeSafety
 
As we all know, Javascript has no types. So it's hard to control all the parameters and variables that we are using and validate them. Since TypeScript is like Javascript but with Types. It helps make our code easier to read and avoid errors.
 
Without defining Type 
  1. function addTwo(num)  
  2. {  
  3.   return num + 2;  
  4. }  
  5.   
  6. addTwo(2); // Returns 4;  
  7.   
  8. addTwo("Two"); // Returns "Two2"  
 Typing
  1. function addTwo(num : number)    
  2. {    
  3.   return num + 2;    
  4. }    
  5.     
  6. addTwo(2); // Returns 4;    
  7.     
  8. addTwo("Two"); // Compile Error   

Using Classes & Interfaces

 
Class
 
Similar to C#, Java, C++ Typescript also allows us to use Classes inside the ts files. It offers full support for the class keyword introduced in ES(Ecma Script) 2015. Typescript adds type annotations and another syntax to allow you to express relationships between classes and other types.
 
Class Members:
  1. Public Class Value {}  
Adding members to the above-mentioned class
 
Fields
 
A field declaration creates a public writable property on a class. 
  1. class Value {  
  2.   x: number;  
  3.   y: number;  
  4. }  
  5.   
  6. const pt = new Value();  
  7. vl.x = 0;  
  8. vl.y = 0;  
 Property Initialization: The property initialization setting controls whether class fields need to be initialized in the constructor.
 
Without Initialization 
  1. class Point {  
  2.   name: string;  
  3. Property 'name' has no initializer and is not definitely assigned in the constructor.  
  4. }  
 With initialization
  1. class Point {  
  2.   name: string;  
  3.   
  4.   constructor() {  
  5.     this.name = "hello";  
  6.   }  
  7. }  

Interface

 
An interface defines the syntax that any entity must adhere to. Interfaces define properties, methods, and events, which are the members of the interface.
 
Interfaces are not to be converted to JavaScript. It’s just part of TypeScript. If you see the screenshot of the TS Playground tool there is no javascript emitted when you declare an interface, unlike a class. So interfaces have zero runtime JavaScript impact.
 
Implementation of Interface in ts file
  1. interface Vehicle{    
  2.   wheels: Number;    
  3. }    
  4.     
  5. class Car implements Vehicle {    
  6.    public wheels: Number;  
  7.    public hasTrunk: Boolean;  
  8. }   
  9.   
  10. class MotorCycle implements Vehicle{  
  11.    public wheels : Number;  
  12. }  

IDE Support

 
Information about types makes editors and Integrated development environments (IDE) much more helpful. They can offer features like code navigation and autocompletion, providing accurate suggestions. You also get feedback while typing: The editor flags errors, including type-related as soon as they occur. All this helps you write maintainable code and results in a significant productivity boost.
 
With Microsoft Visual Studio as the most popular and natural environment for running TypeScript, it is also supported by many other EDIs including
  • WebStorm, the intelligent JavaScript IDE;
  • Eclipse, an integrated IDE offering a plugin for TS development;
  • Visual Studio Code, a lightweight cross-platform editor by Microsoft;
  • Atom, a cross-platform text editor; and
  • CATS, an open-source TypeScript development environment.

Future EcmaScript (ES6)

 
TypeScript is a strict superset of ECMAScript 2015, which is itself a superset of ECMAScript 5, commonly referred to as JavaScript. As such, a JavaScript program is also a valid TypeScript program, and a TypeScript program can seamlessly consume JavaScript. A transpiler converts the ES6 based code into ES5 which is supported by many browsers. TypeScript is a transpiler. Grunt, Gulp, and Babel are some other transpilers to compile the modules. Therefore, TypeScript supports ES6.
 

Cross-Platform and Cross browser Compatability

 
Every device, platform, or browser that runs JavaScript works with TypeScript as well — after the compiler translates it into vanilla JS. Usually, IDEs and editors supporting TypeScript come with a built-in TS compiler (tsc), which can be invoked from the command line. TS allows for converting a part of the codebase or the whole app at once by adding a configuration file called tsconfig.json to the proper root directory.
 
Hope this article will give u a clear picture of What is Typescript and its benefits.
 
Keep learning ..... ! 


Similar Articles