📘 Single Responsibility Principle: One Reason to Change

🎯 Introduction

Have you ever tried to fix one thing in your code and accidentally broken three other things? 😱 Or opened a class file and found it doing everything from sending emails to calculating taxes? That’s exactly what the Single Responsibility Principle (SRP) helps us avoid!

The Single Responsibility Principle is like having specialized tools in your toolbox 🧰. You wouldn’t use a hammer to cut wood or a saw to drive nails, right? Each tool has one job and does it well. That’s exactly what SRP teaches us about our TypeScript classes and functions!

In this tutorial, we’ll explore how to write cleaner, more maintainable code by giving each piece of our program just one reason to change. Get ready to transform your messy, do-everything classes into focused, powerful components! 💪

📚 Understanding Single Responsibility Principle

The Single Responsibility Principle states that a class should have only one reason to change. But what does “one reason to change” really mean? 🤔

Think of it like a restaurant kitchen 👨‍🍳. The chef focuses on cooking, the waiter serves customers, and the cashier handles payments. Imagine if one person tried to do all three jobs - chaos would ensue! Each role has a single responsibility, making the restaurant run smoothly.

In TypeScript terms, this means:

• A class should do one thing and do it well ✨
• It should have only one reason to be modified 📝
• Its functionality should be cohesive and focused 🎯

When we violate SRP, we create “God classes” that know too much and do too much. These become maintenance nightmares! 😵

🔧 Basic Syntax and Usage

Let’s start with a simple example to see SRP in action! First, let’s look at what NOT to do:

// ❌ Wrong: This class has multiple responsibilities
class User {
  constructor(
    public name: string,
    public email: string,
    public password: string
  ) {}

  // Responsibility 1: User data management
  updateEmail(newEmail: string): void {
    this.email = newEmail;
  }

  // Responsibility 2: Authentication 🔐
  validatePassword(inputPassword: string): boolean {
    return this.password === inputPassword;
  }

  // Responsibility 3: Database operations 💾
  saveToDatabase(): void {
    // Database logic here
    console.log(`Saving ${this.name} to database...`);
  }

  // Responsibility 4: Email notifications 📧
  sendWelcomeEmail(): void {
    // Email logic here
    console.log(`Sending welcome email to ${this.email}`);
  }

  // Responsibility 5: Logging 📝
  logActivity(action: string): void {
    console.log(`${new Date().toISOString()}: ${this.name} performed ${action}`);
  }
}

Now let’s refactor this following SRP:

// ✅ Right: Each class has a single responsibility

// 👤 User class only manages user data
class User {
  constructor(
    public name: string,
    public email: string,
    private passwordHash: string
  ) {}

  updateEmail(newEmail: string): void {
    this.email = newEmail;
  }

  getPasswordHash(): string {
    return this.passwordHash;
  }
}

// 🔐 Authentication service handles auth logic
class AuthenticationService {
  validatePassword(user: User, inputPassword: string): boolean {
    // In real app, you'd hash the input and compare
    return user.getPasswordHash() === this.hashPassword(inputPassword);
  }

  private hashPassword(password: string): string {
    // Simplified hashing for example
    return `hashed_${password}`;
  }
}

// 💾 Repository handles database operations
class UserRepository {
  save(user: User): Promise<void> {
    console.log(`💾 Saving ${user.name} to database...`);
    // Actual database logic here
    return Promise.resolve();
  }

  findByEmail(email: string): Promise<User | null> {
    // Database query logic
    return Promise.resolve(null);
  }
}

// 📧 Email service handles notifications
class EmailService {
  sendWelcomeEmail(user: User): void {
    console.log(`📧 Sending welcome email to ${user.email}`);
    // Email sending logic here
  }
}

// 📝 Logger handles activity logging
class ActivityLogger {
  log(user: User, action: string): void {
    console.log(`📝 ${new Date().toISOString()}: ${user.name} performed ${action}`);
  }
}

See the difference? Each class now has one clear purpose! 🎯

💡 Practical Examples

Let’s explore some real-world scenarios where SRP makes our code shine! ✨

Example 1: E-commerce Shopping Cart 🛒

Here’s a shopping cart that violates SRP:

