Getting Started With TypeScript

This article explains how to install TypeScript and set local environment with Visual Studio.

Introduction 

 
In this article, I will give an overview of TypeScript and why we should go for TypeScript along with a few code examples to understand the basics of TypeScript.
 

What is TypeScript?

 
TypeScript is an open-source language developed and maintained by Microsoft. TypeScript is a superset of JavaScript that will compile to JavaScript.
 
TypeScript is a powerful language that provides you OOPS-style syntax. It supports objects, classes, inheritance, polymorphism, strongly-typed, etc. So, it is very useful for developers to write their code in a fast and easy way.
 

Why should we use TypeScript?

  1. TypeScript is an open source and easy to learn.
  2. It simplifies JavaScript code and makes it easier to write the code.
  3. Easy to understand and more readable code.
  4. It supports object-oriented programming style concepts.
  5. Developers can do development very fast using TypeScript so it will save the development time.
  6. It is used with Angular in most of the development.
  7. It supports intelligence for code writing. 
Version and Road map Click here for the road map.
 
As per Wiki version history -
 
Date
Version
Year-2012
0.8
Year-2013
0.9
Year-2014
1.0 with Visual Studio 2013 built-in support
Year-2017
2.2 Many other features
Year-2018
3.0, 3.1, 3.2
Year-2019
3.3, 3.4,3.5 (latest released in May 2019)
 

Environment Set up

  1. Install Node.js Click Here.
  2. Once Node is installed, then via npm, install the TypeScript.
  3. Go to the command prompt and type the following.
     
    Getting Started With TypeScript
     
  4. Once TypeScript is installed successfully, we can check the TypeScript version using the below command.
 
Getting Started With TypeScript 
 

Overview of TypeScript

 
Let us learn the following elements of TypeScript one-by-one. 
  • Variable
  • Data Types
  • Class
  • Constructor
  • Interface
Here, I will compare some of the things with C# so it will be easy to understand and remember for a new learner.
 

Variable in TypeScript

 
As we can declare our variable in JavaScript, the same way, TypeScript uses the variables like - let, var, and const. The variable name is case-sensitive in TypeScript.
 
Example of Variable declaration in TypeScript
  1. let firstName : string = “Jignesh”;  
  2. var lastName : string = “Kumar”;  
  3. const mum : number =10;  
Let's see how we can do the same in C#.
 
Getting Started With TypeScript 
 

Data types in TypeScript

 
TypeScript provides a wide range of data types like string, number, Boolean, Array, Any, Tuple, Union, etc. Please find an example for each one in the below code sample.
  1. let firstName: string = 'Jignesh';  
  2. let num: number = 10;  
  3. const num1: number = 20;  
  4. let isActive: boolean = true;  
  5. let sports: string[] = ['Cricket''Rugby''Tenish''Kabaddi']  
  6. let anyType: any = "This is String";  
  7. anyType = 20;  
  8. anyType = true;  
  9. let empCode: (string | number)  
  10. empCode = 'Emp001';  
  11. empCode = 10001;  
  12. empCode = true;  
  13. let empId: number = 10001;  
  14. let empName: string = 'Jignesh';  
  15. let employee: [number, string] = [empId, empName];  
 
Getting Started With TypeScript
  

Class in TypeScript

 
In TypeScript, we can define a class using the "class" keyword followed by the class name and class body withing curly braces. Let's see how to create a class in TypeScript and how we are doing it in C#.
 
  1. class employee    
  2. {    
  3. // Properties in Type script    
  4.  empCode : number =1001;    
  5.  empFirstName : string ='Jignesh';    
  6.  empLastName : string = 'Kumar';    
  7.  email : string ='jigsptlxxx@gmail.com';    
  8.  pinCode : number = 121345;    
  9.  // Method on Type script    
  10.   GetAnnualSalary() : number{    
  11.     return 112000 * 12 ;    
  12.   }    
  13. }      
Getting Started With TypeScript
 

Constructor in TypeScript

 
TypeScript allows us to create a constructor using the constructor keyword. In the below image, I have created a constructor in TypeScript and the same constructor in C#.
  1. class Employee  
  2. {  
  3.   constructor()  
  4.   {  
  5.     console.log("Constructor called from Type Script");  
  6.   }  
  7. }  
Getting Started With TypeScript
 

Interface in TypeScript

 
Likewise, C# to declare an interface, we need to use the interface keyword. Interface members are public by default. Below is an example of an interface.
  1. interface IEmployee {  
  2.  firstName: string, lastName: string, GetEmployeeFullName: () => string  
  3. }  
  4. var employee: IEmployee = {  
  5.  firstName: "Jignesh",  
  6.  lastName: "Kumar",  
  7.  GetEmployeeFullName: (): string => {  
  8.   return this.firstName + " " + this.lastName  
  9.  }  
  10. }   
Getting Started With TypeScript
 

Conclusion

 
Here, I have shown simple code examples for TypeScript, like how to declare a variable, use data types, class, constructor, and interface. That's it. We learned some of the basics of TypeScript in this article.
 
Click Here to learn and explore more about TypeScript.
 
Thank you for reading!!! Happy Coding!!!