Object-Oriented
Design & the Patterns
that scale it.

interface Payment { process(amount: number): void; }

class CreditCardPayment implements Payment {
  process(amount: number): void { console.log('Card: ' + amount); }
}
class UpiPayment implements Payment {
  process(amount: number): void { console.log('UPI: ' + amount); }
}

abstract class PaymentGateway {
  abstract createPayment(): Payment;      // the factory method
  makePayment(amount: number): void {     // shared flow, product varies
    this.createPayment().process(amount);
  }
}

class CreditCardGateway extends PaymentGateway {
  createPayment(): Payment { return new CreditCardPayment(); }
}
class UpiGateway extends PaymentGateway {
  createPayment(): Payment { return new UpiPayment(); }
}

// Usage: the caller never writes new UpiPayment()
const gateway: PaymentGateway = new UpiGateway();
gateway.makePayment(100);                 // UPI: 100

interface Header { render(): string; }
interface Footer { render(): string; }     // Content omitted for brevity
interface DocumentExporter {              // one factory = one family
  createHeader(): Header;
  createFooter(): Footer;
}

class PdfHeader implements Header { render() { return 'PDF header'; } }
class PdfFooter implements Footer { render() { return 'PDF footer'; } }
class ExcelHeader implements Header { render() { return 'Excel header'; } }
class ExcelFooter implements Footer { render() { return 'Excel footer'; } }
class PdfExporterFactory implements DocumentExporter {
  createHeader(): Header { return new PdfHeader(); }
  createFooter(): Footer { return new PdfFooter(); }
}
class ExcelExporterFactory implements DocumentExporter {
  createHeader(): Header { return new ExcelHeader(); }
  createFooter(): Footer { return new ExcelFooter(); }
}

function exportReport(factory: DocumentExporter): void {
  console.log(factory.createHeader().render());  // never names PDF or Excel
  console.log(factory.createFooter().render());
}

exportReport(new PdfExporterFactory());   // swap in ExcelExporterFactory for .xlsx

class SocialMediaPost {
  content = '';
  images: string[] = [];
  video?: string;
  poll?: string[];
}

class PostBuilder {
  private post = new SocialMediaPost();
  setContent(text: string): this { this.post.content = text; return this; }
  addImage(url: string): this { this.post.images.push(url); return this; }
  addVideo(url: string): this { this.post.video = url; return this; }
  addPoll(options: string[]): this { this.post.poll = options; return this; }
  build(): SocialMediaPost {              // validate, then hand over
    if (!this.post.content) throw new Error('A post needs content');
    return this.post;
  }
}

// Usage: only the parts this post needs, in any order
const post = new PostBuilder()
  .setContent('Launch day!')
  .addImage('hero.png')
  .addPoll(['Love it', 'Meh'])
  .build();
console.log(post.images.length, post.poll);   // 1 [ 'Love it', 'Meh' ]

interface Prototype<T> {
  clone(): T;
}

class SocialMediaPost implements Prototype<SocialMediaPost> {
  constructor(
    public content: string,
    public hashtags: string[],
    public media: string,
    public scheduledTime: string,
  ) {}

  clone(): SocialMediaPost {              // copy, don't rebuild
    return new SocialMediaPost(
      this.content, [...this.hashtags], this.media, this.scheduledTime,
    );                                    // [...] copies the array too
  }
}

// One template, many posts
const promoTemplate = new SocialMediaPost('Big sale!', ['#deal'], 'promo.png', '10:00');
const post1 = promoTemplate.clone();
post1.content = 'Big sale - shoes!';      // tweak only what differs
post1.hashtags.push('#shoes');
console.log(promoTemplate.hashtags, '|', post1.hashtags);   // ['#deal'] | ['#deal','#shoes']

type Colors = { background: string; text: string };

interface ThemeRenderer {               // implementation side
  renderTheme(colors: Colors): void;
}
class ReactRenderer implements ThemeRenderer {
  renderTheme(c: Colors): void { console.log('React CSS vars', c); }
}
class ReactNativeRenderer implements ThemeRenderer {
  renderTheme(c: Colors): void { console.log('RN StyleSheet', c); }
}

