Composite Pattern

Introduction

The Composite Pattern is a structural design pattern that allows you to compose objects into tree structures to represent part-whole hierarchies. It lets clients treat individual objects and compositions of objects uniformly. This pattern is particularly useful when dealing with complex systems where parts can be combined in various ways.

Concept

In the Composite Pattern, there are two main types of components:

1. Leaf: Represents an object that has no children.
2. Composite: Represents a group of leaf or composite objects and implements operations to manage its child components.

The key idea is that you can treat both individual objects (leaf) and compositions of objects (composite) uniformly through a common interface. This simplifies the client code, as it doesn't need to differentiate between leaf and composite nodes.

Examples

Let's illustrate the Composite Pattern with an example where we have a simple file system structure consisting of files and directories.

Step 1: Define the Common Interface

First, we define a common interface for both files and directories. This interface will declare methods that are applicable to all components in the tree structure.

1interface Component {
2getName(): string;
3getSize(): number;
4add(component: Component): void; // Only relevant for Composite
5remove(component: Component): void; // Only relevant for Composite
6}

Step 2: Implement the Leaf (File)

Next, we implement the Leaf component, which represents a file. Files do not have children.

1class File implements Component {
2private name: string;
3private size: number;
4 
5constructor(name: string, size: number) {
6  this.name = name;
7  this.size = size;
8}
9 
10getName(): string {
11  return this.name;
12}
13 
14getSize(): number {
15  return this.size;
16}
17 
18add(component: Component): void {
19  throw new Error("Cannot add to a file");
20}
21 
22remove(component: Component): void {
23  throw new Error("Cannot remove from a file");
24}
25}

Step 3: Implement the Composite (Directory)

Now, we implement the Composite component, which represents a directory. Directories can contain both files and other directories.

1class Directory implements Component {
2private name: string;
3private components: Component[] = [];
4 
5constructor(name: string) {
6  this.name = name;
7}
8 
9getName(): string {
10  return this.name;
11}
12 
13getSize(): number {
14  let totalSize = 0;
15  for (const component of this.components) {
16    totalSize += component.getSize();
17  }
18  return totalSize;
19}
20 
21add(component: Component): void {
22  this.components.push(component);
23}
24 
25remove(component: Component): void {
26  const index = this.components.indexOf(component);
27  if (index !== -1) {
28    this.components.splice(index, 1);
29  }
30}
31}

Step 4: Using the Composite Pattern

Finally, we can use the components to create a file system structure and calculate the total size of directories.

1const root = new Directory("root");
2const documents = new Directory("documents");
3const pictures = new Directory("pictures");
4 
5const report = new File("report.pdf", 1024);
6const photo = new File("photo.jpg", 2048);
7 
8documents.add(report);
9pictures.add(photo);
10root.add(documents);
11root.add(pictures);
12 
13console.log(`Total size of root: ${root.getSize()} bytes`);

Total size of root: 3072 bytes

In this example, both File and Directory implement the Component interface. The Directory class can contain other Component objects, allowing for a hierarchical structure. This uniformity allows clients to treat individual files and directories in the same way.

What's Next?

Next up, we will explore the Decorator Pattern, which allows behavior to be added to individual objects, either statically or dynamically, without affecting the behavior of other objects from the same class.