// ❌ Wrong: Shopping cart doing too many things
class ShoppingCart {
  private items: Array<{id: string, name: string, price: number, quantity: number}> = [];

  addItem(id: string, name: string, price: number, quantity: number): void {
    this.items.push({id, name, price, quantity});
  }

  calculateTotal(): number {
    return this.items.reduce((total, item) => total + (item.price * item.quantity), 0);
  }

  // Should NOT be here - tax calculation
  calculateTax(rate: number): number {
    return this.calculateTotal() * rate;
  }

  // Should NOT be here - discount logic
  applyDiscount(code: string): number {
    const discounts: Record<string, number> = {
      'SAVE10': 0.1,
      'SAVE20': 0.2
    };
    return this.calculateTotal() * (1 - (discounts[code] || 0));
  }

  // Should NOT be here - payment processing
  processPayment(cardNumber: string): boolean {
    console.log(`Processing payment with card ${cardNumber}`);
    return true;
  }

  // Should NOT be here - order persistence
  saveOrder(): void {
    console.log('Saving order to database...');
  }
}

Let’s refactor this beauty! 💅

// ✅ Right: Each class has one responsibility

// 🛒 Shopping cart only manages items
class ShoppingCart {
  private items: CartItem[] = [];

  addItem(item: CartItem): void {
    this.items.push(item);
  }

  removeItem(itemId: string): void {
    this.items = this.items.filter(item => item.id !== itemId);
  }

  getItems(): ReadonlyArray<CartItem> {
    return this.items;
  }

  clear(): void {
    this.items = [];
  }
}

// 📦 Cart item is its own entity
interface CartItem {
  id: string;
  name: string;
  price: number;
  quantity: number;
}

// 💰 Price calculator handles all calculations
class PriceCalculator {
  calculateSubtotal(items: ReadonlyArray<CartItem>): number {
    return items.reduce((total, item) => total + (item.price * item.quantity), 0);
  }

  calculateTax(subtotal: number, taxRate: number): number {
    return subtotal * taxRate;
  }

  calculateTotal(subtotal: number, tax: number, discount: number = 0): number {
    return subtotal + tax - discount;
  }
}

// 🏷️ Discount service handles promo codes
class DiscountService {
  private discounts = new Map<string, number>([
    ['SAVE10', 0.1],
    ['SAVE20', 0.2],
    ['FREESHIP', 0], // Free shipping, handled elsewhere
  ]);

  calculateDiscount(code: string, subtotal: number): number {
    const rate = this.discounts.get(code) || 0;
    return subtotal * rate;
  }

  isValidCode(code: string): boolean {
    return this.discounts.has(code);
  }
}

// 💳 Payment processor handles payments
class PaymentProcessor {
  async processPayment(amount: number, paymentMethod: PaymentMethod): Promise<PaymentResult> {
    console.log(`💳 Processing ${amount} with ${paymentMethod.type}`);
    // Payment gateway integration here
    return { success: true, transactionId: '12345' };
  }
}

interface PaymentMethod {
  type: 'card' | 'paypal' | 'bitcoin';
  details: any;
}

interface PaymentResult {
  success: boolean;
  transactionId?: string;
  error?: string;
}

// 💾 Order repository saves orders
class OrderRepository {
  async saveOrder(cart: ShoppingCart, payment: PaymentResult): Promise<string> {
    console.log('💾 Saving order to database...');
    // Database logic here
    return 'ORDER-' + Date.now();
  }
}

Example 2: Game Character System 🎮

Let’s build a game character system following SRP:

// 🦸 Character class only holds character data
class GameCharacter {
  constructor(
    public name: string,
    public level: number,
    public health: number,
    public maxHealth: number,
    public experience: number
  ) {}
}

// ⚔️ Combat system handles fighting
class CombatSystem {
  attack(attacker: GameCharacter, defender: GameCharacter, damage: number): void {
    console.log(`⚔️ ${attacker.name} attacks ${defender.name} for ${damage} damage!`);
    defender.health = Math.max(0, defender.health - damage);
  }

  isDefeated(character: GameCharacter): boolean {
    return character.health <= 0;
  }
}

// 🎯 Level system handles progression
class LevelSystem {
  private experienceTable = [0, 100, 250, 500, 1000, 2000, 4000, 8000];

