📘 Open/Closed Principle: Extension without Modification

🎯 Introduction

Welcome to this exciting tutorial on the Open/Closed Principle! 🎉 In this guide, we’ll explore one of the most powerful SOLID principles that will transform how you design your TypeScript applications.

You’ll discover how the Open/Closed Principle can help you build software that’s flexible yet stable. Whether you’re building web applications 🌐, server-side code 🖥️, or libraries 📚, understanding this principle is essential for writing code that gracefully handles change without breaking existing functionality.

By the end of this tutorial, you’ll feel confident applying the Open/Closed Principle in your own projects! Let’s dive in! 🏊‍♂️

📚 Understanding the Open/Closed Principle

🤔 What is the Open/Closed Principle?

The Open/Closed Principle is like building with LEGO blocks 🧱. Think of it as creating structures where you can add new pieces without breaking or modifying the existing ones. Just like how you can extend a LEGO castle by adding new towers without rebuilding the foundation!

In TypeScript terms, the Open/Closed Principle states that software entities (classes, modules, functions) should be:

✨ Open for extension: You can add new functionality
🚀 Closed for modification: You don’t change existing code
🛡️ Stable yet flexible: New features don’t break old ones

💡 Why Use the Open/Closed Principle?

Here’s why developers love this principle:

Reduced Risk 🔒: No changes to tested code
Better Maintainability 💻: Add features without fear
Cleaner Architecture 📖: Clear extension points
Easier Testing 🔧: New code doesn’t affect old tests

Real-world example: Imagine building a payment system 💳. With the Open/Closed Principle, you can add new payment methods (PayPal, crypto, etc.) without touching the existing credit card processing code!

🔧 Basic Syntax and Usage

📝 Simple Example

Let’s start with a friendly example:

// 👋 Let's build a shape calculator!

// 🎨 Base shape interface
interface Shape {
  type: string;
  calculateArea(): number;
}

// 🟦 Rectangle implementation
class Rectangle implements Shape {
  type = "rectangle";
  
  constructor(
    private width: number,
    private height: number
  ) {}
  
  calculateArea(): number {
    return this.width * this.height; // 📐 Width × Height
  }
}

// 🟡 Circle implementation
class Circle implements Shape {
  type = "circle";
  
  constructor(private radius: number) {}
  
  calculateArea(): number {
    return Math.PI * this.radius * this.radius; // 🎯 πr²
  }
}

// ✨ Area calculator - open for extension!
class AreaCalculator {
  calculateTotalArea(shapes: Shape[]): number {
    return shapes.reduce((total, shape) => {
      return total + shape.calculateArea();
    }, 0);
  }
}

💡 Explanation: Notice how we can add new shapes without modifying the AreaCalculator class! The calculator is closed for modification but open for extension through the Shape interface.

🎯 Common Patterns

Here are patterns you’ll use daily:

// 🏗️ Pattern 1: Strategy Pattern
interface PaymentStrategy {
  processPayment(amount: number): void;
}

class CreditCardPayment implements PaymentStrategy {
  processPayment(amount: number): void {
    console.log(`💳 Processing $${amount} via credit card`);
  }
}

class PayPalPayment implements PaymentStrategy {
  processPayment(amount: number): void {
    console.log(`🅿️ Processing $${amount} via PayPal`);
  }
}

// 🎨 Pattern 2: Template Method
abstract class DataProcessor {
  // 🔄 Template method
  process(data: string): void {
    const validated = this.validate(data);
    const transformed = this.transform(validated);
    this.save(transformed);
  }
  
  protected abstract validate(data: string): string;
  protected abstract transform(data: string): string;
  protected abstract save(data: string): void;
}

// 🔄 Pattern 3: Plugin Architecture
interface Plugin {
  name: string;
  execute(): void;
}

class PluginManager {
  private plugins: Plugin[] = [];
  
  register(plugin: Plugin): void {
    this.plugins.push(plugin);
    console.log(`🔌 Registered plugin: ${plugin.name}`);
  }
  
  executeAll(): void {
    this.plugins.forEach(plugin => plugin.execute());
  }
}

💡 Practical Examples

🛒 Example 1: E-commerce Discount System

Let’s build something real:

// 🛍️ Discount calculator following Open/Closed Principle
interface DiscountRule {
  name: string;
  emoji: string;
  isApplicable(order: Order): boolean;
  calculateDiscount(order: Order): number;
}