abstract class Theme {                  // abstraction side
  constructor(protected renderer: ThemeRenderer) {}   // the bridge
  abstract applyTheme(): void;
}
class DarkTheme extends Theme {
  applyTheme(): void { this.renderer.renderTheme({ background: '#121212', text: '#fff' }); }
}
class LightTheme extends Theme {
  applyTheme(): void { this.renderer.renderTheme({ background: '#fff', text: '#121212' }); }
}

new DarkTheme(new ReactRenderer()).applyTheme();
new DarkTheme(new ReactNativeRenderer()).applyTheme();   // same theme, other platform
new LightTheme(new ReactRenderer()).applyTheme();

interface CartItem {                    // one interface for leaf and group
  getName(): string;
  getPrice(): number;
}

class Product implements CartItem {     // leaf
  constructor(private name: string, private price: number) {}
  getName(): string { return this.name; }
  getPrice(): number { return this.price; }
}

class ProductBundle implements CartItem {   // composite
  private items: CartItem[] = [];
  constructor(private name: string) {}
  add(item: CartItem): this { this.items.push(item); return this; }
  getName(): string { return this.name; }
  getPrice(): number {                  // sums children, bundles included
    return this.items.reduce((sum, item) => sum + item.getPrice(), 0);
  }
}

const tShirt = new Product('T-Shirt', 500);
const stationery = new ProductBundle('Stationery')
  .add(new Product('Pen', 40)).add(new Product('Notebook', 60));
const bundle = new ProductBundle('Back to school').add(tShirt).add(stationery);
console.log(bundle.getPrice());         // 600 - a bundle inside a bundle

interface TextComponent {
  render(): string;
}

class PlainText implements TextComponent {      // the core object
  constructor(private content: string) {}
  render(): string { return this.content; }
}

class TextDecorator implements TextComponent {  // same interface, wraps one
  constructor(protected inner: TextComponent) {}
  render(): string { return this.inner.render(); }
}

class BoldDecorator extends TextDecorator {
  render(): string { return '<b>' + super.render() + '</b>'; }
}
class ItalicDecorator extends TextDecorator {
  render(): string { return '<i>' + super.render() + '</i>'; }
}
class UnderlineDecorator extends TextDecorator {
  render(): string { return '<u>' + super.render() + '</u>'; }
}

const text = new ItalicDecorator(new UnderlineDecorator(new BoldDecorator(new PlainText('Hello!'))));
console.log(text.render());             // <i><u><b>Hello!</b></u></i>

class UserService {
  getUser(id: string) { return { id, name: 'Ada' }; }
}
class OrderService {
  getOrders(userId: string) { return [{ orderId: 'ORD1', item: 'Laptop', userId }]; }
}
class InventoryService {
  checkStock(item: string) { return { item, inStock: true }; }
}
class PaymentService {
  getStatus(orderId: string) { return { orderId, status: 'Paid' }; }
}

class APIGatewayFacade {                // one door to four services
  private users = new UserService();
  private orders = new OrderService();
  private stock = new InventoryService();
  private payments = new PaymentService();
  getDashboard(userId: string) {
    const orders = this.orders.getOrders(userId).map((o) =>
      ({ ...o, payment: this.payments.getStatus(o.orderId), stock: this.stock.checkStock(o.item) }));
    return { user: this.users.getUser(userId), orders };
  }
}

console.log(new APIGatewayFacade().getDashboard('USR001'));   // client makes one call

class ProductInfo {                     // intrinsic: shared, never changes
  constructor(
    readonly id: string, readonly name: string,
    readonly brand: string, readonly imageUrl: string,
  ) {}
}

class ProductFactory {                  // hands out one instance per id
  private static cache = new Map<string, ProductInfo>();
  static get(id: string, name: string, brand: string, img: string): ProductInfo {
    if (!this.cache.has(id)) this.cache.set(id, new ProductInfo(id, name, brand, img));
    return this.cache.get(id)!;         // same object every time
  }
}

