Applying SOLID Principles in TypeScript: A Practical Guide for Developers

15 August 2024

Introduction to SOLID Principles

The SOLID principles are a set of five fundamental design principles that guide software developers in creating robust, maintainable, and scalable software. These principles were introduced by Robert C. Martin, also known as Uncle Bob, and have become a cornerstone in object-oriented design. Each letter in SOLID stands for a specific principle:

  1. Single-Responsibility Principle (SRP) - A class should have only one reason to change, meaning it should only have one job or responsibility.

  2. Open-Closed Principle (OCP) - Software entities should be open for extension but closed for modification.

  3. Liskov Substitution Principle (LSP) - Objects of a superclass should be replaceable with objects of a subclass without affecting the correctness of the program.

  4. Interface Segregation Principle (ISP) - Clients should not be forced to depend on interfaces they do not use.

  5. Dependency Inversion Principle (DIP) - High-level modules should not depend on low-level modules. Both should depend on abstractions.

Understanding and applying these principles in TypeScript can greatly enhance the quality of your code, making it more modular, reusable, and easier to maintain. In this article, we'll explore each principle in detail, provide practical TypeScript examples, and discuss how to effectively implement them in your projects.

Single-Responsibility Principle (SRP)

Definition and Explanation

The Single-Responsibility Principle (SRP) asserts that a class should have only one reason to change, meaning it should encapsulate only one responsibility or function. This principle helps in keeping the code modular, easier to understand, and less prone to errors.

Why It's Important

Adhering to SRP results in:

  • Improved code readability and maintainability

  • Easier debugging and testing

  • Reduced risk of unintentional side effects when making changes

Example

Consider the following Student class, which violates the SRP by handling multiple responsibilities:

class Student  {
  public createStudentAccount() {
    // some logic
  }
  public calculateStudentGrade() {
    // some logic
  }
  public generateStudentData() {
    // some logic
  }
}

To adhere to the SRP, we can refactor this into multiple classes, each handling a single responsibility:

class StudentAccount {
  public createStudentAccount() {
    // some logic
  }
}

class StudentGrade {
  public calculateStudentGrade() {
    // some logic
  }
}

class StudentData {
  public generateStudentData() {
    // some logic
  }
}

Benefits

By dividing the Student class into three separate classes, we ensure that each class has only one responsibility. This makes the code simpler, more modular, and easier to maintain.

Practical Scenarios in TypeScript

In a TypeScript project, you might find yourself writing service classes that handle multiple tasks. Breaking these services into smaller, single-responsibility classes can lead to cleaner and more maintainable code. For example, rather than having a single UserService that handles fetching, updating, and deleting users, you can create separate services like UserFetchService, UserUpdateService, and UserDeleteService.

Key Takeaways

  • A class should have only one reason to change.

  • Single-responsibility helps in creating modular and maintainable code.

  • Refactor multi-responsibility classes into smaller, focused classes.

Open-Closed Principle (OCP)

Definition and Explanation

The Open-Closed Principle (OCP) states that software entities (classes, modules, functions, etc.) should be open for extension but closed for modification. This means you can add new functionality to a module or class without altering its existing code.

Importance in Software Development

Following the OCP ensures that the existing codebase remains untouched when new features are added. This minimizes the risk of introducing bugs and makes the system more maintainable.

Example

Let's consider a function that calculates the area of different shapes:

class Triangle {
  public base: number;
  public height: number;
  constructor(base: number, height: number) {
    this.base = base;
    this.height = height;
  }
}

class Rectangle {
  public width: number;
  public height: number;
  constructor(width: number, height: number) {
    this.width = width;
    this.height = height;
  }
}

function computeAreasOfShapes(shapes: Array<Rectangle | Triangle>) {
  return shapes.reduce((computedArea, shape) => {
    if (shape instanceof Rectangle) {
      return computedArea + shape.width * shape.height;
    }
    if (shape instanceof Triangle) {
      return computedArea + shape.base * shape.height * 0.5;
    }
  }, 0);
}

This function needs to be modified each time a new shape is added, violating the OCP. To adhere to OCP, we can use an interface:

interface ShapeAreaInterface {
  getArea(): number;
}