interface Order {
  total: number;
  customerType: "regular" | "vip" | "new";
  items: number;
  couponCode?: string;
}

// 💰 Base discounts
class PercentageDiscount implements DiscountRule {
  constructor(
    public name: string,
    public emoji: string,
    private percentage: number,
    private condition: (order: Order) => boolean
  ) {}
  
  isApplicable(order: Order): boolean {
    return this.condition(order);
  }
  
  calculateDiscount(order: Order): number {
    return order.total * (this.percentage / 100);
  }
}

// 🎯 Specific discount implementations
const newCustomerDiscount = new PercentageDiscount(
  "New Customer",
  "🎉",
  15,
  (order) => order.customerType === "new"
);

const vipDiscount = new PercentageDiscount(
  "VIP Member",
  "⭐",
  20,
  (order) => order.customerType === "vip"
);

const bulkDiscount = new PercentageDiscount(
  "Bulk Order",
  "📦",
  10,
  (order) => order.items >= 10
);

// 🛒 Discount calculator (closed for modification)
class DiscountCalculator {
  private rules: DiscountRule[] = [];
  
  // ➕ Open for extension via registration
  registerRule(rule: DiscountRule): void {
    this.rules.push(rule);
    console.log(`${rule.emoji} Registered discount: ${rule.name}`);
  }
  
  // 💰 Calculate best discount
  calculateBestDiscount(order: Order): number {
    const applicableDiscounts = this.rules
      .filter(rule => rule.isApplicable(order))
      .map(rule => ({
        rule,
        amount: rule.calculateDiscount(order)
      }));
    
    if (applicableDiscounts.length === 0) {
      return 0;
    }
    
    const best = applicableDiscounts.reduce((prev, curr) =>
      curr.amount > prev.amount ? curr : prev
    );
    
    console.log(`${best.rule.emoji} Applied ${best.rule.name}: $${best.amount.toFixed(2)}`);
    return best.amount;
  }
}

// 🎮 Let's use it!
const calculator = new DiscountCalculator();
calculator.registerRule(newCustomerDiscount);
calculator.registerRule(vipDiscount);
calculator.registerRule(bulkDiscount);

// 🎊 Easy to add new discounts without modifying calculator!
const holidayDiscount = new PercentageDiscount(
  "Holiday Special",
  "🎄",
  25,
  (order) => order.couponCode === "HOLIDAY2024"
);
calculator.registerRule(holidayDiscount);

🎯 Try it yourself: Add a “loyalty points” discount or a “flash sale” discount without modifying the calculator!

🎮 Example 2: Game Achievement System

Let’s make it fun:

// 🏆 Achievement system that's extensible
interface Achievement {
  id: string;
  name: string;
  emoji: string;
  points: number;
  checkCondition(player: Player): boolean;
}

interface Player {
  name: string;
  score: number;
  level: number;
  playtime: number; // in minutes
  enemiesDefeated: number;
  achievements: string[];
}

// 🎯 Base achievement class
abstract class BaseAchievement implements Achievement {
  constructor(
    public id: string,
    public name: string,
    public emoji: string,
    public points: number
  ) {}
  
  abstract checkCondition(player: Player): boolean;
}

// 🌟 Specific achievements
class ScoreAchievement extends BaseAchievement {
  constructor(
    id: string,
    name: string,
    emoji: string,
    points: number,
    private requiredScore: number
  ) {
    super(id, name, emoji, points);
  }
  
  checkCondition(player: Player): boolean {
    return player.score >= this.requiredScore;
  }
}

class LevelAchievement extends BaseAchievement {
  constructor(
    id: string,
    name: string,
    emoji: string,
    points: number,
    private requiredLevel: number
  ) {
    super(id, name, emoji, points);
  }
  
  checkCondition(player: Player): boolean {
    return player.level >= this.requiredLevel;
  }
}

// 🏅 Achievement manager (closed for modification)
class AchievementManager {
  private achievements: Achievement[] = [];
  
  // ➕ Open for extension
  registerAchievement(achievement: Achievement): void {
    this.achievements.push(achievement);
    console.log(`${achievement.emoji} New achievement available: ${achievement.name}`);
  }
  