  addExperience(character: GameCharacter, amount: number): void {
    character.experience += amount;
    console.log(`✨ ${character.name} gained ${amount} XP!`);
    
    this.checkLevelUp(character);
  }

  private checkLevelUp(character: GameCharacter): void {
    const nextLevel = character.level + 1;
    if (nextLevel < this.experienceTable.length && 
        character.experience >= this.experienceTable[nextLevel]) {
      character.level = nextLevel;
      console.log(`🎉 Level up! ${character.name} is now level ${nextLevel}!`);
    }
  }
}

// 💊 Health system manages HP
class HealthSystem {
  heal(character: GameCharacter, amount: number): void {
    const oldHealth = character.health;
    character.health = Math.min(character.maxHealth, character.health + amount);
    const healed = character.health - oldHealth;
    console.log(`💚 ${character.name} healed for ${healed} HP!`);
  }

  revive(character: GameCharacter): void {
    if (character.health <= 0) {
      character.health = Math.floor(character.maxHealth * 0.5);
      console.log(`✨ ${character.name} has been revived!`);
    }
  }
}

// 💾 Character storage handles persistence
class CharacterStorage {
  save(character: GameCharacter): void {
    const data = JSON.stringify(character);
    localStorage.setItem(`character_${character.name}`, data);
    console.log(`💾 Character ${character.name} saved!`);
  }

  load(name: string): GameCharacter | null {
    const data = localStorage.getItem(`character_${name}`);
    if (data) {
      return JSON.parse(data);
    }
    return null;
  }
}

🚀 Advanced Concepts

Ready to level up your SRP game? Let’s explore some advanced patterns! 🎯

Dependency Injection for Better SRP

When following SRP, classes often need to work together. Dependency injection helps us connect them cleanly:

// 🏗️ Dependency injection container
class GameEngine {
  constructor(
    private combatSystem: CombatSystem,
    private levelSystem: LevelSystem,
    private healthSystem: HealthSystem,
    private storage: CharacterStorage
  ) {}

  // Orchestrates different systems
  async processPlayerVictory(player: GameCharacter, enemyXP: number): Promise<void> {
    // Each system does its one job
    this.levelSystem.addExperience(player, enemyXP);
    this.healthSystem.heal(player, 20); // Victory heal bonus! 🎉
    await this.storage.save(player);
  }
}

// 🏭 Factory pattern for creating instances
class GameEngineFactory {
  static create(): GameEngine {
    return new GameEngine(
      new CombatSystem(),
      new LevelSystem(),
      new HealthSystem(),
      new CharacterStorage()
    );
  }
}

Interface Segregation with SRP

Combine SRP with interface segregation for even cleaner code:

// 🎯 Specific interfaces for each responsibility
interface Readable {
  read(id: string): Promise<any>;
}

interface Writable {
  write(data: any): Promise<void>;
}

interface Deletable {
  delete(id: string): Promise<void>;
}

// 📚 Read-only service
class BlogReader implements Readable {
  async read(id: string): Promise<BlogPost> {
    console.log(`📖 Reading blog post ${id}`);
    // Read logic here
    return { id, title: 'My Post', content: 'Hello!' };
  }
}

// ✏️ Write-only service
class BlogWriter implements Writable {
  async write(post: BlogPost): Promise<void> {
    console.log(`✏️ Writing blog post ${post.title}`);
    // Write logic here
  }
}

// 🗑️ Delete-only service
class BlogDeleter implements Deletable {
  async delete(id: string): Promise<void> {
    console.log(`🗑️ Deleting blog post ${id}`);
    // Delete logic here
  }
}

interface BlogPost {
  id: string;
  title: string;
  content: string;
}

⚠️ Common Pitfalls and Solutions

Let’s explore common SRP violations and how to fix them! 🔧

Pitfall 1: The God Object 👑

// ❌ Wrong: God class that knows everything
class ApplicationManager {
  users: User[] = [];
  products: Product[] = [];
  orders: Order[] = [];
  
  // User management
  createUser(name: string): void { /* ... */ }
  deleteUser(id: string): void { /* ... */ }
  
  // Product management
  addProduct(name: string): void { /* ... */ }
  updateInventory(id: string): void { /* ... */ }
  