class Triangle implements ShapeAreaInterface {
  public base: number;
  public height: number;
  constructor(base: number, height: number) {
    this.base = base;
    this.height = height;
  }
  public getArea() {
    return this.base * this.height * 0.5;
  }
}

class Rectangle implements ShapeAreaInterface {
  public width: number;
  public height: number;
  constructor(width: number, height: number) {
    this.width = width;
    this.height = height;
  }
  public getArea() {
    return this.width * this.height;
  }
}

function computeAreasOfShapes(shapes: ShapeAreaInterface[]) {
  return shapes.reduce((computedArea, shape) => {
    return computedArea + shape.getArea();
  }, 0);
}

Benefits

By using interfaces, we can introduce new shapes without modifying the existing computeAreasOfShapes function. This makes the codebase more stable and easier to extend.

Practical Scenarios in TypeScript

When working with TypeScript, you might need to add new features to a system without changing existing modules. Utilizing interfaces and class inheritance can help adhere to OCP, ensuring that your code remains extendable and robust.

Key Takeaways

  • Software entities should be open for extension but closed for modification.

  • Use interfaces to enable extending functionality without altering existing code.

  • Adhering to OCP helps in maintaining a stable and extendable codebase.

Liskov Substitution Principle (LSP)

Definition and Explanation

The Liskov Substitution Principle (LSP) states that objects of a superclass should be replaceable with objects of a subclass without affecting the correctness of the program. In simpler terms, subclasses should behave in a way that does not break the functionality expected from the superclass.

Importance in Software Design

Following the LSP ensures that a system remains predictable and reliable when subclasses are used in place of their superclasses. It promotes the use of polymorphism and helps in maintaining the integrity of the system.

Example

Consider the following example where a Rectangle class is extended by a Square class, leading to an LSP violation:

class Rectangle {
  public width: number;
  public height: number;
  public setWidth(width: number) {
    this.width = width;
  }
  public setHeight(height: number) {
    this.height = height;
  }
  public getArea() {
    return this.width * this.height;
  }
}

class Square extends Rectangle {
  public setWidth(width: number) {
    this.width = width;
    this.height = width;
  }
  public setHeight(height: number) {
    this.width = height;
    this.height = height;
  }
}

let square = new Square();
square.setWidth(100);
square.setHeight(50);
console.log(square.getArea()); // Incorrect result

In this example, the Square class does not adhere to the LSP as it alters the behavior expected from the Rectangle class.

Refactored Example

To adhere to the LSP, we can use composition instead of inheritance:

interface Shape {
  getArea(): number;
}

class Rectangle implements Shape {
  public width: number;
  public height: number;
  public setWidth(width: number) {
    this.width = width;
  }
  public setHeight(height: number) {
    this.height = height;
  }
  public getArea() {
    return this.width * this.height;
  }
}

class Square implements Shape {
  public sideLength: number;
  public setSideLength(sideLength: number) {
    this.sideLength = sideLength;
  }
  public getArea() {
    return this.sideLength * this.sideLength;
  }
}

let square = new Square();
square.setSideLength(50);
console.log(square.getArea()); // Correct result

Benefits

By adhering to the LSP, we ensure that the subclasses can be used interchangeably with their superclasses without causing unexpected behavior. This leads to more predictable and maintainable code.

Practical Scenarios in TypeScript

In TypeScript, ensuring that subclasses adhere to the LSP involves careful consideration when extending classes. It often involves using interfaces and abstract classes to define contracts that subclasses must follow.

Key Takeaways

  • Subclasses should be substitutable for their base classes without altering the correctness of the program.

  • Adhering to LSP ensures predictable and reliable behavior in the system.

  • Use composition and interfaces to maintain the integrity of the class hierarchy.

Interface Segregation Principle (ISP)

Definition and Explanation

The Interface Segregation Principle (ISP) states that clients should not be forced to depend on interfaces they do not use. This means that larger interfaces should be broken down into smaller, more specific ones to avoid forcing classes to implement methods they do not need.

Importance in Software Design

Following the ISP helps in creating more focused and manageable interfaces, leading to a more flexible and maintainable codebase. It reduces the impact of changes and promotes the use of small, well-defined contracts.

