Here we briefly discussed some of the important concepts of Typescript

1. Type Assertion
2. Arrow Function
3. Interface
4. Class
5. Constructor
6. Access Modifiers 
7. Properties

Type Assertion

It helps to explicitly specify the type of a variable when the type of variable is unknown. Two ways to do that:-

let msg;
msg='hello';

let firstmethod=(<string> msg).toUpperCase();
let secondmethod=(msg as string).toUpperCase();

Arrow Function

Arrow functions are similar to lambda expressions in C# code. It helps to simplify the function declarations in many scenarios.

Function without any parameter

let main=()=>console.log('hello');

Function with parameter and no return type

let sum=(x,y)=>console.log('sum of '+x+' and '+y);

Function with parameter and return type

let sumxy=(x:number,y:number):number=>{
    return x+y;
}

Here we specify the type of the parameter in the function declaration itself.it is called Inline annotation

 

Interface

 

It is used to encapsulate a set of related parameters into a single object. Below is an example of how to use a point object to draw using the interface.

interface Point{
    x:number,
    y:number
}

let drawObject=(point:Point)=>{
    //logic to draw Object
}

drawObject({
   x:1,
   y:2
})

The advantage of using the interface is that it gives nice intellisence and also helps type safety in programming.

 

Class

The concept of Class is used to group together related properties and functions.

Below is an example of a simple point class with two fields and a draw function.

class Point{
    x:number;
    y:number;

    drawObject(){
        //logic to draw Object
        console.log('Point x is:'+this.x+' Point y is:'+this.y);
    }
}

 
let point =new Point();
point.x=1;
point.y=2;
point.drawObject();

An object is an instance of a class. here the point is used as an object to initialize the class Point.

 

Constructor

It is basically a method called when we initialize a class.
Following the previous example, we add the constructor to pass values to x and y variables.

class Point{
    x:number;
    y:number;

    constructor(_x?:number,_y?:number){
        this.x=_x;
        this.y=_y;
    }

    drawObject(){
        //logic to draw Object
        console.log('Point x is:'+this.x+' Point y is:'+this.y);
    }
}

let point=new Point(1,2);
point.drawObject()

 

_x?:number this indicates that the parameter is optional

 

Access Modifiers

It is a keyword that can be applied to a number of members of a class to control its access from outside.

• Public (by default all are public)
• Private
• Protected

class Point{
    private x:number;
    private y:number;
//..
}

Access Modifier in Constructor

When we add an access modifier to the parameters of the constructor, it will generate fields of that class at runtime and initializes the values.

class Point{

    constructor(private x?:number,
                private y?:number)
                {    }   
}

 

Properties

Properties look like fields from outside of a class but internally it is a method inside the class. It is a combination of getter and setter methods or either of them.

Fields are the variables privately accessible inside a class that is prefixed with an underscore.

 

class Point{

    constructor(private _x?:number,
                private _y?:number)
                {    }

    get x(){
        return this._x; 
    }
    set x(Value){
        this._x=Value;
    }
}

let point=new Point(1,2);
let x=point.x;
point.x=10;

In the above example, the property x is having get and set method inside the class.but from outside the class, the value can be assigned or retrieved.

 

 

First, we have to install the node js to work with Typescript.

Node js providers an environment to execute the Javascript outside the browser.
Install the latest stable version of Node js. After installing node js you will have NPM (node package manager) which helps to install third-party libraries.

Open command prompt and type below command to check node js install or not
node --version
v12.16.3 (displays the version installed)

Now type the below command to install typescript
npm install -g typescript
-g this signifies that we are going to install typescript globally

After installing successfully check using below command
tsc --version
Version 3.9.2 (displays the version installed)

Now you can start working with typescript using your favorite editors like vscode, sublime Atom, etc

Have a look at the basic concepts of Typescript