  // Order processing
  createOrder(userId: string): void { /* ... */ }
  shipOrder(orderId: string): void { /* ... */ }
  
  // Reports
  generateSalesReport(): void { /* ... */ }
  generateUserReport(): void { /* ... */ }
  
  // And 50 more methods... 😱
}

// ✅ Right: Separate services for each domain
class UserService {
  create(name: string): User { /* ... */ }
  delete(id: string): void { /* ... */ }
}

class ProductService {
  add(name: string): Product { /* ... */ }
  updateInventory(id: string, quantity: number): void { /* ... */ }
}

class OrderService {
  create(userId: string, items: CartItem[]): Order { /* ... */ }
  ship(orderId: string): void { /* ... */ }
}

class ReportingService {
  generateSalesReport(): Report { /* ... */ }
  generateUserReport(): Report { /* ... */ }
}

Pitfall 2: Mixed Business Logic and Infrastructure 🏗️

// ❌ Wrong: Business logic mixed with infrastructure
class ProductService {
  async getDiscountedPrice(productId: string): Promise<number> {
    // Infrastructure concern (database)
    const connection = await mysql.createConnection({/*...*/});
    const [rows] = await connection.execute('SELECT * FROM products WHERE id = ?', [productId]);
    const product = rows[0];
    
    // Business logic
    let price = product.price;
    if (product.category === 'electronics') {
      price *= 0.9; // 10% off electronics
    }
    
    // Infrastructure concern (caching)
    await redis.set(`price:${productId}`, price, 'EX', 3600);
    
    return price;
  }
}

// ✅ Right: Separated concerns
class ProductRepository {
  async findById(id: string): Promise<Product | null> {
    // Only database logic
    const connection = await this.db.getConnection();
    const [rows] = await connection.execute('SELECT * FROM products WHERE id = ?', [id]);
    return rows[0] || null;
  }
}

class PriceCalculator {
  calculateDiscountedPrice(product: Product): number {
    // Only business logic
    let price = product.price;
    if (product.category === 'electronics') {
      price *= 0.9; // 10% off electronics 🎮
    }
    return price;
  }
}

class CacheService {
  async set(key: string, value: any, ttl: number): Promise<void> {
    // Only caching logic
    await this.redis.set(key, JSON.stringify(value), 'EX', ttl);
  }
}

class ProductPricingService {
  constructor(
    private productRepo: ProductRepository,
    private calculator: PriceCalculator,
    private cache: CacheService
  ) {}

  async getDiscountedPrice(productId: string): Promise<number> {
    const product = await this.productRepo.findById(productId);
    if (!product) throw new Error('Product not found');
    
    const price = this.calculator.calculateDiscountedPrice(product);
    await this.cache.set(`price:${productId}`, price, 3600);
    
    return price;
  }
}

🛠️ Best Practices

Here are the golden rules for mastering SRP in TypeScript! ✨

1. One Reason to Change 🎯

Ask yourself: “What could cause this class to change?” If you have multiple answers, split it up!

// 🤔 Ask: What could change?
// - Email format validation rules? ✅ One reason
// - How we send emails? ❌ Different reason!

class EmailValidator {
  // Only changes if validation rules change
  isValid(email: string): boolean {
    const pattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return pattern.test(email);
  }
}

class EmailSender {
  // Only changes if sending mechanism changes
  async send(to: string, subject: string, body: string): Promise<void> {
    // SMTP logic here
  }
}

2. High Cohesion, Low Coupling 🤝

Classes should be focused (high cohesion) but not dependent on each other (low coupling):

// 🎯 High cohesion: All methods work with user data
class UserProfile {
  constructor(private user: User) {}
  
  getFullName(): string {
    return `${this.user.firstName} ${this.user.lastName}`;
  }
  
  getInitials(): string {
    return `${this.user.firstName[0]}${this.user.lastName[0]}`;
  }
  
  getDisplayName(): string {
    return this.user.nickname || this.getFullName();
  }
}

// 🔗 Low coupling: Services work independently
class NotificationService {
  // Doesn't need to know HOW emails are sent
  constructor(private emailSender: EmailSender) {}
  
  async notifyUser(email: string, message: string): Promise<void> {
    await this.emailSender.send(email, 'Notification', message);
  }
}

3. Use Descriptive Names 📝

