Getting Started With TypeScript

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.
    
    
4. Once TypeScript is installed successfully, we can check the TypeScript version using the below command.

 

 

 

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

let firstName : string = “Jignesh”;
var lastName : string = “Kumar”;
const mum : number =10;

Let's see how we can do the same in C#.

 

 

 

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.

let firstName: string = 'Jignesh';
let num: number = 10;
const num1: number = 20;
let isActive: boolean = true;
let sports: string[] = ['Cricket', 'Rugby', 'Tenish', 'Kabaddi']
let anyType: any = "This is String";
anyType = 20;
anyType = true;
let empCode: (string | number)
empCode = 'Emp001';
empCode = 10001;
empCode = true;
let empId: number = 10001;
let empName: string = 'Jignesh';
let employee: [number, string] = [empId, empName];

 

  

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#.

 

class employee
{
// Properties in Type script
 empCode : number =1001;
 empFirstName : string ='Jignesh';
 empLastName : string = 'Kumar';
 email : string ='[email protected]';
 pinCode : number = 121345;
 // Method on Type script
  GetAnnualSalary() : number{
    return 112000 * 12 ;
  }
}

 

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#.

class Employee
{
  constructor()
  {
    console.log("Constructor called from Type Script");
  }
}

 

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.

interface IEmployee {
 firstName: string, lastName: string, GetEmployeeFullName: () => string
}
var employee: IEmployee = {
 firstName: "Jignesh",
 lastName: "Kumar",
 GetEmployeeFullName: (): string => {
  return this.firstName + " " + this.lastName
 }
}

 

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!!!