  // 🎊 Check for new achievements
  checkAchievements(player: Player): Achievement[] {
    const newAchievements = this.achievements.filter(achievement => {
      const hasAchievement = player.achievements.includes(achievement.id);
      const meetsCondition = achievement.checkCondition(player);
      return !hasAchievement && meetsCondition;
    });
    
    newAchievements.forEach(achievement => {
      console.log(`🎉 ${player.name} unlocked: ${achievement.emoji} ${achievement.name}!`);
      player.achievements.push(achievement.id);
    });
    
    return newAchievements;
  }
  
  // 📊 Get total points
  getTotalPoints(player: Player): number {
    return player.achievements.reduce((total, achievementId) => {
      const achievement = this.achievements.find(a => a.id === achievementId);
      return total + (achievement?.points || 0);
    }, 0);
  }
}

// 🎮 Create achievements
const manager = new AchievementManager();

// 📈 Score achievements
manager.registerAchievement(new ScoreAchievement(
  "first_100", "Century Club", "💯", 10, 100
));
manager.registerAchievement(new ScoreAchievement(
  "high_scorer", "High Scorer", "🚀", 25, 1000
));

// 🎯 Level achievements
manager.registerAchievement(new LevelAchievement(
  "level_5", "Rising Star", "⭐", 15, 5
));
manager.registerAchievement(new LevelAchievement(
  "level_10", "Master Player", "👑", 50, 10
));

// 🆕 Easy to add new achievement types!
class ComboAchievement extends BaseAchievement {
  constructor(
    id: string,
    name: string,
    emoji: string,
    points: number,
    private requiredScore: number,
    private requiredLevel: number
  ) {
    super(id, name, emoji, points);
  }
  
  checkCondition(player: Player): boolean {
    return player.score >= this.requiredScore && 
           player.level >= this.requiredLevel;
  }
}

manager.registerAchievement(new ComboAchievement(
  "elite", "Elite Player", "🏆", 100, 500, 7
));

🚀 Advanced Concepts

🧙‍♂️ Advanced Topic 1: Decorator Pattern

When you’re ready to level up, try this advanced pattern:

// 🎯 Advanced notification system with decorators
interface Notification {
  send(message: string): void;
}

// 📧 Base notification
class EmailNotification implements Notification {
  send(message: string): void {
    console.log(`📧 Email: ${message}`);
  }
}

// 🎨 Notification decorator base
abstract class NotificationDecorator implements Notification {
  constructor(protected notification: Notification) {}
  
  abstract send(message: string): void;
}

// ✨ Add emoji decorator
class EmojiDecorator extends NotificationDecorator {
  constructor(
    notification: Notification,
    private emoji: string
  ) {
    super(notification);
  }
  
  send(message: string): void {
    this.notification.send(`${this.emoji} ${message}`);
  }
}

// 🌟 Add priority decorator
class PriorityDecorator extends NotificationDecorator {
  constructor(
    notification: Notification,
    private priority: "low" | "medium" | "high"
  ) {
    super(notification);
  }
  
  send(message: string): void {
    const priorityEmoji = {
      low: "🟢",
      medium: "🟡",
      high: "🔴"
    };
    this.notification.send(`${priorityEmoji[this.priority]} [${this.priority.toUpperCase()}] ${message}`);
  }
}

// 🪄 Using the decorators
let notification: Notification = new EmailNotification();
notification = new EmojiDecorator(notification, "🎉");
notification = new PriorityDecorator(notification, "high");
notification.send("System update completed!");

🏗️ Advanced Topic 2: Factory Pattern with Open/Closed

For the brave developers:

// 🚀 Extensible factory pattern
interface Vehicle {
  type: string;
  emoji: string;
  start(): void;
  stop(): void;
}

// 🏭 Vehicle factory with registration
class VehicleFactory {
  private creators = new Map<string, () => Vehicle>();
  
  // 📝 Register new vehicle types
  registerVehicle(type: string, creator: () => Vehicle): void {
    this.creators.set(type, creator);
    console.log(`🏭 Registered new vehicle type: ${type}`);
  }
  
  // 🎨 Create vehicles
  createVehicle(type: string): Vehicle {
    const creator = this.creators.get(type);
    if (!creator) {
      throw new Error(`Unknown vehicle type: ${type}`);
    }
    return creator();
  }
}

