Applying Object-Oriented Programming Principles in TypeScript

Introduction and Lesson Goal

Today's mission involves using multiple Object-Oriented Programming (OOP) principles to tackle complex tasks in TypeScript . When principles like Encapsulation, Abstraction, Polymorphism, and Composition are integrated, the resulting code becomes streamlined and easier to manage. Our goal is to dissect two real-world examples, gaining insights into how these principles can seamlessly orchestrate solutions.

Real-life Example 1: Building an Online Library System

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

TypeScript

// Base class for different types of library users
class Member {
    private name: string;

    constructor(name: string) {
        this.name = name;
    }

    checkOutBook(book: Book): void {
        console.log(`${this.name} checked out ${book.getBookType()} book ${book.getTitle()}.`);
    }
}

// Base class for different types of books
abstract class Book {
    protected title: string;

    constructor(title: string) {
        this.title = title;
    }
    
    public getTitle(): string {
        return this.title
    };

    abstract getBookType(): string;
    
}

// Inherits from Book, represents a digital book
class DigitalBook extends Book {
    getBookType(): string {
        return "Digital";
    }
}

// Inherits from Book, represents a physical book
class PhysicalBook extends Book {
    getBookType(): string {
        return "Physical";
    }
}

// Library class that manages members and books
class Library {
    private members: Member[] = [];
    private books: Book[] = [];

    addMember(member: Member): void {
        this.members.push(member);
    }

    addBook(book: Book): void {
        this.books.push(book);
    }
}

const myLibrary = new Library();

const alice = new Member("Alice");
const bob = new Member("Bob");

myLibrary.addMember(alice);
myLibrary.addMember(bob);

const digitalBook = new DigitalBook("The TypeScript Handbook");
const physicalBook = new PhysicalBook("Learning TypeScript Design Patterns");

myLibrary.addBook(digitalBook);
myLibrary.addBook(physicalBook);

alice.checkOutBook(digitalBook); // Prints: Alice checked out Digital book The TypeScript Handbook.
bob.checkOutBook(physicalBook);  // Prints: Bob checked out Physical book Learning TypeScript Design Patterns.

// Base class for different types of library users
class Member {
    private name: string;

    constructor(name: string) {
        this.name = name;
    }

    checkOutBook(book: Book): void {
        console.log(`${this.name} checked out ${book.getBookType()} book ${book.getTitle()}.`);
    }
}

// Base class for different types of books
abstract class Book {
    protected title: string;

    constructor(title: string) {
        this.title = title;
    }
    
    public getTitle(): string {
        return this.title
    };

    abstract getBookType(): string;
    
}

// Inherits from Book, represents a digital book
class DigitalBook extends Book {
    getBookType(): string {
        return "Digital";
    }
}

// Inherits from Book, represents a physical book
class PhysicalBook extends Book {
    getBookType(): string {
        return "Physical";
    }
}

// Library class that manages members and books
class Library {
    private members: Member[] = [];
    private books: Book[] = [];

    addMember(member: Member): void {
        this.members.push(member);
    }

    addBook(book: Book): void {
        this.books.push(book);
    }
}

const myLibrary = new Library();

const alice = new Member("Alice");
const bob = new Member("Bob");

myLibrary.addMember(alice);
myLibrary.addMember(bob);

const digitalBook = new DigitalBook("The TypeScript Handbook");
const physicalBook = new PhysicalBook("Learning TypeScript Design Patterns");

myLibrary.addBook(digitalBook);
myLibrary.addBook(physicalBook);

alice.checkOutBook(digitalBook); // Prints: Alice checked out Digital book The TypeScript Handbook.
bob.checkOutBook(physicalBook);  // Prints: Bob checked out Physical book Learning TypeScript Design Patterns.

TypeScript

// Define the basic Shape class
abstract class Shape {
    // Abstract method that will be implemented in each subclass
    abstract draw(): void;
}

// Define the Circle class
class Circle extends Shape {
    // Implement the draw method for circle
    draw(): void {
        console.log("Drawing a circle.");
    }
}

// Define the Square class
class Square extends Shape {
    // Implement the draw method for square
    draw(): void {
        console.log("Drawing a square.");
    }
}

// Define the ShapeComposite class
class ShapeComposite extends Shape {
    private shapes: Shape[] = [];

    // Add a new shape to the composite
    addShape(shape: Shape): void {
        this.shapes.push(shape);
    }

    // Implement the draw method to draw each shape in composite
    draw(): void {
        for (const shape of this.shapes) {
            shape.draw();
        }
    }
}

const circle = new Circle();
const square = new Square();

// Drawing individual shapes
circle.draw();  // Output: Drawing a circle.
square.draw();  // Output: Drawing a square.

