Basics Of Object Oriented Programming(OOP) With Typescript

Here , We will gonna learn how we can implement Basics Object Oriented Programming concepts in Typescript.

Brief Introduction of Typescript

• Typescript is a statically-typed programming language
• Typescript is a superset of Javascript language , Meaning you can also use Javascript concepts in Typescript.

Prerequisite

• Basic knowledge of Typescript , Javascript , Node , Node File Structure , OOP Concepts.

I’m assuming that you are familiar with Basic OOP Concepts and also you have  basic knowledge about Typescript.

Now First we will gonna create index.ts file. In This we will gonna implement OOPS concepts.

Classes In Typescript

• We can define a Class with using class keyword in Typescript.
• Here , I’ve created a class named Student.

 // Define a class 
class Student{

}

• To create object of a class, use new keyword.

//instantiate a class
let obj = new Student();

Class Properties

• Class properties are types of variables or entity that defines in a class.
• Below code is showing the way of creating properties in a class

// Define class properties 
class Student{
    public id:number;
    public name:string;
    public rollNo:number;    
}

• To access a property, create an object of a class and then access it’s property.

// Create an object and use properties of that class
let obj = new Student();
obj.id = 12;
obj.name = 'Karan';
obj.rollNo = 47

• In some cases , we need to prevent direct access to class properties. For this we
  can pass properties into class constructor, get it’s value with Getter method.

// pass a private property in constructor and get that value with getter
class Student{
    public id:number;
    public name:string;
    public rollNo:number;

    // Default Parameter value
    constructor(private mark:number=50){           
    }

    get getMarks(){
        return this.mark;
    }   
}

// Pass value in constructor
   let obj = new Student(69);
   obj.id = 12;
   obj.name = 'Karan';
   obj.rollNo = 47

// Get Marks with Getter
  console.log(obj.getMarks);//69

Methods In Class

• Here , I’ve created a method named getDetails that will print Student details.
• you can access class member with this keyword in class method

// This method will print student details on the terminal
getDetails(){
        console.log(` Id : ${this.id} \n Name : ${this.name} \n Roll No: ${this.rollNo}`);
    }

Constructor of a class

• Create a class constructor with constructor keyword

// Created a class constructor and i passed a variable here , you can also create an empty constructor
 constructor(public mark?:number){        
        console.log('Student Invoked');
    }

• Remember , Typescript doesn’t allow constructor overloading

Interface In Typescript

• Create an interface with interface keyword

// Define an interface
interface IStudent {
    
}

• Use implements keyword to implement interface in a class

// Implement or inherit an interface
class Student implements IStudent{
 
}

• We can also define properties in an interface just like we did with classes.

// interface with properties 
interface IStudent {
    id:number;
    name:string;
    rollNo:number;
}

• As you know , you must have to implement all the member of an interface or it will throw not implementing error.
• There is a solution for properties , use ? sign with properties , it prevent not implementing error.

 interface IStudent {
    id?:number;
    name?:string;
    rollNo?:number;
}

• This is also true for interface member methods

// We can omit implemention of SomeFunc() method in derived class
interface IStudent {
    id?:number;
    name?:string;
    rollNo?:number;

    someFunc?():any;
}

Inheritance In Typescript

• Inherit a class with extends keyword

// Base Class
class Marks {
    
    constructor(){
        console.log('Marks Invoked');
    }
}

// Derived class
class Student extends Marks {
    constructor(){        
  super();
        console.log('Student Invoked');
    }
}

• You must have to call super() method in derived class , super() method actually calls constructor from base class.
• Implements an interface with implement keyword

interface IStudent {
    id?:number;
    name?:string;
    rollNo?:number;
}

class Student implements IStudent {
    constructor(){        
  
    }
}

• You can also implement multiple interface.

interface IMarks{
  marks?:number;
}

interface IStudent {
    id?:number;
    name?:string;
    rollNo?:number;
}

class Student implements IStudent,IMarks {
    constructor(){        
  
    }
}

Abstraction In Typescript

• Abstraction is concept to hide sensitive variables or class member.
• We can implement this concept with private access modifier and getter.
• Here we gonna take student marks and store it in a private variable that is _marks
  and retrieve that marks with getter getMarks method.

class Student{
    public id:number;
    public name:string;
    public rollNo:number;
    
  // Default parameter value
    constructor(private marks:number = 50){        
        console.log('Student Invoked');
    }

    get getMarks(){
        return this._marks;
    }    
}

let obj = new Student(69);
obj.id = 12;
obj.name = 'Karan';
obj.rollNo = 47
console.log(obj.getMarks);

Encapsulation In Typescript

• Encapsulation use for data hiding. Apart from divide data in different blocks it uses single
  entity for a special task.
• This example of Account class explains how we can implement encapsulation with Typescript.

// Account Block

class Account {
     

    constructor(private accountNumber:number=1000000,private accountHolderName:string="Not Available",private accountBalance:number=0){

    }

    get getAccountNumber():number{
        return this.accountNumber;
    }

    get getAccountHolderName():string{
        return this.accountHolderName;
    }

    get getAccountBalance():number{
        return this.accountBalance;
    }
}

let acc = new Account(123165465,"Karan Rajgor",50000);

console.log(`Account Number: ${acc.getAccountNumber} \n Account Holder Name: ${acc.getAccountHolderName} \n Account Balance: ${acc.getAccountBalance}`); 
 //Account Number: 123165465 
 //Account Holder Name: Karan Rajgor
 //Account Balance: 50000

I hope this article will helps you to understand OOP concept of Typescript.