// 🚗 Vehicle implementations
class Car implements Vehicle {
  type = "car";
  emoji = "🚗";
  
  start(): void {
    console.log(`${this.emoji} Car engine started! Vroom!`);
  }
  
  stop(): void {
    console.log(`${this.emoji} Car parked safely`);
  }
}

class Bicycle implements Vehicle {
  type = "bicycle";
  emoji = "🚲";
  
  start(): void {
    console.log(`${this.emoji} Started pedaling!`);
  }
  
  stop(): void {
    console.log(`${this.emoji} Bicycle stopped`);
  }
}

// 🏭 Setup factory
const factory = new VehicleFactory();
factory.registerVehicle("car", () => new Car());
factory.registerVehicle("bicycle", () => new Bicycle());

// 🆕 Easy to add new vehicles!
class ElectricScooter implements Vehicle {
  type = "scooter";
  emoji = "🛴";
  
  start(): void {
    console.log(`${this.emoji} Electric scooter powered on!`);
  }
  
  stop(): void {
    console.log(`${this.emoji} Scooter powered off`);
  }
}

factory.registerVehicle("scooter", () => new ElectricScooter());

⚠️ Common Pitfalls and Solutions

😱 Pitfall 1: Modifying Existing Classes

// ❌ Wrong way - modifying existing class!
class PaymentProcessor {
  process(type: string, amount: number): void {
    if (type === "credit") {
      console.log("Processing credit card...");
    } else if (type === "paypal") {
      console.log("Processing PayPal...");
    } else if (type === "bitcoin") { // 💥 Adding new code!
      console.log("Processing Bitcoin...");
    }
  }
}

// ✅ Correct way - use abstraction!
interface PaymentMethod {
  process(amount: number): void;
}

class PaymentProcessor {
  private methods = new Map<string, PaymentMethod>();
  
  registerMethod(type: string, method: PaymentMethod): void {
    this.methods.set(type, method);
  }
  
  process(type: string, amount: number): void {
    const method = this.methods.get(type);
    if (method) {
      method.process(amount); // ✅ No modification needed!
    }
  }
}

🤯 Pitfall 2: Over-Engineering

// ❌ Too complex for simple cases!
interface GreeterStrategy {
  greet(name: string): string;
}

class FormalGreeter implements GreeterStrategy {
  greet(name: string): string {
    return `Good day, ${name}`;
  }
}
// ... 10 more classes for a simple greeting!

// ✅ Keep it simple when appropriate!
type GreetingStyle = "formal" | "casual" | "friendly";

const greetings: Record<GreetingStyle, (name: string) => string> = {
  formal: (name) => `Good day, ${name}`,
  casual: (name) => `Hey ${name}!`,
  friendly: (name) => `Hi ${name}! 👋`
};

function greet(style: GreetingStyle, name: string): string {
  return greetings[style](name);
}

🛠️ Best Practices

🎯 Use Abstractions: Define clear interfaces or abstract classes
📝 Think Extension Points: Identify where changes might occur
🛡️ Avoid Conditionals: Replace if/else chains with polymorphism
🎨 Keep It Simple: Don’t over-engineer for unlikely scenarios
✨ Document Extension: Make it clear how to extend your code

🧪 Hands-On Exercise

🎯 Challenge: Build a Flexible Logging System

Create a logging system that follows the Open/Closed Principle:

📋 Requirements:

✅ Support multiple log destinations (console, file, remote)
🏷️ Different log levels (info, warning, error)
👤 Customizable formatting
📅 Timestamp support
🎨 Each logger needs an emoji identifier!

🚀 Bonus Points:

Add filtering by log level
Implement log rotation
Create a composite logger that logs to multiple destinations

💡 Solution

🔍 Click to see solution

// 🎯 Our extensible logging system!
interface LogEntry {
  level: LogLevel;
  message: string;
  timestamp: Date;
  context?: Record<string, any>;
}

type LogLevel = "info" | "warning" | "error";

interface Logger {
  name: string;
  emoji: string;
  log(entry: LogEntry): void;
}

// 📝 Base loggers
class ConsoleLogger implements Logger {
  name = "Console";
  emoji = "💻";
  