Good naming makes responsibilities clear:

// 👍 Clear, single responsibilities from the names
class PasswordHasher { }        // Only hashes passwords
class SessionManager { }        // Only manages sessions
class TokenGenerator { }        // Only generates tokens
class LoginAttemptTracker { }   // Only tracks login attempts

// 👎 Vague names that could hide multiple responsibilities
class UserManager { }           // Does what exactly? 🤷
class Helper { }                // Too generic!
class Utils { }                 // Utility for what?

🧪 Hands-On Exercise

Time to practice! Let’s refactor a messy class that violates SRP. 💪

The Challenge 🎯

Here’s a BlogPostManager class that’s doing way too much. Your mission: refactor it following SRP!

// 🚨 Challenge: Refactor this monster class!
class BlogPostManager {
  private posts: Map<string, any> = new Map();

  // Creates post and validates
  createPost(title: string, content: string, authorId: string): string {
    // Validation
    if (!title || title.length < 5) {
      throw new Error('Title too short');
    }
    if (!content || content.length < 100) {
      throw new Error('Content too short');
    }
    
    // Create post
    const id = Date.now().toString();
    const post = {
      id,
      title,
      content,
      authorId,
      createdAt: new Date(),
      views: 0,
      likes: 0
    };
    
    // Save to "database"
    this.posts.set(id, post);
    
    // Send notification
    console.log(`Notifying followers of ${authorId} about new post`);
    
    // Log activity
    console.log(`${new Date()}: Post ${id} created by ${authorId}`);
    
    return id;
  }

  // Search functionality
  searchPosts(query: string): any[] {
    const results = [];
    for (const post of this.posts.values()) {
      if (post.title.includes(query) || post.content.includes(query)) {
        results.push(post);
      }
    }
    return results;
  }

  // Statistics
  getAuthorStats(authorId: string): any {
    let totalPosts = 0;
    let totalViews = 0;
    let totalLikes = 0;
    
    for (const post of this.posts.values()) {
      if (post.authorId === authorId) {
        totalPosts++;
        totalViews += post.views;
        totalLikes += post.likes;
      }
    }
    
    return { totalPosts, totalViews, totalLikes, avgLikes: totalLikes / totalPosts };
  }

  // Formatting for display
  formatPostForDisplay(postId: string): string {
    const post = this.posts.get(postId);
    if (!post) return '';
    
    return `
      <h1>${post.title}</h1>
      <p>By Author ${post.authorId} on ${post.createdAt.toDateString()}</p>
      <div>${post.content}</div>
      <p>👁️ ${post.views} views | ❤️ ${post.likes} likes</p>
    `;
  }
}

// ✅ Solution: Properly separated responsibilities

// 📝 Post entity
interface BlogPost {
  id: string;
  title: string;
  content: string;
  authorId: string;
  createdAt: Date;
  views: number;
  likes: number;
}

// ✅ Validation service
class PostValidator {
  validate(title: string, content: string): void {
    if (!title || title.length < 5) {
      throw new Error('Title must be at least 5 characters');
    }
    if (!content || content.length < 100) {
      throw new Error('Content must be at least 100 characters');
    }
  }
}

// 💾 Repository for data access
class PostRepository {
  private posts: Map<string, BlogPost> = new Map();

  save(post: BlogPost): void {
    this.posts.set(post.id, post);
  }

  findById(id: string): BlogPost | undefined {
    return this.posts.get(id);
  }

  findByAuthor(authorId: string): BlogPost[] {
    return Array.from(this.posts.values())
      .filter(post => post.authorId === authorId);
  }

  findAll(): BlogPost[] {
    return Array.from(this.posts.values());
  }
}

// 🏭 Factory for creating posts
class PostFactory {
  create(title: string, content: string, authorId: string): BlogPost {
    return {
      id: Date.now().toString(),
      title,
      content,
      authorId,
      createdAt: new Date(),
      views: 0,
      likes: 0
    };
  }
}

// 🔍 Search service
class PostSearchService {
  search(posts: BlogPost[], query: string): BlogPost[] {
    const lowerQuery = query.toLowerCase();
    return posts.filter(post => 
      post.title.toLowerCase().includes(lowerQuery) || 
      post.content.toLowerCase().includes(lowerQuery)
    );
  }
}

