Typescript Basic

Typescript is the super set of Javascript. Typescript developed by Microsoft.  It can have the features of ES5 + ES6 + (Some extra features).It is designed by Anders Hejlsberg. (key person for c#)

 

Typescript is every where

Now a day’s typescript is used in :

1)Angular 2+ (Angular 8,9)

2)React with Typescript

3)Node Js  (For server side scripting)

 

Javascript is everywhere

Today javascript covers the whole software market including :

  1. Desktop Application : Electron Js
    REF : https://www.electronjs.org/donors
  2. Front : react | Angular | Vue Js
  3. Mobile : Hybrid app (react native | Ionic)
  4. Server : NodeJs | Dino (js runtime environment)
  5. IOT : Internet of things

       https://www.raspberrypi.org/forums/viewtopic.php?t=1948082) 

 

 

Advantage and Disadvantage of Typescript

Advantage of Typescript :

1)Compile time error : Typescript shows compile time error. It shows the error at time of coding. Whereas in plain JavaScript the error are shown at run time

2)Strongly Typed :  Typescript supports Strongly typed variables

3)Typescript runs on any environment or JavaScript environment

4)We can create namespace by defining modules

Disadvantage of Typescript :

1)It takes long time to compile typescript code

2)Typescript does not support abstract class

3)Suppose if we run the typescript on browser then extra time it takes to compile the typescript back to JavaScript

 

Data Types in Typescript

These are the basic data types in Typescript :
a)Number Type
b)String Type
c)Boolean Type
d)Enum Type
e)Void Type
f)Null Type
g)Undefined Type
h)Any Type
i)Array Type
j)Tuple Type
Number Type
var n : number = 121;
String Type
var person_name : string = “Mohan”;
Boolean Type
var isGraduate : boolean = true;
Enum Type
//Example 1
enum Gender {
    MALE,
    FEMALE
}
var person_gender : Gender = Gender.MALE;
//Example 2
enum Education {
    Metric,
    ISC,
    Graduation,
    Diploma
}
var person_education : Education = Education.Diploma;
//Example 3 (enum with value)
enum Division {
    First = 1,
    Second = 2,
    Third = 3
}
var student_div : Division = Division.First;
console.log(‘Division obtained by student is ‘,student_div);
Void Type : Void does not return anything
function show() : void{
    console.log(“Hello world !”);
}
show();
Null Types : we can declare a variable of type null using the null keyword and can assign only null value to it. As null is a subtype of all other types, you can assign it to a number or a boolean value
var a : null = null;
var b : number = null;
var e : string = null;
Undefined Type : We can use the undefined keyword as a data type to store the value undefined to it. As undefined is a subtype of all other types, just like null, you can assign it to a number or a boolean value. 
var a1 : undefined = undefined;
var a2 : number = undefined;
Any type : any is the super type of all the data types
var at1 : any = 11;
at1 = “sachin”;
at1 = true;
Installing Typescript

npm install typescript -g

1)npm :  node package manager : All packages are handled through this tool

 

Function in Typescript

Function in typescript :

Function are the reusable code that can be called multiple times

a)Function definition without argument and return type

Note :

show function does not return anything (void)

Below example is without any argument + does not return anything

function show():void{

   console.log(‘hello world!’);

}

b)Define a function  with argument + return type

function add(a : number,b : number):number{

var ans : number = a+b;

return ans;

}

var ans = add(2,5);

console.log(‘Sum is ‘,ans);

 

c)Optional parameter in typescript

This is the new feature in typescript, where we can have option to pass the argument or not . For this we are using the (?)

function display(name : string,age : number,dept ?: string){

console.log(“Name is “+name);

console.log(“Age is “+age);

if(dept != undefined){

console.log(“Department is “+dept);

}

}

// display(“Mohana”,21,”CSE”);

display(“Sohan”,22);

 

d)Rest parameter in Typescript

In plain js/ES5/vanilla js , we handle the dynamic number of arguments, through function object property arguments.length

function add(){

console.log(“The argumnets length “,arguments.length);

var s = 0;

for(var i=0;i<arguments.length;i++){

s = s+arguments[i];

}

console.log(‘the sum is ‘+s);

}

/*

In javascript , function treated as an object

arguments.length is one of the property of function object

*/

//Now the use case is that , we can pass any no of arguments

add(1,4,5,6);

add(1,2,1)

 

Now, an easy way to handle the dynamic arguments  in Typescript/ES6 is rest parameter. For this we use (…argument)

Here all the arguments that gets passed to the function gets stored in one rest variable in array form

function add(…ele : number[]):number{

console.log(“The type is “,typeof ele)

let s : number = 0;

for(let i : number=0;i<ele.length;i++){

   s = s+ele[i];

}

return s;

}

console.log(“First ans :”,add(1,2));

console.log(“Second ans :”,add(1,2,5));

console.log(“Third ans :”,add(1,2,9,9,7));

 

e)Default argument in Typescript

ES5 example : In the below example value of c is not passed . undefined gets stored in c. So final ans is NaN

Number + undefined = NaN (Not a number)

function add(a,b,c){

console.log(“c = “+c);   

var ans = a+b+c;

console.log(‘The sum is ‘+ans);

}

// add(1,2,3);

add(1,2);

Solution in ES5 :

function add(a, b, c) {

   if (b == undefined) {

       b = 0;

   }

   if (c == undefined) {

       c = 0;

   }

   var ans = a + b + c;

   console.log(‘The sum is ‘ + ans);

}

add(1, 2);

Note : Default parameter is introduced in ES6

Ans :  Typescript has adopted the concept of default parameter

function add99(a : number, b : number, c : number = 0) {

  var ans : number = a + b + c;

   console.log(‘The sum is ‘ + ans);

}

add99(1, 2);

Site Footer