← Back to scenarios
ScenarioCatalog DB

Shape renderer bridge

Render shapes through screen, canvas, or SVG backends without changing shape behavior.

Problem

Shape abstractions must support multiple rendering implementations without coupling shape logic to a particular drawing backend.

Related patterns

Implementations

Bridge

TypeScriptApplication

Bridge in TypeScript

Separates remote-control behavior from device implementations so remotes and devices can evolve independently.

TypeScript
interface Device {
  enable(): void;
  disable(): void;
  isEnabled(): boolean;
  setVolume(percent: number): void;
}

class Television implements Device {
  private enabled = false;

  enable() {
    this.enabled = true;
  }

  disable() {
    this.enabled = false;
  }

  isEnabled() {
    return this.enabled;
  }

  setVolume(percent: number) {
    console.log(`TV volume set to ${percent}%`);
  }
}

class Speaker implements Device {
  private enabled = false;

  enable() {
    this.enabled = true;
  }

  disable() {
    this.enabled = false;
  }

  isEnabled() {
    return this.enabled;
  }

  setVolume(percent: number) {
    console.log(`Speaker volume set to ${percent}%`);
  }
}

class RemoteControl {
  constructor(protected readonly device: Device) {}

  togglePower() {
    if (this.device.isEnabled()) {
      this.device.disable();
    } else {
      this.device.enable();
    }
  }
}

class VolumeRemoteControl extends RemoteControl {
  volumeUp() {
    this.device.setVolume(70);
  }
}

const remote = new VolumeRemoteControl(new Speaker());

remote.togglePower();
remote.volumeUp();

Associated technologies