Adapter Design Pattern Implementation in Typescript

Adapter design translates one interface to anotherIn this post, we are going to learn the adapter design pattern and the usage of this design pattern.Adapter Design PatternThe adapter design pattern is a structural design pattern.Structural design patt…

Adapter design translates one interface to another

In this post, we are going to learn the adapter design pattern and the usage of this design pattern.

Adapter design pattern
Adapter Design Pattern

The adapter design pattern is a structural design pattern.

Structural design patterns are concerned with how classes and objects can be composed, to form larger structures.

Adapter Design Pattern Definition

Based on GoF The Adapter pattern is used to translate the interface of one class into another interface. This means that we can make classes work together that couldn’t otherwise because of incompatible interfaces.
In simple words when we have few classes(or functions in Javascript) and those classes are incompatible but should be used to meet the same goal, we can use this pattern. In another word you can wrap an incompatible class and create an adapter to use it the way you want.

Imagine that you have a card and you want to read that card using your laptop, the problem is that your card is not compatible with the USB port so you need a card reader to do this. Card reader is the adapter here! It let you read your card.

Another well-known example of adapter design pattern is a translator who translates words of a person to another person.

This design pattern is also known as Wrapper Design Pattern.

What are real-world examples of this design pattern?

  • When new components need to be integrated and work together with existing components in the application.
  • Parts of the program are rewritten with an improved interface, but the old code still expects the original interface.
  • When you have a third party API that there is a chance it changes.

Feel free to add more examples of using Adapter Design Pattern in the comments section.

Design Pattern UML

Adapter Design Pattern

Client is the class that contains our application logic

Adaptee is the class that is incompatible with Target interface.

Adapter is the class that let the client use Adaptee class.

Talk is cheap!

Imagine that we were using Redis to store some objects in our application, but now we want to use MongoDB in some parts.

One way is to add MongoDB and rewrite the code in all places that we want to use MongoDB.

Another way is using an Adapter Design Pattern to be sure that we can easily use MongoDB.

We were using Redis and we have an interface called IStore

We have our Redis Client implementation like this(Simplest way. Keep in mind that ioredis itself implements the set and get and all the other methods and we could use the Redis Client directly but just want to give access to these two methods):

Here is the Client which is a user here. We want to know how many times other people looked at this person’s profile and also we want to add to this number when someone visits the profile:

Right now we are using the Redis Client but we want to use MongoDB. We know that MongoDB is not compatible with the current structure. So the solution is using an adapter :

We have a MongoDB client that we can execute queries on the database and we have these methods insertOne and findOne .We are going to implement the IStore interface and do the same thing using MongoDB methods to store and retrieve data.

Also we return “OK” since this is how Redis response look like when the operation is successful.

The last part is using this Adapter class in the client class:

If you want to check these pieces together and test this example this is the MongoDB Connector file:

I already know that this might not be the perfect example, but I think you can understand the purpose of this design pattern with this example.


Adapter Design Pattern Implementation in Typescript was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.


Print Share Comment Cite Upload Translate
APA
Poorshad Shaddel | Sciencx (2024-03-28T16:59:59+00:00) » Adapter Design Pattern Implementation in Typescript. Retrieved from https://www.scien.cx/2021/05/16/adapter-design-pattern-implementation-in-typescript/.
MLA
" » Adapter Design Pattern Implementation in Typescript." Poorshad Shaddel | Sciencx - Sunday May 16, 2021, https://www.scien.cx/2021/05/16/adapter-design-pattern-implementation-in-typescript/
HARVARD
Poorshad Shaddel | Sciencx Sunday May 16, 2021 » Adapter Design Pattern Implementation in Typescript., viewed 2024-03-28T16:59:59+00:00,<https://www.scien.cx/2021/05/16/adapter-design-pattern-implementation-in-typescript/>
VANCOUVER
Poorshad Shaddel | Sciencx - » Adapter Design Pattern Implementation in Typescript. [Internet]. [Accessed 2024-03-28T16:59:59+00:00]. Available from: https://www.scien.cx/2021/05/16/adapter-design-pattern-implementation-in-typescript/
CHICAGO
" » Adapter Design Pattern Implementation in Typescript." Poorshad Shaddel | Sciencx - Accessed 2024-03-28T16:59:59+00:00. https://www.scien.cx/2021/05/16/adapter-design-pattern-implementation-in-typescript/
IEEE
" » Adapter Design Pattern Implementation in Typescript." Poorshad Shaddel | Sciencx [Online]. Available: https://www.scien.cx/2021/05/16/adapter-design-pattern-implementation-in-typescript/. [Accessed: 2024-03-28T16:59:59+00:00]
rf:citation
» Adapter Design Pattern Implementation in Typescript | Poorshad Shaddel | Sciencx | https://www.scien.cx/2021/05/16/adapter-design-pattern-implementation-in-typescript/ | 2024-03-28T16:59:59+00:00
https://github.com/addpipe/simple-recorderjs-demo