// 📊 Statistics service
class PostStatisticsService {
  calculateAuthorStats(posts: BlogPost[]): AuthorStats {
    const totalPosts = posts.length;
    const totalViews = posts.reduce((sum, post) => sum + post.views, 0);
    const totalLikes = posts.reduce((sum, post) => sum + post.likes, 0);
    
    return {
      totalPosts,
      totalViews,
      totalLikes,
      avgLikes: totalPosts > 0 ? totalLikes / totalPosts : 0
    };
  }
}

interface AuthorStats {
  totalPosts: number;
  totalViews: number;
  totalLikes: number;
  avgLikes: number;
}

// 🎨 Formatter for display
class PostFormatter {
  formatForDisplay(post: BlogPost): string {
    return `
      <h1>${post.title}</h1>
      <p>By Author ${post.authorId} on ${post.createdAt.toDateString()}</p>
      <div>${post.content}</div>
      <p>👁️ ${post.views} views | ❤️ ${post.likes} likes</p>
    `;
  }

  formatForList(post: BlogPost): string {
    return `${post.title} - ${post.views} views, ${post.likes} likes`;
  }
}

// 📢 Notification service
class NotificationService {
  notifyFollowers(authorId: string, postId: string): void {
    console.log(`📢 Notifying followers of ${authorId} about new post ${postId}`);
    // Actual notification logic here
  }
}

// 📝 Activity logger
class ActivityLogger {
  logPostCreation(post: BlogPost): void {
    console.log(`📝 ${new Date().toISOString()}: Post ${post.id} created by ${post.authorId}`);
  }
}

// 🎼 Orchestrator that brings it all together
class BlogService {
  constructor(
    private validator: PostValidator,
    private repository: PostRepository,
    private factory: PostFactory,
    private notifier: NotificationService,
    private logger: ActivityLogger,
    private searchService: PostSearchService,
    private statsService: PostStatisticsService,
    private formatter: PostFormatter
  ) {}

  createPost(title: string, content: string, authorId: string): string {
    // Each service does its one job
    this.validator.validate(title, content);
    const post = this.factory.create(title, content, authorId);
    this.repository.save(post);
    this.notifier.notifyFollowers(authorId, post.id);
    this.logger.logPostCreation(post);
    return post.id;
  }

  searchPosts(query: string): BlogPost[] {
    const allPosts = this.repository.findAll();
    return this.searchService.search(allPosts, query);
  }

  getAuthorStats(authorId: string): AuthorStats {
    const authorPosts = this.repository.findByAuthor(authorId);
    return this.statsService.calculateAuthorStats(authorPosts);
  }

  getFormattedPost(postId: string): string {
    const post = this.repository.findById(postId);
    if (!post) return 'Post not found';
    return this.formatter.formatForDisplay(post);
  }
}

🎓 Key Takeaways

Congratulations! You’ve mastered the Single Responsibility Principle! 🎉 Here’s what you’ve learned:

• One Class, One Job 🎯 - Each class should have only one reason to change
• High Cohesion 🤝 - Keep related functionality together
• Low Coupling 🔗 - Minimize dependencies between classes
• Clear Names 📝 - Class names should clearly indicate their single responsibility
• Dependency Injection 💉 - Use DI to connect single-responsibility classes
• Better Testing 🧪 - Single-responsibility classes are easier to test
• Easier Maintenance 🔧 - Changes are localized to specific classes

Remember: SRP isn’t about having tiny classes everywhere. It’s about having focused, purposeful classes that do one thing well!

🤝 Next Steps

You’re on fire! 🔥 Now that you understand the Single Responsibility Principle, you’re ready to explore the other SOLID principles:

1. Open/Closed Principle - Learn how to make your classes open for extension but closed for modification 🔓
2. Liskov Substitution Principle - Master the art of proper inheritance 🧬
3. Interface Segregation Principle - Create focused interfaces that don’t force unnecessary implementations 🎯
4. Dependency Inversion Principle - Depend on abstractions, not concretions 🔄

Keep practicing SRP in your daily coding! Every time you write a class, ask yourself: “Does this have just one reason to change?” Your future self (and your teammates) will thank you! 🙏

Happy coding, and remember - clean code is a gift to your future self! 🎁✨