Day 04 Advanced Topics

Strategy and Command

Strategy lets you swap algorithms at runtime. Command encapsulates a request as an object, enabling undo, queuing, and logging of operations.

~1 hour Hands-on Precision AI Academy

Today’s Objective

Strategy lets you swap algorithms at runtime. Command encapsulates a request as an object, enabling undo, queuing, and logging of operations.

Strategy and Command is one of the most important topics in Design Patterns in 5 Days. This lesson builds the foundation you need before moving to more advanced concepts — take time with each example and run the code yourself.

typescript
TYPESCRIPT
// Strategy — swappable sorting/pricing algorithms
interface SortStrategy<T> { sort(items: T[]): T[];
}

class AlphabeticalSort implements SortStrategy<string> { sort(items: string[]) { return [...items].sort(); }
}

class ReversedSort implements SortStrategy<string> { sort(items: string[]) { return [...items].sort().reverse(); }
}

class Sorter<T> { constructor(private strategy: SortStrategy<T>) {} setStrategy(strategy: SortStrategy<T>) { this.strategy = strategy; } sort(items: T[]) { return this.strategy.sort(items); }
}

const sorter = new Sorter(new AlphabeticalSort());
sorter.sort(['banana', 'apple', 'cherry']); // ['apple', 'banana', 'cherry']
sorter.setStrategy(new ReversedSort());
sorter.sort(['banana', 'apple', 'cherry']); // ['cherry', 'banana', 'apple']
typescript
TYPESCRIPT
// Command — encapsulate operations with undo
interface Command { execute(): void; undo(): void;
}

class MoveCommand implements Command { private prevX: number; private prevY: number; constructor( private shape: Shape, private dx: number, private dy: number, ) { this.prevX = shape.x; this.prevY = shape.y; } execute() { this.shape.x += this.dx; this.shape.y += this.dy; } undo() { this.shape.x = this.prevX; this.shape.y = this.prevY; }
}

class CommandHistory { private history: Command[] = []; execute(cmd: Command) { cmd.execute(); this.history.push(cmd); } undo() { this.history.pop()?.undo(); }
}

const history = new CommandHistory();
history.execute(new MoveCommand(circle, 10, 0));
history.execute(new MoveCommand(circle, 0, 5));
history.undo(); // circle moves back

Exercise: Build a Text Editor with Undo

  1. Create a TextEditor class with insert/delete methods
  2. Wrap each operation in a Command object
  3. Use CommandHistory to execute and undo commands
  4. Implement redo by keeping a redo stack
  5. Add a keyboard shortcut: Ctrl+Z = undo, Ctrl+Y = redo

Supporting Resources

Go deeper with these references.

Refactoring.Guru
Design Patterns Catalog Visual explanations of all 23 GoF patterns with examples in multiple languages.
GitHub
TypeScript Design Patterns Community collection of design pattern implementations in TypeScript.
O'Reilly
Head First Design Patterns The most approachable book-length treatment of the classic Gang of Four patterns.

Day 4 Checkpoint

Before moving on, make sure you can answer these without looking:

Continue To Day 5
MVC and Architecture