Strategy Pattern in TypeScript Made Simple

What’s the Strategy Pattern?

The Strategy pattern is a behavioral design pattern. It lets you define a family of algorithms, encapsulate each one, and make them interchangeable. The Strategy pattern lets the algorithm vary independently from clients that use it.

Think about it like this: you have a job that needs to be done, and there are several different ways to do it. Instead of writing one big function with a bunch of if/else statements to choose the method, you can use the Strategy pattern. Each method becomes its own “strategy,” and you can swap them out as needed.

Why Use It?

It’s all about flexibility and maintainability.

Flexibility: You can add new strategies without changing the existing code that uses them. This is a big win for the Open/Closed Principle.
Maintainability: Your code becomes cleaner. Instead of bloated conditional logic, you have focused, single-responsibility classes or functions.
Testability: Individual strategies are easier to test in isolation.

Implementing Strategy in TypeScript

Let’s use a simple example: a Calculator that can perform different arithmetic operations.

First, we define an interface for our strategies. This interface will outline the common method that all concrete strategies must implement.

1
interface CalculationStrategy {
2
  execute(a: number, b: number): number;
3
}

Now, let’s create some concrete strategies that implement this interface.

Addition Strategy:

1
class AddStrategy implements CalculationStrategy {
2
  execute(a: number, b: number): number {
3
    return a + b;
4
  }
5
}

Subtraction Strategy:

1
class SubtractStrategy implements CalculationStrategy {
2
  execute(a: number, b: number): number {
3
    return a - b;
4
  }
5
}

Multiplication Strategy:

1
class MultiplyStrategy implements CalculationStrategy {
2
  execute(a: number, b: number): number {
3
    return a * b;
4
  }
5
}

Next, we create the Context class. This is the class that will use our strategies. It holds a reference to a CalculationStrategy object and delegates the execution to it.

1
class Calculator {
2
  private strategy: CalculationStrategy;
3

4
  constructor(strategy: CalculationStrategy) {
5
    this.strategy = strategy;
6
  }
7

8
  setStrategy(strategy: CalculationStrategy) {
9
    this.strategy = strategy;
10
  }
11

12
  calculate(a: number, b: number): number {
13
    return this.strategy.execute(a, b);
14
  }
15
}

Putting It All Together

Now we can use our Calculator with different strategies.

1
// Create instances of strategies
2
const add = new AddStrategy();
3
const subtract = new SubtractStrategy();
4
const multiply = new MultiplyStrategy();
5

6
// Initialize calculator with a strategy
7
let calculator = new Calculator(add);
8

9
console.log(`10 + 5 = ${calculator.calculate(10, 5)}`); // Output: 10 + 5 = 15
10

11
// Change the strategy
12
calculator.setStrategy(subtract);
13
console.log(`10 - 5 = ${calculator.calculate(10, 5)}`); // Output: 10 - 5 = 5
14

15
// Change again
16
calculator.setStrategy(multiply);
17
console.log(`10 * 5 = ${calculator.calculate(10, 5)}`); // Output: 10 * 5 = 50

Functional Approach (TypeScript Bonus)

TypeScript’s flexibility also allows for a more functional approach, which can sometimes be simpler for straightforward cases. Instead of classes, you can use functions.

1
// No interface needed here, just function signatures
2

3
type CalculationFunction = (a: number, b: number) => number;
4

5
const addFunc: CalculationFunction = (a, b) => a + b;
6
const subtractFunc: CalculationFunction = (a, b) => a - b;
7
const multiplyFunc: CalculationFunction = (a, b) => a * b;
8

9
class CalculatorFunc {
10
  private strategy: CalculationFunction;
11

12
  constructor(strategy: CalculationFunction) {
13
    this.strategy = strategy;
14
  }
15

16
  setStrategy(strategy: CalculationFunction) {
17
    this.strategy = strategy;
18
  }
19

20
  calculate(a: number, b: number): number {
21
    return this.strategy(a, b);
22
  }
23
}
24

25
// Usage is similar
26
let calcFunc = new CalculatorFunc(addFunc);
27
console.log(`Functional 10 + 5 = ${calcFunc.calculate(10, 5)}`); // Output: Functional 10 + 5 = 15
28

29
calcFunc.setStrategy(subtractFunc);
30
console.log(`Functional 10 - 5 = ${calcFunc.calculate(10, 5)}`); // Output: Functional 10 - 5 = 5

This functional version achieves the same goal with potentially less boilerplate for simple operations. The choice between object-oriented and functional often comes down to the complexity of the strategies and the overall project architecture.

When To Consider It?

When you have multiple variations of an algorithm for a specific task.
When you want to avoid exposing complex, algorithm-specific data and logic to the client code.
When an algorithm changes frequently, and you want to isolate those changes.

Conclusion

The Strategy pattern is a valuable tool in your TypeScript development arsenal. It promotes clean, flexible, and maintainable code by decoupling algorithms from the context that uses them. Whether you prefer an object-oriented or a more functional style, TypeScript makes implementing this pattern straightforward and effective. Give it a try in your next project!