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
- Knowledge of Typescript, Javascript, Node, Node File Structure, and OOP Concepts is required.
I’m presuming you’re familiar with fundamental OOP concepts and have some understanding of Typescript.
First, we’ll build the index.ts file. We will be implementing OOPS ideas in this.
Classes In Typescript
- In Typescript, we may define a Class by using the class keyword.
- 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
- We need to block direct access to class properties in specific circumstances. To do this, we may supply properties into the contructor and get their values using the Getter function.
// 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.
