Applying OOP Design Patterns in TypeScript

Hello! Today, we'll venture into the realm of design patterns. Specifically, we'll tackle exercises that apply a single design pattern to problem-solving. Mastering these patterns is a surefire way to extend your coding skills.

Our goal today is to fortify your understanding of when and how to apply specific Object-Oriented Programming (OOP) design patterns. These patterns include Encapsulation, Abstraction, Polymorphism, and Composition.

We'll dissect four real-life scenarios and distinguish which pattern is applicable and why.

Let's get underway!

The Encapsulation pattern proves beneficial for the development of a Database Management System (DBMS). Each DBMS table represents a class, the fields represent private data members, and the functions operating on this data serve as methods.

Encapsulation ensures that data members are accessed through methods that promote data integrity and prevent inadvertent anomalies. Here's a mini-code snippet to support this concept:

class Employees {
    private employees: { [key: number]: string } = {}; // private data member with type annotation

    addEmployee(eid: number, name: string): void { // method to operate on private data
        this.employees[eid] = name;
    }

    updateEmployee(eid: number, newName: string): void { // method to operate on private data
        if (this.employees.hasOwnProperty(eid)) {
            this.employees[eid] = newName;
        }
    }
}

const employees = new Employees();
employees.addEmployee(1, "John");
employees.addEmployee(2, "Mark");

employees.updateEmployee(2, "Jake");

In this context, Encapsulation restricts direct access to employee data, presenting a protective layer via designated methods.

When transitioning to GUI development, consider the creation of controls like buttons or checkboxes. Despite belonging to the same class, each responds differently when clicked. This situation illustrates Polymorphism, which allows us to handle different objects uniformly via a common interface.

Check out this illustrative example:

abstract class Control { // common base class
    abstract click(): void; // abstract method to be overridden
}

class Button extends Control { // derived class
    click(): void {
        console.log("Button Clicked!"); // overridden method
    }
}

class CheckBox extends Control { // derived class
    click(): void {
        console.log("CheckBox Clicked!"); // overridden method
    }
}

// Create objects
const b = new Button();
const c = new CheckBox();

// Click Controls
b.click(); // Outputs: Button Clicked!
c.click(); // Outputs: CheckBox Clicked!

Despite sharing the common click interface, different controls display unique responses. This characteristic demonstrates Polymorphism.