Oops in Typescript

OOPS in Typescript

Typescript is based on oops concept. 

class : class is a factory that creates object. class acts as a blue print for the object. Class has 2 main entities :

a)data members

b)methods

constructor : Constructor is a function that is used to initialize the object. It is the first function to be called just after creation of the object. The object in Typescript gets created by new operator

var ob = new Person();

In above line , new is the operator to create object and Person() is the class constructor

To create a class in plain javascript/ES5

var Product = function(name,cost,brand){

this.name = name;

this.cost = cost;

this.brand = brand;

}

var ob = new Product();

To create a class in ES6 

In Es6 we have class keyword. Es6 do not have the access specifiers like private , public and protected

class Product2 {
    constructor(name,cost,brand){
        this.name2 = name;
        this.cost2 = cost;
        this.brand2 = brand;
    }
}
var ob = new Product2();

To Create class in Typecript

In Typescript we have class keyword with access specifiers also :

1)private : The members of class can not be accessed outside the class

2)public : The members of class can be accessed outside the class

3)Protected : The members of class can be accessed inside the derived class

Example 1 : Create a class Product with following data members :
a)name of string type

b)cost of number type

c)brand of string type

class Product {
    
    private name: string;
    private cost: number;
    private brand: string;
    //parametrized constructor
    //We can not declare the return type of the constructor
    constructor(name, cost, brand) {
        this.name = name;
        this.cost = cost;
        this.brand = brand;
    }
    getData() : void {
        console.log(“Name is ” + this.name);
        console.log(“Cost is ” + this.cost);
        console.log(“Brand is ” + this.brand);
    }
}
var p1 = new Product(“Apple”,300,”Kasmiri fruits”);
var p2 = new Product(“Banana”,120,”Kasmiri fruits”);
p1.getData();

 

Example 2 :

Create a class City having data members as :

a)name

b)area

c)pic

d)mayor

Having method display()

Solution 1 : Initialize the object without constructor

class City {

    private name: string;

    private area: number;

    private pic: string;

    private mayor: string;

    setCity(name, area, pic, mayor): void {

        this.name = name;

        this.area = area;

        this.pic = pic;

        this.mayor = mayor;

    }

    getData(): void {

        console.log(“City name “ + this.name);

        console.log(“City area “ + this.area);

        console.log(“City Pic “ + this.pic);

        console.log(“City Mayor “ + this.mayor);

    }

}

var c1 = new City();

c1.setCity(“Bangalore”, 1212121212, “somePic11”, “Mr Subramanyam”);

c1.getData();

 

Solution 2: Class with contructor 

class City {

   name: string;

   area: number;

   pic: string;

   mayor: string;

 

   constructor(name : string, area: number, pic: string, mayor: string) {

       this.name = name;

       this.area = area;

       this.pic = pic;

       this.mayor = mayor;

   }

 

   display(): void {

       console.log(“City Name : “ + this.name);

       console.log(“City Area “, this.area);

       console.log(“City Pic “, this.pic);

       console.log(“City Mayor “, this.mayor);

   }

}

var jhc1 = new City(“Ranchi”, 1111, “”, “Dr Bhaskar”);

jhc1.display();

 

Class Inheritance 

Inheritance is a feature to fetching the features of parent class into the derived class

Note : In plain js we have object prototype inheritance

In es6/typescript , we have the class inheritance

 

Single level inheritance :

class Persn{

first_name : string;

last_name : string;

constructor(first_name : string,last_name : string) {

this.first_name = first_name;

this.last_name = last_name;

}

show():void{

   console.log(“First Name : “,this.first_name);

   console.log(“Last Name : “,this.last_name);

}

}

class Employee extends Persn{

id : number;

department : string;

constructor(first_name : string,last_name : string,id : number,department : string){

super(first_name,last_name);

this.id = id;

this.department = department;

}

show(){

   super.show();

//super keyword is used to refer to the parent class

   console.log(“Employee Id : “,this.id);

   console.log(“Employee Department : “,this.department);

}

}

var emp1 = new Employee(“Mohan”,“Kumar”,11,“Electronics”);

emp1.show();

Example 2 :

//extends is used for inheritance in Typescript

class Person {

    private first_name: string;

    private last_name: string;

    constructor(first_name: string, last_name: string) {

        this.first_name = first_name;

        this.last_name = last_name;

    }

    displayPerson(){

        console.log(“Name is “,this.first_name+” “+this.last_name);

    }

}

class Doctor extends Person {

    private degree: string;