Example

Consider an interface that forces classes to implement methods they do not need:

interface ShapeInterface {
  calculateArea(): number;
  calculateVolume(): number;
}

class Square implements ShapeInterface {
  calculateArea() {
    // some logic
  }
  calculateVolume() {
    // not applicable for Square
  }
}

In this example, the Square class is forced to implement the calculateVolume method, which is not relevant to it.

Refactored Example

To adhere to the ISP, we can split the interface into smaller, more focused interfaces:

interface AreaInterface {
  calculateArea(): number;
}

interface VolumeInterface {
  calculateVolume(): number;
}

class Square implements AreaInterface {
  calculateArea() {
    // some logic
  }
}

class Cylinder implements AreaInterface, VolumeInterface {
  calculateArea() {
    // some logic
  }
  calculateVolume() {
    // some logic
  }
}

Benefits

By splitting the interfaces, we ensure that classes only implement the methods they actually need. This leads to more focused classes and reduces the impact of changes when interfaces evolve.

Practical Scenarios in TypeScript

In TypeScript projects, you can often find interfaces that are too broad and force classes to implement unnecessary methods. Breaking down these interfaces into smaller ones ensures that classes remain focused and maintainable.

Key Takeaways

  • Clients should not be forced to depend on interfaces they do not use.

  • Split large interfaces into smaller, more focused ones.

  • Adhering to ISP helps in creating flexible and maintainable code.

Dependency Inversion Principle (DIP)

Definition and Explanation

The Dependency Inversion Principle (DIP) states that high-level modules should not depend on low-level modules. Both should depend on abstractions. This means that the details (low-level modules) should depend on abstractions (high-level modules), not the other way around.

Why DIP Matters

Following the DIP helps in decoupling the system, making it more modular and easier to maintain. It allows for greater flexibility and makes the system more resilient to changes.

Example

Consider a class that directly depends on a low-level module:

class MySQLDatabase {
  public create(order) {
    // create and insert to database
  }
  public update(order) {
    // update database
  }
}

class OrderService {
  database: MySQLDatabase;
  public create(order) {
    this.database.create(order);
  }
  public update(order) {
    this.database.update(order);
  }
}

In this example, the OrderService class directly depends on the MySQLDatabase class, violating the DIP.

Refactored Example

To adhere to the DIP, we can use an interface to abstract the dependency:

interface Database {
  create(order): void;
  update(order): void;
}

class OrderService {
  database: Database;
  public create(order) {
    this.database.create(order);
  }
  public update(order) {
    this.database.update(order);
  }
}

class MySQLDatabase implements Database {
  public create(order) {
    // create and insert to database
  }
  public update(order) {
    // update database
  }
}

Benefits

By relying on abstractions rather than concrete implementations, we make the OrderService class more flexible and easier to test. It can now work with any database implementation that adheres to the Database interface.

Practical Scenarios in TypeScript

In a TypeScript project, adhering to the DIP involves defining interfaces for dependencies and ensuring that high-level modules rely on these abstractions. This allows for easy swapping of dependencies and makes the system more adaptable to changes.

Key Takeaways

  • High-level modules should not depend on low-level modules. Both should depend on abstractions.

  • Use interfaces to decouple dependencies and promote flexibility.

  • Adhering to DIP leads to a more modular and maintainable codebase.

Practical Implementation of SOLID Principles in TypeScript Projects

Implementing SOLID principles in a TypeScript project requires thoughtful planning and a clear understanding of each principle. Let's combine all five principles in a cohesive example.

Example: E-Commerce System

Imagine we're building an e-commerce system with various services and functionalities. Here's how we can apply SOLID principles:

Single Responsibility Principle (SRP)

Create separate classes for different responsibilities:

class ProductService {
  public addProduct(product) {
    // logic to add product
  }
}

class OrderService {
  public createOrder(order) {
    // logic to create order
  }
}

class UserService {
  public registerUser(user) {
    // logic to register user
  }
}

Open-Closed Principle (OCP)

Use interfaces and inheritance to extend functionality without modifying existing code:

interface PaymentMethod {
  processPayment(amount: number): boolean;
}

