Composite Pattern in TypeScript

Composite Pattern in TypeScript | CodeSignal Learn

Introduction to the Composite Pattern

Welcome back! You have learned about the Adapter Pattern and how it helps make incompatible interfaces work together seamlessly. Now, let's dive into another crucial structural pattern that focuses on composition: the Composite Pattern . The Composite Pattern allows you to build complex structures by combining objects into tree-like structures to represent part-whole hierarchies. This pattern is particularly useful when dealing with applications such as file systems, GUI frameworks, or organizational structures, where you need to treat individual objects and compositions of objects uniformly.

Understanding the Composite Pattern

Join the 1M+ learners on CodeSignal

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

Initial Setup

To start with the Composite Pattern in TypeScript, you can use the abstract keyword to define a base class with an abstract method. This ensures that any subclass must implement the method: TypeScript abstract class Employee {abstract showDetails(): void;} abstract class Employee {abstract showDetails(): void;} The Employee class serves as a conceptual interface where showDetails is an abstract method that must be implemented by all subclasses.

Creating Individual Employees

Next, let's create a class for individual employees, such as a developer. The Developer class will inherit from Employee and implement the showDetails method. We'll use TypeScript's type annotations and access modifiers for properties and constructor parameters: TypeScript class Developer extends Employee {constructor(private name: string, private position: string) {super();} showDetails(): void {console.log(`${this.name} works as ${this.position}.`);}} In this step, the Developer class takes a name and a position to describe the developer's details, and these details are printed whenever showDetails is called.

Creating Manager to Manage Employees

To manage groups of employees, we create a Manager class. This class will also inherit from Employee and use an array to manage multiple employees. We'll specify the type of the employees array and use type annotations for method parameters: TypeScript class Manager extends Employee {private employees: Employee[] = []; add(employee: Employee): void {this.employees.push(employee);} remove(employee: Employee): void {const index = this.employees.indexOf(employee); if (index > -1) {this.employees.splice(index, 1);}}} class Manager extends Employee {private employees: Employee[] = []; add(employee: Employee): void {this.employees.push(employee);} remove(employee: Employee): void {const index = this.employees.indexOf(employee); if (index > -1) {this.employees.splice(index, 1);}}} Here, the Manager class has methods to add and remove employees from its array. This allows the manager to manage a group of employees.

Implementing the Composite Structure

The Manager class will also implement the showDetails method to display details of all employees it manages. We'll use TypeScript's type annotations for the employees array and method parameters: TypeScript class Manager extends Employee {private employees: Employee[] = []; add(employee: Employee): void {this.employees.push(employee);} remove(employee: Employee): void {const index = this.employees.indexOf(employee); if (index > -1) {this.employees.splice(index, 1);}} showDetails(): void {this.employees.forEach((employee: Employee) => {employee.showDetails();});}} class Manager extends Employee {private employees: Employee[] = []; add(employee: Employee): void {this.employees.push(employee);} remove(employee: Employee): void {const index = this.employees.indexOf(employee); if (index > -1) {this.employees.splice(index, 1);}} showDetails(): void {this.employees.forEach((employee: Employee) => {employee.showDetails();});}} This method iterates over all employees managed by the manager and calls their showDetails methods, ensuring that the details of every employee in the hierarchy are displayed.

Full Example

Here is the complete code illustrating the Composite Pattern in an organizational structure, written in TypeScript : TypeScript abstract class Employee {abstract showDetails(): void;} class Developer extends Employee {constructor(private name: string, private position: string) {super();} showDetails(): void {console.log(`${this.name} works as ${this.position}.`);}} class Manager extends Employee {private employees: Employee[] = []; add(employee: Employee): void {this.employees.push(employee);} remove(employee: Employee): void {const index = this.employees.indexOf(employee); if (index > -1) {this.employees.splice(index, 1);}} showDetails(): void {this.employees.forEach((employee: Employee) => {employee.showDetails();});}} // Usage Example // Create developers const dev1 = new Developer('Alice', 'Frontend Developer'); const dev2 = new Developer('Bob', 'Backend Developer'); const dev3 = new Developer('Charlie', 'DevOps Engineer'); // Create managers and add developers to them const managerA = new Manager(); managerA.add(dev1); managerA.add(dev2); const managerB = new Manager(); managerB.add(dev3); // Create a director and add managers to them const director = new Manager(); director.add(managerA); director.add(managerB); // Call showDetails to display the entire organization's structure director.showDetails(); This example demonstrates creating a hierarchical structure with developers, managers, and a director. By calling showDetails on the director, all employee details within the hierarchy are displayed, showcasing the Composite Pattern in action.

Composite Pattern in TypeScript

Introduction to the Composite Pattern

Understanding the Composite Pattern

Join the 1M+ learners on CodeSignal

Initial Setup

Creating Individual Employees

Creating Manager to Manage Employees

Implementing the Composite Structure

Full Example

Conclusion