← Back to scenarios
ScenarioCatalog DB

Organization chart composite

Use a common component interface for employees and managers to traverse an organization hierarchy recursively.

Problem

An organization chart must support recursive hierarchy operations across individual employees and managers with reports while keeping traversal clients independent of concrete node types.

Related patterns

Composite

View pattern →

Implementations

Composite

TypeScriptApplication

Composite in TypeScript

Represents files and folders through one interface so callers can calculate the size of an individual file or an entire directory tree uniformly.

TypeScript
interface FileSystemNode {
  getName(): string;
  getSizeInBytes(): number;
}

class FileNode implements FileSystemNode {
  constructor(
    private readonly name: string,
    private readonly sizeInBytes: number,
  ) {}

  getName() {
    return this.name;
  }

  getSizeInBytes() {
    return this.sizeInBytes;
  }
}

class FolderNode implements FileSystemNode {
  private readonly children: FileSystemNode[] = [];

  constructor(private readonly name: string) {}

  getName() {
    return this.name;
  }

  add(child: FileSystemNode) {
    this.children.push(child);
  }

  getSizeInBytes() {
    return this.children.reduce(
      (total, child) => total + child.getSizeInBytes(),
      0,
    );
  }
}

const invoices = new FolderNode("invoices");
invoices.add(new FileNode("january.pdf", 120_000));
invoices.add(new FileNode("february.pdf", 140_000));

const archive = new FolderNode("archive");
archive.add(invoices);
archive.add(new FileNode("readme.txt", 2_000));

console.log(archive.getSizeInBytes());

Associated technologies