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
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
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
