/** * Observer — a subject keeps a list of dependants and tells them all when * something changes. */ type Unsubscribe = () => void; class Subject<T> { private readonly observers = new Set<(value: T) => void>(); subscribe(observer: (value: T) => void): Unsubscribe { this.observers.add(observer); // The subscription hands back its own undoing. The caller never needs // to hold on to the observer to be able to detach it. return () => { this.observers.delete(observer); }; } notify(value: T): void { // Iterate a copy: an observer is allowed to unsubscribe itself while

/** * Strategy — the part of an algorithm that varies, handed in rather than * branched on. */ type Pricing = (weightKg: number) => number; const standard: Pricing = (kg) => 4 + kg * 1.1; const express: Pricing = (kg) => 9 + kg * 2.4; const courtesy: Pricing = () => 0; // The quote knows nothing about how a price is arrived at. Adding a fourth // way to charge does not touch this function. function quote(weightKg: number, pricing: Pricing): string { return pricing(weightKg).toFixed(2); } const offers: [string, Pricing][] = [ ["standard", standard], ["express", express], ["courtesy", courtesy],

/** * Decorator — wrap a thing in another thing of the same shape. */ type Fetcher = (url: string) => Promise<string>; const plain: Fetcher = async (url) => `<${url}>`; // Each decorator takes a Fetcher and returns a Fetcher. Because the type // going in and the type coming out are identical, they compose in any order // and to any depth — nothing downstream can tell how many there are. const withLogging = (next: Fetcher): Fetcher => async (url) => { console.log(`fetching ${url}`); return next(url); }; const withCache = (next: Fetcher): Fetcher => { const seen = new Map<string, string>(); return async (url) => {

/** * Visitor — add new operations over a fixed set of shapes, without editing * the shapes. */ type Node = | { kind: "literal"; value: number } | { kind: "add"; left: Node; right: Node } | { kind: "negate"; operand: Node }; // This mapped type is the pattern's teeth. A visitor must supply a case for // every kind of node, so adding a fourth kind to Node breaks every visitor // in the codebase at compile time — which is exactly the reminder you want. type Visitor<T> = { [K in Node["kind"]]: (node: Extract<Node, { kind: K }>) => T; }; const walk = <T>(node: Node, visitor: Visitor<T>): T => visitor[node.kind](node as never); const evaluate: Visitor<number> = {

/** * Singleton — one instance, globally reachable, created on first use. */ class Registry { private static instance: Registry | null = null; private readonly entries = new Map<string, unknown>(); // The constructor is private, so `new Registry()` is a compile error. // This is the whole trick: the class takes away your ability to make one. private constructor() {} static getInstance(): Registry { if (Registry.instance === null) { Registry.instance = new Registry(); } return Registry.instance; } set(key: string, value: unknown): void {

/** * State — an object whose behaviour changes with its state, without a single * branch anywhere asking which state it is in. */ type Name = "idle" | "playing" | "paused"; type State = { readonly name: Name; press?: () => State; stop?: () => State; }; // A state is defined by the transitions it offers. One that omits a // transition cannot make it: `stop` on an idle player is not an error to // detect at runtime, it is a property that does not exist. // // Written as functions rather than plain values for a dull but unavoidable // reason — idle refers to playing and playing refers back to idle, and // values cannot be mutually recursive. const idle = (): State => ({ name: "idle", press: playing });

/** * Command — an action turned into an object, so that it can be kept, queued, * replayed, and taken back. */ interface Command { do(): void; undo(): void; } class Document { text = ""; } // Each command closes over everything it needs to reverse itself. Nothing // outside has to remember what was done, or in what order. function append(doc: Document, addition: string): Command { return { do: () => { doc.text += addition; },

/** * Iterator — traverse a collection without exposing how it is stored. */ class Ring<T> { constructor(private readonly items: readonly T[]) {} // Being iterable is a contract, not a base class: implement this one // well-known method and `for...of`, spread and destructuring all work. *[Symbol.iterator](): Generator<T> { for (const item of this.items) { yield item; } } // The same contract, unbounded. Nothing about a sequence requires it // to end — only that each step produces a value when asked. *cycle(): Generator<T> { if (this.items.length === 0) return; for (let i = 0; ; i = (i + 1) % this.items.length) { yield this.items[i];

Gallery of Patterns

Shown as a list, because your system asks for reduced motion.

Continue to Hall of Composition →