Design Patterns: Strategy Pattern in TypeScript

Tram Ho

How to use Strategy Pattern in TypeScript to solve real world problems in web projects.

Welcome to the Design Patterns in TypeScript series, this series will introduce some useful Design Patterns in web development using TypeScript.

Design Patterns are very important for web developers and we can code better by mastering them. In this article, I will use TypeScript to introduce the Strategy Pattern .

Problem

Register and Login are important features in web applications. When registering a web application, the more common way to register is using account/password, email or mobile number… Once you have successfully registered, you can use the corresponding function to Login .

When the web application needs to support other Login functions, for example, in addition to the Login email function, the Login page also supports the Login features of third-party platforms such as Google, Facebook, Apple and Twitter.

image.png

So to support more third-party Login function methods, we need to modify the previous login function:

Doesn’t look good at all! If we continue to add or modify Login methods later on, we will find that this login function becomes more and more difficult to maintain. For this, we can use the Strategy Pattern to encapsulate different Login functions into different strategies .

Strategy Pattern

To better understand the Strategy Pattern fragment, let’s first take a look at the corresponding UML diagram:

image.png

In the image above, we define an Interface Strategy , then implement two Login strategies for Twitter and account/password based on this Interface.

Interface strategy

Strategy Twitter Class is implemented from Interface Strategy

The LocalStrategy class is also implemented from Interface Strategy

After having implementations from different Interface Strategy, we define an Authenticator class to switch between different Login strategies and perform authentication operations accordingly.

Authenticator class

authenticate.apply calls authenticate with the given this value and the arguments provided as an array (or an array-like object)

Then we can use different Login functions to achieve user authentication in the following ways:

When you successfully run the above code, the corresponding output is shown in the following figure:

image.png

The Strategy Pattern, in addition to being used for authentication Login cases, can also be used in many different scenarios (For example: form validation). It can also be used to optimize problems with too many if/else branches.

If you use Node.js to develop authentication services , then you will normally use this passport.js library, right? If you have used this Passport.js library/Module but don’t know how it works, then Strategy Pattern will help you to understand it better. It’s better to use something you understand than to use something you don’t understand. Ahihi

This passport.js module is very powerful and currently supports up to 538 strategies:

image.png

Some situations where you can think about using the Strategy Pattern :

  • When a system needs to automatically choose one of the algorithms. And each algorithm can be encapsulated in a strategy .
  • Many classes differ only in behavior and it is possible to use the Strategy Pattern to automatically choose specific behavior to be executed at runtime.

Roundup

As always, I hope you enjoyed this article and learned something new.

Thank you and see you in the next posts!

If you find this blog interesting, please give me a like and subscribe to support me. Thank you.

Ref

Share the news now

Source : Viblo