How to Declare Constructors in TypeScript Angular 2

 

In this post we will see how to create a constructors in TypeScript angular 2. S0 here we have same Point class which we used in tutorial for declaring class in Typescript.  Only code we added is for the constructor as given below. 

We can declare a constructor in TypeScript using ‘constructor’ keyword and we can have only one constructor. If you are using java you have feature of having multiple constructors inside a class but in typescript you can have only one constructor.  

class Point {
    
        x: number;
        y: number;

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

        doSomething() {
            console.log('Point X: '+this.x);
            console.log('Point Y: '+this.y);
        }
    
    }

Lets run this above code to see the output.

PS C:\Users\AnilKumar\ts-hello> tsc code-main.ts
PS C:\Users\AnilKumar\ts-hello> node code-main.js
Point X: 1
Point Y: 2
PS C:\Users\AnilKumar\ts-hello>

How to make Constructor Optional in TypeScript?

We can use ‘?‘ to make a constructor parameter optional.

NOTE: All parameters right to optional parameter also need to be changed to optional else it will show you compilation error message.

class Point {
    
        x: number;
        y: number;

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

        doSomething() {
            console.log('Point X: '+this.x);
            console.log('Point Y: '+this.y);
        }
    
    }

let point: Point;
point = new Point(1);

point.doSomething();

In above code we are passing only one parameter in constructor which is acting like a overloaded constructor feature only. Now lets run this code.

PS C:\Users\AnilKumar\ts-hello> tsc code-main.ts
PS C:\Users\AnilKumar\ts-hello> node code-main.js
Point X: 1
Point Y: undefined
PS C:\Users\AnilKumar\ts-hello>

 

How to Declare Classes in TypeScript Angular 2

In this post we will see how to declare a class in TypeScript angular 2. In this below code window you can see we have declared class Point with two variables ‘x’ and ‘y’. We have one method also inside Point class which will print both the point values of object.

class Point {
    
        x: number;
        y: number;

        doSomething() {
            console.log('Point X: '+this.x);
            console.log('Point Y: '+this.y);
        }
    
    }

Initializing the Class in TypeScript

In this below code snippet we are creating one variable point with is of Type Point class. Then we are allocating memory or creating object of type Point by using new keyword like any other object oriented language.

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

We are using point variables to assign values to object variables ‘x’x and ‘y’. At the end we are calling doSomething() method of point object we just created. Below is the result of above code.

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

 

Interface in TypeScript

In this post we will see how to declare Interface in TypeScript and the using this interface for passing objects to function.

In below code we have interface Point which have defining of holding two variables ‘x’ and ‘y’ with the data type number. Then we have one function doSomething() which is accepting point object of type Point interface.

interface Point {

    x: Number,
    y: Number
}

let doSomething = function(point: Point) {
    console.log('Point X: '+point.x);
    console.log('Point Y: '+point.y);
}


doSomething({x:1,y:2});

At the last line we have calling function doSomething()  with the object.

How to create object in Typescript ?

As in this case we have two variables inside class or interface of type number.

{
           x:1,
           y:2

}

Now run this code using node.

PS C:\Users\AnilKumar\ts-hello> tsc code-main.ts
PS C:\Users\AnilKumar\ts-hello> node code-main.js
Point X: 1
Point Y: 2
PS C:\Users\AnilKumar\ts-hello>

In this post we will see how var keyword in type script is different from let keyword. We will use very simple program to explain the difference between var vs let keywords in angular 2 typescript.

VAR Keyword Usage

We will write a simple program with var keyword as give below

function doSomething(){
    
    for(var i=0;i<5;i++){
        console.log(i);
    }

    console.log('Finally ' + i);
}


doSomething();

Run this below command to compile type script

PS C:\Users\AnilKumar\ts-hello> tsc code-main.ts

Run the code-main.js file using node.js

PS C:\Users\AnilKumar\ts-hello> node code-main.js
0
1
2
3
4
Finally 5
PS C:\Users\AnilKumar\ts-hello>

Variable ‘i’ is declared inside loop but still we can use it outside loop which make its available for other code as well inside doSomething() function.

LET Keyword Usage

We will change the keyword var –> let as given below.

function doSomething(){
    
    for(let i=0;i<5;i++){
        console.log(i);
    }

    console.log('Finally ' + i);
}


doSomething();

Again compile the code as we did earlier.

PS C:\Users\AnilKumar\ts-hello> tsc code-main.ts
code-main.ts(9,30): error TS2304: Cannot find name 'i'.

We have compilation error which suggest variable ‘i’ is not visible outside loop that means scope is limited to nearest scope. We can this error in visual studio code as well when writing code.

You can see outside loop variable is marked error and you can see error message if you hover mouse pointer on it.