class CreditCardPayment implements PaymentMethod {
  processPayment(amount: number): boolean {
    // credit card payment logic
    return true;
  }
}

class PayPalPayment implements PaymentMethod {
  processPayment(amount: number): boolean {
    // PayPal payment logic
    return true;
  }
}

class PaymentService {
  private paymentMethod: PaymentMethod;
  constructor(paymentMethod: PaymentMethod) {
    this.paymentMethod = paymentMethod;
  }
  public process(amount: number): boolean {
    return this.paymentMethod.processPayment(amount);
  }
}

Liskov Substitution Principle (LSP)

Ensure subclasses can be substituted for their base classes without altering functionality:

interface Notification {
  send(message: string): void;
}

class EmailNotification implements Notification {
  send(message: string): void {
    // email sending logic
  }
}

class SMSNotification implements Notification {
  send(message: string): void {
    // SMS sending logic
  }
}

function notifyUser(notification: Notification, message: string) {
  notification.send(message);
}

Interface Segregation Principle (ISP)

Split large interfaces into smaller, more focused ones:

interface ProductManagement {
  addProduct(product): void;
}

interface OrderManagement {
  createOrder(order): void;
}

interface UserManagement {
  registerUser(user): void;
}

class ProductService implements ProductManagement {
  public addProduct(product) {
    // logic to add product
  }
}

class OrderService implements OrderManagement {
  public createOrder(order) {
    // logic to create order
  }
}

class UserService implements UserManagement {
  public registerUser(user) {
    // logic to register user
  }
}

Dependency Inversion Principle (DIP)

Depend on abstractions rather than concrete implementations:

interface Database {
  save(record: any): void;
}

class MongoDB implements Database {
  public save(record: any) {
    // MongoDB save logic
  }
}

class UserService {
  private database: Database;
  constructor(database: Database) {
    this.database = database;
  }
  public registerUser(user) {
    this.database.save(user);
  }
}

By applying these principles, we create a flexible, maintainable, and scalable e-commerce system.

Best Practices for Applying SOLID Principles in TypeScript

  • Start small: Begin by applying one principle at a time. Ensure your team understands each principle before moving on to the next.

  • Code reviews: Conduct regular code reviews to ensure adherence to SOLID principles and share knowledge within the team.

  • Refactor regularly: Continuously refactor code to adhere to SOLID principles, improving maintainability and scalability.

  • Use design patterns: Implement design patterns that promote SOLID principles, such as Dependency Injection, Strategy, and Factory patterns.

  • Educate your team: Provide training and resources to help your team understand and apply SOLID principles effectively.

Conclusion

Adopting SOLID principles in your TypeScript projects leads to cleaner, more maintainable, and scalable code. By understanding and applying each principle, you can improve the quality of your software and make it more adaptable to future changes.

References and Further Reading

  1. Applying SOLID principles to TypeScript - LogRocket Blog

  2. SOLID Principles using Typescript | Medium

  3. Understanding the SOLID Principles in TypeScript - Devonblog

  4. SOLID Principles: The Software Developer's Framework to Robust ... - Khalil Stemmler

  5. SOLID Principles in TypeScript (2022) | Bits and Pieces

Get engineers' time back from marketing!

Don't let managing a blog on your site get in the way of your core product.

Wisp empowers your marketing team to create and manage content on your website without consuming more engineering hours.

Get started in few lines of codes.

Choosing a CMS
Related Posts
What is SolidJS? Understanding the Modern Reactive Library

What is SolidJS? Understanding the Modern Reactive Library

Meet SolidJS, the cutting-edge library that's redefining web development. Explore its high-performance features, intuitive reactivity, and why it’s the perfect React alternative for dynamic UIs!

Read Full Story
Setting up tRPC with Next.js 14

Setting up tRPC with Next.js 14

Unlock the full potential of Next.js 14 by integrating it with tRPC! Follow this comprehensive guide to create type-safe, efficient applications—perfect for developers looking to optimize.

Read Full Story
How to Bootstrap a Remix Project

How to Bootstrap a Remix Project

From Zero to Full-Stack: Mastering Remix and Prisma Discover how to build fast, scalable, and SEO-friendly web applications with practical examples and easy integration tips.

Read Full Story