Design Patterns in TypeScript

A hands-on learning repository for all 23 GoF design patterns. Every pattern has a raw version (the messy code that motivates the pattern) and a solution you implement yourself.

---

Prerequisites

• Node.js 18+
• npm 9+

npm install

---

Learning Workflow

Each pattern follows the same six-step loop:

1. Read      →  open the pattern's README.md
2. Study     →  read raw/index.ts to understand the problem
3. Scaffold  →  ask Claude to create the solution skeleton
4. Implement →  fill in every TODO in solution/index.ts
5. Test      →  npm test -- --testPathPattern=<pattern>
6. Review    →  ask Claude to review your solution

Step-by-step

1. Pick a pattern and read its README

Every pattern directory contains a README.md covering intent, GoF structure, when to use, pros/cons, and a before/after code walkthrough. Start here before writing any code.

src/creational/factory-method/README.md

2. Study the raw code

raw/index.ts shows the real-world problem the pattern solves — coupled code, duplication, fragile conditionals. Read the comments; they call out exactly what hurts and why.

src/creational/factory-method/raw/index.ts

3. Scaffold the solution

Ask Claude Code in plain English or use the slash command. It reads your raw/index.ts and README.md, then generates:

• solution/index.ts — all GoF participants as typed stubs with // TODO: markers
• solution/index.test.ts — Jest tests that define the expected behavior

/new-solution factory-method

Or just say: "create a solution for factory method" / "scaffold the observer pattern" / "I want to implement singleton"

4. Implement the solution

Open solution/index.ts and fill in every // TODO: in the order the scaffold checklist describes.

5. Run the tests

npm test -- --testPathPattern=factory-method

All tests should pass when you are done.

6. Get a code review

Ask Claude Code in plain English or use the slash command. It checks your solution against the canonical GoF structure, TypeScript best practices, SOLID principles, and pattern-specific pitfalls, then gives you a verdict and up to three actionable suggestions.

/review-pattern factory-method

Or just say: "review my factory method solution" / "check my observer implementation" / "give me feedback on singleton"

---

Project Structure

src/
  creational/           # object-creation patterns
  structural/           # composition patterns
  behavioral/           # communication patterns

Each pattern/
  README.md             # concept, structure, when to use
  raw/
    index.ts            # dirty code — the problem to solve
  solution/             # created by the new-solution skill
    index.ts            # your implementation (fill in the TODOs)
    index.test.ts       # Jest tests

---

Pattern Catalog

Creational

Pattern	Problem it solves
Singleton	Multiple instances of a shared resource
Factory Method	Hardcoded new ConcreteClass() scattered across callers
Abstract Factory	Platform-specific object creation duplicated everywhere
Builder	Telescoping constructors with many optional parameters
Prototype	Manual field-by-field copying causing shallow-copy bugs

Structural

Pattern	Problem it solves
Adapter	Incompatible interfaces between existing classes
Bridge	Subclass explosion from combining two dimensions (e.g. shape × color)
Composite	Treating individual objects and groups differently with instanceof
Decorator	Feature combinations requiring exponentially many subclasses
Facade	Client code tangled with a complex subsystem
Flyweight	Memory waste from duplicating shared immutable state across many objects
Proxy	No control over access, caching, or lazy init for expensive objects

Behavioral

Pattern	Problem it solves
Chain of Responsibility	All request handling crammed into one monolithic function
Command	Direct method calls with no history, no undo
Iterator	Clients knowing internal structure of different collections
Mediator	Components holding direct references to each other
Memento	Undo/redo requiring public exposure of private state
Observer	Hardcoded calls to concrete subscribers
State	Giant switch statements that grow with every new state
Strategy	All algorithm variants baked into one class
Template Method	Duplicated algorithm skeleton across similar classes
Visitor	Adding new operations forces changes to every element class
Interpreter	Ad-hoc string parsing with no extensible grammar

---

Claude Code Skills

Both skills respond to slash commands and plain natural language — no need to remember the exact syntax.

Skill	Slash command	Natural language examples
Scaffold solution	/new-solution <pattern>	"create a solution for factory method", "scaffold observer", "I want to implement builder"
Review solution	/review-pattern <pattern>	"review my singleton solution", "check my decorator implementation", "give feedback on strategy"

---

Commands

npm test                                        # run all tests
npm test -- --testPathPattern=factory-method    # run one pattern's tests
npm run build                                   # compile TypeScript

---

Recommended Order

If you are new to design patterns, work through them in this sequence — each builds intuition for the next:

1. Creational: Singleton → Factory Method → Abstract Factory → Builder → Prototype
2. Structural: Adapter → Decorator → Facade → Proxy → Composite → Bridge → Flyweight
3. Behavioral: Strategy → Template Method → Observer → Command → State → Chain of Responsibility → Iterator → Mediator → Memento → Visitor → Interpreter