    private no_of_patients: number;

    constructor(first_name, last_name, degree, no_of_patients) {

        super(first_name, last_name);//super() is used to call parent class contructor

        this.degree = degree;

        this.no_of_patients = no_of_patients;

    }

    displayDoctor(){

        super.displayPerson();//super keyword access the parent class members

        console.log(“Degree : “,this.degree);

        console.log(“Patients count : “+this.no_of_patients);

    }

}

var obj = new Doctor(“Mohana”,” kumar”,“MBBS”,12000);

obj.displayDoctor();

Typescript does not support the multiple inheritance

class A{

}

class B {

}

class c extends A,B{//ERROR : can not inherit more then 1 class

 

}

Note : Typescript supports single and multiple level inheritance. Typescript does not supports multiple inheritance

 

Multi level inheritance :

class A{

}

class B extends A{

}

class C extends B{

}

var ob1 = new C();

 

Example :

class Per {

private first_name : string;

private last_name : string;

constructor(first_name : string,last_name : string){

this.first_name = first_name;

this.last_name = last_name;

}

displayPer(){

    console.log(“Name is “+this.first_name+” “+this.last_name);

}

}

class PersonalDetails extends Per{

    private address : string;

    private mobile : number;

    private email : string;

    constructor(first_name : string,last_name : string,address : string,mobile : number,email : string){

        super(first_name,last_name);

        this.email = email;

        this.mobile = mobile

    }

    displayPersonalDetails(){

        super.displayPer();

        console.log(“Email Id : “+this.email);

        console.log(“Mobile : “,this.mobile);

    }

}

class Doc extends PersonalDetails{

     private degree : string;

     private no_of_patients : number;

     constructor(first_name : string,last_name : string,address : string,mobile : number,email : string,degree : string,no_of_patients : number){

         super(first_name,last_name,address,mobile,email);

         this.degree = degree;

         this.no_of_patients = no_of_patients;

     }

     displayDoc(){

         super.displayPersonalDetails();

         console.log(“Degree is “+this.degree);

         console.log(“No of patients “+this.no_of_patients);

     }

}

var doc1 = new Doc(“Mohan”,” kumar”,“address 1”,7348820668,“mohan@gmail.com”,“MBBS”,120000);

doc1.displayDoc();

 

Method Overriding

It is a mechanism in which base class redefines the method of parent class

class Vehicle {

   color: string;

   constructor(color: string) {

       this.color = color;

   }

   details() : void {

       console.log(‘Car color : ‘ + this.color);

   }

}

class Cycle extends Vehicle {

mud_guard_cost : number;

constructor(color : string, mud_guard_cost : number){

super(color);   

this.mud_guard_cost = mud_guard_cost;

}

details() : void {

   super.details();

   console.log(‘mud guard cost : ‘ + this.mud_guard_cost);

}

}

 

The static member

The static member can be accessed by the class name. The class member can be data member + methods

class Company{

   static no_of_emps : number=0;

   constructor(){

       Company.no_of_emps += 1;

   }

}

var c1 = new Company();

var c2 = new Company();

var c3 = new Company();

var c4 = new Company();

console.log(“The total employees “,Company.no_of_emps);

 

Instance of operator

Instance of operator will return true if the variable belongs to specific type

class Animal {

   name: string;

   color: string;

   constructor(name, color) {

       this.name = name;

       this.color = color;

   }

}

var horseObj = new Animal(“horse”,“Grey”);

console.log(“horseObj belongs to Animal class “,(horseObj instanceof Animal))

 

Data Hiding

Class can maintain the visibility of data member of class with another class by the use of access specifiers

Private : private  data members of class can be accessed by the methods of the same class. It can not be accessed outside the class

Public : public data member of class can be accessed by outside class also

Protected : protected data member of the class can be accessed by the same class method and by the class just derived from it

 

class Example {

   private data_member_1: string;

   constructor(data) {

       this.data_member_1 = data;

   }

}

var obj = new Example(10);

console.log(“The value of data member is “,obj.data_member_1);//error :private data member can not be accessed outside the class

 

class Example {

   private data_member_1: string;

   public data_member_2: string;

   constructor(data1,data2) {

       this.data_member_1 = data1;

       this.data_member_2 = data2;

   }

}

var obj = new Example(10,20);

console.log(“The value of data member is “,obj.data_member_2);

//success :public data member can  be accessed outside the class

console.log(“The value of data member is “,obj.data_member_1);

//error :private data member can not be accessed outside the class

Site Footer