class ProductDisplay {                  // extrinsic: per view, tiny
  constructor(private price: number, private inStock: boolean, private info: ProductInfo) {}
  render(): string {
    return this.info.name + ' by ' + this.info.brand + ' - ' + this.price + (this.inStock ? '' : ' (out)');
  }
}

const phone = ProductFactory.get('SM123', 'Samsung F23', 'Samsung', 'https://img.jpg');
const listing = [new ProductDisplay(500, true, phone), new ProductDisplay(450, false, phone)];
listing.forEach((d) => console.log(d.render()));   // two views, one ProductInfo

interface ProductSource {
  getProducts(): string[];
}
class OriginServer implements ProductSource {   // the real, slow thing
  getProducts(): string[] {
    console.log('origin hit');          // imagine 300 ms of network here
    return ['Laptop', 'Smartphone', 'Keyboard'];
  }
}

class CDNProxy implements ProductSource {       // same interface, stands in front
  private cache: string[] | null = null;
  private fetchedAt = 0;
  constructor(private origin: ProductSource, private ttlMs = 10_000) {}
  getProducts(): string[] {
    const fresh = Date.now() - this.fetchedAt < this.ttlMs;
    if (this.cache && fresh) return this.cache;   // serve from cache, skip origin
    this.cache = this.origin.getProducts();
    this.fetchedAt = Date.now();
    return this.cache;
  }
}

const cdn: ProductSource = new CDNProxy(new OriginServer());
cdn.getProducts();                      // origin hit
cdn.getProducts();                      // served from cache, origin untouched

interface Command { execute(): void; }

class LightBulb {                                   // receiver: does the real work
  turnOn(): void { console.log('Bulb is on'); }
  turnOff(): void { console.log('Bulb is off'); }
}

class TurnOnCommand implements Command {
  constructor(private bulb: LightBulb) {}
  execute(): void { this.bulb.turnOn(); }
}
class TurnOffCommand implements Command {
  constructor(private bulb: LightBulb) {}
  execute(): void { this.bulb.turnOff(); }
}

class Remote {                                      // invoker: knows only Command
  private command?: Command;
  setCommand(command: Command): void { this.command = command; }
  pressButton(): void { this.command?.execute(); }
}

const remote = new Remote();
const bulb = new LightBulb();
remote.setCommand(new TurnOnCommand(bulb));  remote.pressButton();   // Bulb is on
remote.setCommand(new TurnOffCommand(bulb)); remote.pressButton();   // Bulb is off

interface CartItem { name: string; price: number; }
interface CartIterator { hasNext(): boolean; next(): CartItem; }

class ShoppingCart {
  private items: CartItem[] = [];                       // storage stays private
  add(item: CartItem): void { this.items.push(item); }
  createIterator(): CartIterator {
    let index = 0;
    return { hasNext: () => index < this.items.length, next: () => this.items[index++] };
  }
}

class DiscountEngine {
  static apply(it: CartIterator): void {                // never sees the array
    while (it.hasNext()) {
      const item = it.next();
      console.log(item.price > 1000 ? '10% off ' + item.name : 'No discount for ' + item.name);
    }
  }
}

const cart = new ShoppingCart();
cart.add({ name: 'Laptop', price: 1500 });
cart.add({ name: 'Notebook', price: 50 });
DiscountEngine.apply(cart.createIterator());

interface ChatMediator { send(message: string, sender: User): void; }

class User {
  constructor(public name: string, private room: ChatMediator) {}
  send(message: string): void { this.room.send(message, this); }   // talks to the room only
  receive(message: string, from: string): void {
    console.log(this.name + ' got "' + message + '" from ' + from);
  }
}

class ChatRoom implements ChatMediator {                              // the mediator
  private users: User[] = [];
  register(user: User): void { this.users.push(user); }
  send(message: string, sender: User): void {
    for (const user of this.users) {
      if (user !== sender) user.receive(message, sender.name);       // routing lives here
    }
  }
}

