Basic concepts of Typescript

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.