Chain of Responsibility Pattern in TypeScript: Implementation Guide

5.2.3 Implementation in TypeScript

In this section, we will delve into the implementation of the Chain of Responsibility pattern using TypeScript. This pattern is particularly useful for scenarios where multiple handlers can process a request, and the request is passed along a chain until a suitable handler is found. TypeScript’s static typing provides an added layer of reliability, ensuring that handlers conform to expected interfaces and catching errors at compile time.

Understanding the Chain of Responsibility Pattern

The Chain of Responsibility pattern allows an object to send a command without knowing which object will handle it. This is achieved by passing the command along a chain of potential handlers until one of them handles the command. This pattern promotes loose coupling and enhances flexibility in assigning responsibilities to objects.

Key Components

1. Handler Interface: Defines an interface for handling requests and setting the next handler in the chain.
2. Concrete Handlers: Implement the handler interface and handle requests they are responsible for.
3. Client: Initiates the request to the chain of handlers.

Implementing the Chain of Responsibility in TypeScript

Step 1: Define the Handler Interface

We start by defining an interface for our handlers. This interface will include a method for handling requests and a method for setting the next handler in the chain.

interface Handler {
    setNext(handler: Handler): Handler;
    handle(request: string): void;
}

• setNext(handler: Handler): Handler: This method sets the next handler in the chain and returns the handler to allow chaining.
• handle(request: string): void: This method processes the request. If the handler cannot process it, it passes the request to the next handler.

Step 2: Create Concrete Handlers

Next, we implement concrete handlers that will process specific types of requests. Each handler will decide whether to handle the request or pass it to the next handler.

class ConcreteHandlerA implements Handler {
    private nextHandler: Handler | null = null;

    public setNext(handler: Handler): Handler {
        this.nextHandler = handler;
        return handler;
    }

    public handle(request: string): void {
        if (request === 'A') {
            console.log('ConcreteHandlerA handled the request.');
        } else if (this.nextHandler) {
            this.nextHandler.handle(request);
        }
    }
}

class ConcreteHandlerB implements Handler {
    private nextHandler: Handler | null = null;

    public setNext(handler: Handler): Handler {
        this.nextHandler = handler;
        return handler;
    }

    public handle(request: string): void {
        if (request === 'B') {
            console.log('ConcreteHandlerB handled the request.');
        } else if (this.nextHandler) {
            this.nextHandler.handle(request);
        }
    }
}

• ConcreteHandlerA and ConcreteHandlerB: These classes implement the Handler interface. They check if they can handle the request; if not, they pass it to the next handler.

Step 3: Set Up the Chain

Now, we set up the chain of handlers. The client will initiate the request, and it will be passed along the chain until a handler processes it.

const handlerA = new ConcreteHandlerA();
const handlerB = new ConcreteHandlerB();

handlerA.setNext(handlerB);

// Client code
const request = 'B';
handlerA.handle(request);

• Chain Setup: We create instances of our handlers and link them using the setNext method.
• Client Code: The client sends a request to the first handler in the chain.

Benefits of Using TypeScript

1. Static Typing: TypeScript’s static typing ensures that handlers conform to the expected interface, reducing runtime errors.
2. Compile-Time Error Checking: TypeScript catches errors at compile time, making the code more robust and reliable.
3. Optional Parameters and Default Handling: TypeScript allows us to define optional parameters and default values, making our handlers more flexible.

Implementing Optional Parameters and Default Handling

In some cases, a handler might need to handle requests differently based on additional parameters. TypeScript allows us to define optional parameters and default values to handle such scenarios.

class ConcreteHandlerC implements Handler {
    private nextHandler: Handler | null = null;

    public setNext(handler: Handler): Handler {
        this.nextHandler = handler;
        return handler;
    }

    public handle(request: string, context?: any): void {
        if (request === 'C' && context?.priority === 'high') {
            console.log('ConcreteHandlerC handled the high-priority request.');
        } else if (this.nextHandler) {
            this.nextHandler.handle(request, context);
        }
    }
}

• Optional Parameters: The handle method includes an optional context parameter, allowing handlers to make decisions based on additional information.
• Default Handling: If no handler processes the request, it can be passed to a default handler or logged for further analysis.

Visualizing the Chain of Responsibility

To better understand how the Chain of Responsibility pattern works, let’s visualize the flow of a request through the chain of handlers.

    graph LR
	    A[Client] --> B[ConcreteHandlerA]
	    B -->|Passes request| C[ConcreteHandlerB]
	    C -->|Passes request| D[ConcreteHandlerC]
	    D -->|Handles request| E[End]

• Diagram Explanation: The client sends a request to ConcreteHandlerA. If ConcreteHandlerA cannot handle it, the request is passed to ConcreteHandlerB, and so on, until a handler processes the request or it reaches the end of the chain.

Try It Yourself

Now that we’ve covered the basics, try modifying the code to add more handlers or change the conditions under which each handler processes requests. Experiment with different request types and see how the chain adapts.

References and Further Reading

• MDN Web Docs: Design Patterns
• TypeScript Handbook
• Refactoring Guru: Chain of Responsibility

Knowledge Check

Before we wrap up, let’s reinforce what we’ve learned with a few questions and exercises.

1. Define a new handler that processes requests of type ‘D’ and add it to the chain.
2. Modify the ConcreteHandlerC to handle requests based on a different context parameter.
3. What are the advantages of using TypeScript for implementing the Chain of Responsibility pattern?

Embrace the Journey

Remember, mastering design patterns takes practice and experimentation. As you continue to explore and implement different patterns, you’ll gain a deeper understanding of how to structure your code for maintainability and scalability. Keep experimenting, stay curious, and enjoy the journey!

Quiz Time!