const room = new ChatRoom();
const alice = new User('Alice', room);
for (const user of [alice, new User('Bob', room), new User('Charlie', room)]) room.register(user);
alice.send('Hello everyone!');

interface Observer { update(temperature: number): void; }

class WeatherStation {                                    // the subject
  private observers: Observer[] = [];
  private temperature = 0;
  addObserver(observer: Observer): void { this.observers.push(observer); }
  removeObserver(observer: Observer): void {
    this.observers = this.observers.filter((o) => o !== observer);
  }
  setTemperature(temp: number): void {
    this.temperature = temp;
    for (const o of this.observers) o.update(this.temperature);   // notify everyone
  }
}

class TemperatureDisplay implements Observer {
  update(temperature: number): void { console.log('Display: ' + temperature + ' C'); }
}
class Fan implements Observer {
  update(temperature: number): void { console.log(temperature > 25 ? 'Fan on' : 'Fan off'); }
}

const station = new WeatherStation();
station.addObserver(new TemperatureDisplay());
station.addObserver(new Fan());
station.setTemperature(30);                               // Display: 30 C · Fan on

interface State { play(player: MediaPlayer): void; pause(player: MediaPlayer): void; }

class PlayingState implements State {
  play(): void { console.log('Already playing'); }
  pause(player: MediaPlayer): void { console.log('Pausing'); player.setState(new PausedState()); }
}
class PausedState implements State {
  play(player: MediaPlayer): void { console.log('Resuming'); player.setState(new PlayingState()); }
  pause(): void { console.log('Already paused'); }
}
class StoppedState implements State {
  play(player: MediaPlayer): void { console.log('Starting'); player.setState(new PlayingState()); }
  pause(): void { console.log('Nothing to pause'); }
}

class MediaPlayer {                                     // the context
  private state: State = new StoppedState();
  setState(state: State): void { this.state = state; }
  play(): void { this.state.play(this); }               // no if/else on a status flag
  pause(): void { this.state.pause(this); }
}

const player = new MediaPlayer();
player.play();   // Starting
player.pause();  // Pausing
player.play();   // Resuming

interface ShippingStrategy { calculateCost(weight: number, distance: number): number; }

class FedExStrategy implements ShippingStrategy {
  calculateCost(weight: number, distance: number): number { return 50 + weight * 0.8 + distance * 0.5; }
}
class UPSStrategy implements ShippingStrategy {
  calculateCost(weight: number, distance: number): number { return 40 + weight * 0.9 + distance * 0.6; }
}
class DTDCStrategy implements ShippingStrategy {
  calculateCost(weight: number, distance: number): number { return 30 + weight * 1.0 + distance * 0.4; }
}

class ShippingCalculator {                                   // the context
  constructor(private strategy: ShippingStrategy) {}
  setStrategy(strategy: ShippingStrategy): void { this.strategy = strategy; }
  getCost(weight: number, distance: number): number {
    return this.strategy.calculateCost(weight, distance);    // no switch on carrier
  }
}

const calculator = new ShippingCalculator(new FedExStrategy());
console.log('FedEx:', calculator.getCost(10, 100));         // 108
calculator.setStrategy(new UPSStrategy());
console.log('UPS:', calculator.getCost(10, 100));           // 109

abstract class DataProcessor {
  process(): void {                       // the template method: fixed order
    this.load();
    this.parse();
    this.save();
  }
  protected abstract load(): void;
  protected abstract parse(): void;
  protected save(): void { console.log('Saving to the warehouse'); }   // hook with a default
}

class JsonProcessor extends DataProcessor {
  protected load(): void { console.log('Loading JSON file'); }
  protected parse(): void { console.log('Parsing JSON'); }
}
class XmlProcessor extends DataProcessor {
  protected load(): void { console.log('Loading XML feed'); }
  protected parse(): void { console.log('Parsing XML'); }
  protected save(): void { console.log('Saving XML as-is'); }         // overrides the hook
}

new JsonProcessor().process();          // Loading JSON file · Parsing JSON · Saving to the warehouse
new XmlProcessor().process();           // Loading XML feed · Parsing XML · Saving XML as-is