TypeScript Strategy Design Pattern

What is strategy design pattern?

The strategy design pattern is a behavioral design pattern. It provides the ability to desing multiple algoritm in seperate classes form a interchangeable structure.

There are several terminologies in the strategy design pattern. These are:

• Context: its store a reference for concerete strategies and communicate with them via strategy interface.
• Strategy: It defines the common properties for all concrete strategies
• Concrete strategies: It implements the strategy and handle the properties defiend in them.
• Client: This refers to the application or function that communicates with the system.

When should the strategy design pattern be used?

The strategy design pattern can be employed when there is a need for multiple variations in the result of executing an object, and at the same time it needs to be interchangeable during runtime.

It can also be employed when there are multiple classes that exhibit slightly different behaviors. To avoid code duplication, the strategy pattern can be utilized.

Another advantage of the strategy design pattern is that it can isolate the business logic from the rest of the system.

How to implement strategy design pattern in TypeScript

Let’s apply the strategy design pattern to TypeScript. First, let’s imagine a scenario where we are building a navigation system and decide to expand our navigation types. Subsequently, we construct various types of strategies in separate classes. Following this, we seek a way to implement our new strategies into our design. To achieve this, we decide to employ the strategy design pattern. With this approach, we connect our strategies to the context and pass different types of strategies to the context via the client at runtime.

The working mechanism of the strategy design pattern differs from the state design pattern. In the state design pattern, the context of the state chooses what to run; however, in the strategy design pattern, the object that is going to be run passes directly to the context.

Strategy design pattern diagram

Strategy design pattern diagram

Strategy design pattern code

// Strategy Interface
interface INavigationStrategy {
    navigate(): void;
}

class WalkingNavigation implements INavigationStrategy {
    navigate(): void {
        console.log("Following walking route...");
    }
}

class DrivingNavigation implements INavigationStrategy {
    navigate(): void {
        console.log("Following driving directions...");
    }
}

// Context
class Navigate {
    private navigationStrategy: INavigationStrategy;

    constructor(strategy: INavigationStrategy) {
        this.navigationStrategy = strategy;
    }

    setNavigationStrategy(strategy: INavigationStrategy): void {
        this.navigationStrategy = strategy;
    }

    startNavigation(): void {
        console.log("Starting navigation:");
        this.navigationStrategy.navigate();
    }
}

// Client
const walkingStrategy = new WalkingNavigation();
const navigate = new Navigate(walkingStrategy);
//Starting navigation:
// Output: Following walking route...
navigate.startNavigation(); 

const drivingStrategy = new DrivingNavigation();
navigate.setNavigationStrategy(drivingStrategy);
//Starting navigation:
// Output: Following driving directions...
navigate.startNavigation();