TypeScript OOP: Classes, Interfaces & Inheritance

Object-oriented programming (OOP) in TypeScript enables you to model real-world entities using classes, interfaces, and inheritance. This post covers TypeScript's OOP features including class syntax, constructors, access modifiers (public, private, protected), interfaces, abstract classes, and how to apply OOP principles like encapsulation and polymorphism.

What is Object-Oriented Programming?

Object-Oriented Programming is one of the many programming paradigms or styles of programming. We have many paradigms like procedural, functional, object-oriented, event drive, Aspect Oriented, and so on. These programming paradigms are styles or ways of writing code. They're not programming languages, different programming languages support different programming paradigms. For example, javascript and typescript both support some object-oriented and function programming techniques. In Object Oriented Programming objects are the building blocks of our application. So a real application consists of hundreds or event 1000s of objects working together to solve problems. An object is a unit that contains some data, also called state and operations also called behavior.

Object Oriented Programming is often compared with functional programming, which is a completely different style of programming. So in functional programming functions are the building blocks of our applications. And for that reason, our code would end up looking different.

Creating Classes

Object oriented programming is all about objects. To create an object, first we need to create a class. A class is a blueprint for creating objects. It's like an object factory. Let's say we want to represent the concept of a bank account. So we need a class for that. Now in class, we can have properties like ID, owner and balance, and methods like deposit and withdraw. So let's implement this class in TypeScript like below:

class Account {
id: number;
owner: string;
balance: number;

constructor(id: number, owner: string, balance: number) {
this.id = id;
this.owner = owner;
this.balance = balance;
}
}

we initialize properties by using a constructor.

Let's implement that deposit method in class.

deposit(amount: number): void {
if(amount <= 0)
throw new Error('Invalid amount')
this.balance += amount;
}

Creating Objects

Let's create object outside class:

let account = new Account(1, 'Linn', 0);

After create an object we can get properties or methods from account variable:

account.deposit(100);

console.log(account)

We can see the output in the terminal by running below command:

atsc && node dist/index.js

Read-only and Optional Properties

In TypeScript, we have modifiers that we can apply to our properties. And this helps us write more robust code. Let's say the idea of bank account should never change. With our current implementation, we can change the ID of a bank account anywhere in our code. For example, we can go in our deposit method, and accidentally set this.id = 0; . And this may create a bug in our program. So, we can set id property to readonly like below:

class Account {
readonly id: number;

Another one is we can create an optional property like below:

nickname?: string;

Access Control Keywords

In TypeScript, we have other modifiers for controlling access to properties and methods. We use this property to write more robust code.

In TypeScript, we have three access modifiers:

public
private
protected

If we declare property with private, we can't access property outside class. Only access within the class. But if we declare property with public, we can access it anywhere.

Parameter Properties

If we use access control keyword in constructor, we no need to declare initialize properties:

class Account {
nickname?: string;

constructor(
public readonly id: number,
public owner: string,
public balance: number
) {
this.id = id;
this.owner = owner;
this.balance = balance;
}

Getters and Setters

If we want to output private property value outside class, we can use getter like below:

class Account {
nickname?: string;

constructor(
public readonly id: number,
public owner: string,
private _balance: number
) {
this.id = id;
this.owner = owner;
this._balance = _balance;
}

deposit(amount: number): void {
if(amount <= 0)
throw new Error('Invalid amount')
this._balance += amount;
}

get balance(): number {
return this._balance;
}
}

let account = new Account(1, 'Linn', 0);
console.log(account.balance);

If we want to set the value inside class, we can use setter like below:

class Account {
nickname?: string;

constructor(
public readonly id: number,
public owner: string,
private _balance: number
) {
this.id = id;
this.owner = owner;
this._balance = _balance;
}

deposit(amount: number): void {
if(amount <= 0)
throw new Error('Invalid amount')
this._balance += amount;
}

get balance(): number {
return this._balance;
}

set balance(value: number) {
if(value < 0 )
throw new Error('Invalid value');
this._balance = value;
}
}

let account = new Account(1, 'Linn', 0);
console.log(account.balance);
account.balance = 1;

Index Signatures

In javascript, we can create an object and add properties to it dynamically. But this is not possible in TypeScript. Because Typescript is very strict about the shape of objects. But there are situations where we need to add properties to an object dynamically. And this is where we use index signatures. So let's say we are building a ticketing application for concerts. And for each concert, we want to know who is sitting where. So we start by creating a class called seatAssignment:

class seatAssignment {
[seatNumber: string]: string;
}

let seats = new seatAssignment();
seats.A1 = 'Linn';
seats.A2 = 'Dennis';

Static Members

Let's imagine we are building a ride sharing application like Uber, so people can use their phone an request a ride. So, we create a class called Ride. We want to know how many active ride we currently have in our system.

class Ride {
private static _activeRides: number = 0;

start() { Ride._activeRides++;}
stop() { Ride._activeRides--;}

static get activeRides() {
return Ride._activeRides;
}
}

let ride1 = new Ride();
ride1.start();

let ride2 = new Ride();
ride2.start();

console.log(Ride.activeRides);

When we make a property or a method static, that property or method becomes part of a class and will have only a single instance of them in memory.

Inheritance

Inheritance is a mechanism that allows us to reuse our code. For example, we have Student and teacher class, each of them have firstName, lastName and fullName. We no need to create these property repeatly inside student and teacher class. We can create Person class and put those properties.

class Person {
constructor(public firstName: string, public lastName: string) {}

get fullName() {
return this.firstName +' '+ this.lastName;
}
}

class Student extends Person {
constructor(public studentId: number, firstName: string, lastName: string) {
super (firstName, lastName);
}
takeTest() {
console.log('taking a test');
}
}

let student = new Student(1, 'John', 'john@gmail.com');
student.firstName;

Method Overriding

Inheritance is great but some sometime we want to change something in the inherited code. For example, look at the full name getter in the person class. Let's say we're going to implement the teacher class and then we want to get fullname in teacher class. So, we create Teacher class like below:

class Teacher extends Person {

}

let teacher = new Teacher('John','Smith');
console.log(teacher.fullName);

If we want to override for fullName method in Teacher class. We can do like below:

class Teacher extends Person {
override get fullName() {
return 'Professor '+super.fullName;
}
}

let teacher = new Teacher('John','Smith');
console.log(teacher.fullName);

Polymorphism

One of the core principles of object oriented programming is polymorphism. Poly means many, morph means form. So polymorphism means many forms. And this refers to the situation where an object can take many different forms.

class Person {
constructor(public firstName: string, public lastName: string) {}

get fullName() {
return this.firstName +' '+ this.lastName;
}
}

class Student extends Person {
constructor(public studentId: number, firstName: string, lastName: string) {
super (firstName, lastName);
}
takeTest() {
console.log('taking a test');
}
}

class Teacher extends Person {
override get fullName() {
return 'Professor '+super.fullName;
}
}

let teacher = new Teacher('John','Smith');


printNames([
new Student(1, 'John', 'Smith'),
new Teacher('Linn', 'Htun')
])
function printNames(people: Person[]) {
for (let person of people) {
console.log(person.fullName);
}
}

Frequently Asked Questions

What is the difference between a class and an interface in TypeScript?

A TypeScript class is a blueprint for creating objects with both data (properties) and behavior (methods) and generates JavaScript code; an interface is a purely structural type contract that only exists at compile time and generates no JavaScript.

What are access modifiers in TypeScript?

Access modifiers control the visibility of class members: public members are accessible anywhere, private members are only accessible within the class, and protected members are accessible within the class and its subclasses.

Classes, Interfaces and Object-oriented Programming