// Create a ShapeComposite instance for composite shapes
const compositeShape = new ShapeComposite();

// Add individual shapes to the composite
compositeShape.addShape(circle);
compositeShape.addShape(square);

// Drawing the composite shape
compositeShape.draw();
/*
Output:
Drawing a circle.
Drawing a square.
*/

// Define the basic Shape class
abstract class Shape {
    // Abstract method that will be implemented in each subclass
    abstract draw(): void;
}

// Define the Circle class
class Circle extends Shape {
    // Implement the draw method for circle
    draw(): void {
        console.log("Drawing a circle.");
    }
}

// Define the Square class
class Square extends Shape {
    // Implement the draw method for square
    draw(): void {
        console.log("Drawing a square.");
    }
}

// Define the ShapeComposite class
class ShapeComposite extends Shape {
    private shapes: Shape[] = [];

    // Add a new shape to the composite
    addShape(shape: Shape): void {
        this.shapes.push(shape);
    }

    // Implement the draw method to draw each shape in composite
    draw(): void {
        for (const shape of this.shapes) {
            shape.draw();
        }
    }
}

const circle = new Circle();
const square = new Square();

// Drawing individual shapes
circle.draw();  // Output: Drawing a circle.
square.draw();  // Output: Drawing a square.

// Create a ShapeComposite instance for composite shapes
const compositeShape = new ShapeComposite();

// Add individual shapes to the composite
compositeShape.addShape(circle);
compositeShape.addShape(square);

// Drawing the composite shape
compositeShape.draw();
/*
Output:
Drawing a circle.
Drawing a square.
*/

TypeScript

// Base class for different types of library users
class Member {
    private name: string;

    constructor(name: string) {
        this.name = name;
    }

    checkOutBook(book: Book): void {
        console.log(`${this.name} checked out ${book.getBookType()} book ${book.getTitle()}.`);
    }
}

// Base class for different types of books
abstract class Book {
    protected title: string;

    constructor(title: string) {
        this.title = title;
    }
    
    public getTitle(): string {
        return this.title
    };

    abstract getBookType(): string;
    
}

// Inherits from Book, represents a digital book
class DigitalBook extends Book {
    getBookType(): string {
        return "Digital";
    }
}

// Inherits from Book, represents a physical book
class PhysicalBook extends Book {
    getBookType(): string {
        return "Physical";
    }
}

// Library class that manages members and books
class Library {
    private members: Member[] = [];
    private books: Book[] = [];

    addMember(member: Member): void {
        this.members.push(member);
    }

    addBook(book: Book): void {
        this.books.push(book);
    }
}

const myLibrary = new Library();

const alice = new Member("Alice");
const bob = new Member("Bob");

myLibrary.addMember(alice);
myLibrary.addMember(bob);

const digitalBook = new DigitalBook("The TypeScript Handbook");
const physicalBook = new PhysicalBook("Learning TypeScript Design Patterns");

myLibrary.addBook(digitalBook);
myLibrary.addBook(physicalBook);

alice.checkOutBook(digitalBook); // Prints: Alice checked out Digital book The TypeScript Handbook.
bob.checkOutBook(physicalBook);  // Prints: Bob checked out Physical book Learning TypeScript Design Patterns.

TypeScript

// Define the basic Shape class
abstract class Shape {
    // Abstract method that will be implemented in each subclass
    abstract draw(): void;
}

// Define the Circle class
class Circle extends Shape {
    // Implement the draw method for circle
    draw(): void {
        console.log("Drawing a circle.");
    }
}

// Define the Square class
class Square extends Shape {
    // Implement the draw method for square
    draw(): void {
        console.log("Drawing a square.");
    }
}

// Define the ShapeComposite class
class ShapeComposite extends Shape {
    private shapes: Shape[] = [];

    // Add a new shape to the composite
    addShape(shape: Shape): void {
        this.shapes.push(shape);
    }

    // Implement the draw method to draw each shape in composite
    draw(): void {
        for (const shape of this.shapes) {
            shape.draw();
        }
    }
}

const circle = new Circle();
const square = new Square();

// Drawing individual shapes
circle.draw();  // Output: Drawing a circle.
square.draw();  // Output: Drawing a square.

// Create a ShapeComposite instance for composite shapes
const compositeShape = new ShapeComposite();

// Add individual shapes to the composite
compositeShape.addShape(circle);
compositeShape.addShape(square);

// Drawing the composite shape
compositeShape.draw();
/*
Output:
Drawing a circle.
Drawing a square.
*/

Introduction and Lesson Goal

Real-life Example 1: Building an Online Library System

Join the 1M+ learners on CodeSignal

Real-life Example 2: Building a Shape Drawing Application

Lesson Summary and Practice