Composite Pattern

The Composite Pattern with real-world scenarios you already know, then see how it works in software.

📖 What Is the Composite Pattern (Simple Explanation)

The Composite Pattern lets you treat individual objects and groups of objects the same way.

It builds tree-like structures where:

• Leaf nodes are individual things (like a button, a file, a single employee)
• Composite nodes are collections of other things (like a panel with multiple buttons, a folder with files, or a manager with employees)

🎨 Real-World Examples (Easy to Visualize)

📁 1. File System (Folders & Files)

• File — an individual document (leaf)
• Folder — a container holding files or other folders (composite)

You can open, move, or delete both files and folders — even though a folder contains more things inside.

➡️ File and Folder both follow the same interface:

• open()
• delete()
• getSize()

But a folder recursively calls those methods on its contents.

🧑‍💼 2. Company Organizational Chart

• Employee — an individual staff member (leaf)
• Manager — has multiple subordinates (composite)

Both employees and managers can:

• getName()
• getSalary()
• showDetails()

But a manager does this by delegating to its team.

🧱 3. UI Layout

• Button, Label, TextBox — UI elements (leaves)
• Panel, Form, Page — contain other UI elements (composites)

You can render, move, or hide both individual components and entire panels in the same way.

🖥️ Code Concept Behind This

Let’s pick the File System case and model it in TypeScript using the Composite Pattern.

interface FileSystemItem { show(indent?: string): void; } class File implements FileSystemItem { constructor(private name: string) {} show(indent: string = '') { console.log(`${indent}- ${this.name}`); } } class Folder implements FileSystemItem { private items: FileSystemItem[] = []; constructor(private name: string) {} add(item: FileSystemItem) { this.items.push(item); } show(indent: string = '') { console.log(`${indent}+ ${this.name}`); this.items.forEach(item => item.show(indent + ' ')); } } // Usage const file1 = new File('Resume.pdf'); const file2 = new File('CoverLetter.docx'); const folder = new Folder('Job Applications'); folder.add(file1); folder.add(file2); const mainFolder = new Folder('Documents'); mainFolder.add(folder); mainFolder.add(new File('Photo.jpg')); mainFolder.show(); 

Console Output:

+ Documents + Job Applications - Resume.pdf - CoverLetter.docx - Photo.jpg 

🎯 Why Is This Useful?

✅ You can treat both a file and a folder the same way (show())

✅ Easy to build hierarchies

✅ Great for recursive structures like:

• Filesystem
• UI Layouts
• Organization Trees
• Nested Menus
• Multi-step Forms ✅ It lets you write simpler, cleaner, and scalable code

✅ Summary

👉 Composite Pattern makes hierarchical structures uniform and easy to manage