  log(entry: LogEntry): void {
    const levelEmoji = {
      info: "ℹ️",
      warning: "⚠️",
      error: "❌"
    };
    
    console.log(
      `${this.emoji} [${entry.timestamp.toISOString()}] ` +
      `${levelEmoji[entry.level]} ${entry.level.toUpperCase()}: ` +
      `${entry.message}`
    );
  }
}

class FileLogger implements Logger {
  name = "File";
  emoji = "📁";
  
  constructor(private filename: string) {}
  
  log(entry: LogEntry): void {
    const logLine = `[${entry.timestamp.toISOString()}] ${entry.level}: ${entry.message}`;
    console.log(`${this.emoji} Writing to ${this.filename}: ${logLine}`);
  }
}

// 🎨 Formatters
interface LogFormatter {
  format(entry: LogEntry): string;
}

class JsonFormatter implements LogFormatter {
  format(entry: LogEntry): string {
    return JSON.stringify({
      ...entry,
      timestamp: entry.timestamp.toISOString()
    });
  }
}

// 🚀 Advanced logger with formatting
class FormattedLogger implements Logger {
  constructor(
    public name: string,
    public emoji: string,
    private baseLogger: Logger,
    private formatter: LogFormatter
  ) {}
  
  log(entry: LogEntry): void {
    const formatted = this.formatter.format(entry);
    this.baseLogger.log({
      ...entry,
      message: formatted
    });
  }
}

// 🎯 Logger manager (closed for modification)
class LogManager {
  private loggers: Logger[] = [];
  private minimumLevel: Record<LogLevel, number> = {
    info: 0,
    warning: 1,
    error: 2
  };
  
  // ➕ Register new loggers
  registerLogger(logger: Logger): void {
    this.loggers.push(logger);
    console.log(`${logger.emoji} Registered logger: ${logger.name}`);
  }
  
  // 📝 Log to all registered loggers
  log(level: LogLevel, message: string, context?: Record<string, any>): void {
    const entry: LogEntry = {
      level,
      message,
      timestamp: new Date(),
      context
    };
    
    this.loggers.forEach(logger => logger.log(entry));
  }
  
  // 🎯 Helper methods
  info(message: string, context?: Record<string, any>): void {
    this.log("info", message, context);
  }
  
  warning(message: string, context?: Record<string, any>): void {
    this.log("warning", message, context);
  }
  
  error(message: string, context?: Record<string, any>): void {
    this.log("error", message, context);
  }
}

// 🎮 Test it out!
const logManager = new LogManager();

// 📝 Register basic loggers
logManager.registerLogger(new ConsoleLogger());
logManager.registerLogger(new FileLogger("app.log"));

// 🎨 Register formatted logger
const jsonLogger = new FormattedLogger(
  "JSON Console",
  "🎨",
  new ConsoleLogger(),
  new JsonFormatter()
);
logManager.registerLogger(jsonLogger);

// 🆕 Easy to add new logger types!
class SlackLogger implements Logger {
  name = "Slack";
  emoji = "💬";
  
  log(entry: LogEntry): void {
    if (entry.level === "error") {
      console.log(`${this.emoji} Sending to Slack: 🚨 ${entry.message}`);
    }
  }
}

logManager.registerLogger(new SlackLogger());

// 📊 Test logging
logManager.info("Application started successfully!");
logManager.warning("Memory usage is high");
logManager.error("Failed to connect to database");

🎓 Key Takeaways

You’ve learned so much! Here’s what you can now do:

✅ Design extensible systems without modifying existing code 💪
✅ Use abstractions to create flexible architectures 🛡️
✅ Apply design patterns that follow Open/Closed 🎯
✅ Avoid common pitfalls like over-engineering 🐛
✅ Build maintainable software that embraces change! 🚀

Remember: The Open/Closed Principle helps you write code that’s stable yet flexible. It’s like building with LEGO - you can always add more without breaking what’s already there! 🤝

🤝 Next Steps

Congratulations! 🎉 You’ve mastered the Open/Closed Principle!

Here’s what to do next:

💻 Practice with the logging system exercise
🏗️ Refactor existing code to follow Open/Closed
📚 Move on to our next tutorial: Single Responsibility Principle
🌟 Share your extensible designs with others!

Remember: Great software architecture is about making the right things easy to change. Keep coding, keep learning, and most importantly, have fun! 🚀

Happy coding! 🎉🚀✨

Prerequisites

What you'll learn