How to implement Abstract Factory design pattern using TypeScript?

In this post, I’ll be explain how to implement Abstract Factory design pattern using TypeScript. I’ll cover some other popular design patterns soon. This post is part of the Design Patterns in TypeScript series. If you would like to learn more, please subscribe to my website for new updates.

What is Abstract Factory pattern?

The abstract factory pattern provides a way to encapsulate a group of individual factories that have a common theme without specifying their concrete classes. In normal usage, the client software creates a concrete implementation of the abstract factory and then uses the generic interface of the factory to create the concrete objects that are part of the theme. The client doesn’t know (or care) which concrete objects it gets from each of these internal factories, since it uses only the generic interfaces of their products. This pattern separates the details of implementation of a set of objects from their general usage and relies on object composition, as object creation is implemented in methods exposed in the factory interface.
Wikipedia

In other words, an abstract factory provides an interface for creating families of related objects without specifying their concrete classes. If you have a good understanding of Factory method design pattern, it will be really easily to understand this pattern.

With factory method design pattern, a factory is responsible to create objects which have a common interface depending on a certain type. This allows to easily create the objects at run-time based on requirements.

Similarly, there can be times when we need to have different factories that have a common theme/interface, so that depending on some requirement, a concrete factory class can be used via the generic interface of the factory. As such the generic interface is used, the client that request a factory doesn’t need to care which concrete objects it gets from internal factories.

Example

Let us take an example to understand this: we will take two popular brands that manufacture cars – Ford and Renault. Due to the high demand of compact and convertible cars in the market, these two brands need to create cars of such types.

Now to create a car for any given type, we need to have common definition of what a car type is and also an interface of a car factory that will be implemented by these two car makers as shown below:

Next, both of the car makers needs to have their own implementation of the car types by using the interface ICar as shown below:

Now let us setup two factory classes one for each make so that each factory is able to create a car based on requested car type. If a consumer/client needs a car, it just needs to know the make and car type and then it can request a car factory to do this job.

Next, let’s define two car factory classes for these two makers that uses the interface ICarFactory and gives car back depending on the car type.

As you can see, using the interfaces, we can add a new brand or a new car anytime. All we will need to do is use both of the interfaces to create a new factory per new make and create a new car.

Let us now consume this as a client below:

The car factory is accessed using generic interface named ICarFactory that doesn’t care about the concrete type of car factory class is passed at run-time. The code above uses a  CarFactoryProducer class and consumes its method named getCarFactory with a make to use relevant car factory depending on the passed make value.

Then the car factory is used to create a car, notice the usage of interface ICar for car variable above. Even this one doesn’t care about the concrete type of car. It is up to you, the author of the code to decide whether you would like to throw an error/exception (not supported type) when a matching make or car type is not provided.

Finally, we can see the output of this demo below:

I hope this post properly explains how to implement Abstract Factory design pattern using TypeScript. Please refer Design Patterns in TypeScript series to learn more about design patterns in TypeScript.

 

Siddharth Pandey

Siddharth Pandey is a Software Engineer with thorough hands-on commercial experience & exposure to building enterprise applications using Agile methodologies. Siddharth specializes in building, managing on-premise, cloud based real-time standard, single page web applications (SPAs). He has successfully delivered applications in health-care, finance, insurance, e-commerce sectors for major brands in the UK. Other than programming, he also has experience of managing teams, trainer, actively contributing to the IT community by sharing his knowledge using Stack Overflow, personal website & video tutorials.

You may also like...

Advertisment ad adsense adlogger