TypeScript Bridge Pattern

What It Is

The Bridge pattern splits one concept into two independent dimensions so they can vary separately. Shapes and ways of drawing them; messages and ways of sending them.

Without the bridge you get one class per combination — VectorCircle, TextCircle, VectorSquare... — and the list multiplies. With the bridge, one side holds an interface to the other: any shape works with any renderer.

Example: Shapes and Renderers

2 renderers × 2 shapes would be 4 combined classes. Here it is one Shape class plus 2 renderer classes, connected by one interface field — the bridge.

Any shape, any renderer

The same circle draws itself two ways just by holding a different renderer. Adding a renderer or a shape adds one class, never a whole row of combinations.

Write a TypeScript program showing the Bridge pattern: a Renderer interface with a draw(name) method implemented by VectorRenderer and TextRenderer as one dimension, and a Shape class holding a name plus a Renderer as the other. Build a circle with each renderer and a square with the vector one, and print every line.

> Output: TypeScript file and captured output

Prompt

Write a TypeScript program showing the Bridge pattern: a Renderer interface with a draw(name) method implemented by VectorRenderer and TextRenderer as one dimension, and a Shape class holding a name plus a Renderer as the other. Build a circle with each renderer and a square with the vector one, and print every line.

Output: TypeScript file and captured output

// One dimension: HOW to draw.
interface Renderer {
  draw(name: string): string
}

class VectorRenderer implements Renderer {
  draw(name: string): string {
    return "drawing " + name + " with smooth vector lines"
  }
}

class TextRenderer implements Renderer {
  draw(name: string): string {
    return "drawing " + name + " with text characters"
  }
}

// Other dimension: WHAT to draw. The renderer field is the bridge.
class Shape {
  private name: string
  private renderer: Renderer

  constructor(name: string, renderer: Renderer) {
    this.name = name
    this.renderer = renderer
  }

  draw(): string {
    return this.renderer.draw(this.name)
  }
}

const shapes: Shape[] = [
  new Shape("circle", new VectorRenderer()),
  new Shape("circle", new TextRenderer()),
  new Shape("square", new VectorRenderer())
]

for (const shape of shapes) {
  console.log(shape.draw())
}

When to Use It

Use it when you notice combination explosion: every new kind on one axis forces new classes on the other. Two independent axes — split them.

Skip it when one dimension has exactly one implementation. A bridge to a single shore is just a pier.

Pros and Cons

Pros: the two sides grow independently; combinations come free; each side is testable alone.

Cons: more indirection up front; recognizing the two axes early is genuinely hard — splitting too early creates abstraction nobody needs.