How to implement Builder design pattern using TypeScript?

In this post, I’ll be explain how to implement Builder design pattern using TypeScript. 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 Builder design pattern?

The builder pattern is an object creation software design pattern. Unlike the abstract factory pattern and the factory method pattern whose intention is to enable polymorphism, the intention of the builder pattern is to find a solution to the telescoping constructor anti-pattern.

In short, the intent of the Builder design pattern is to separate the construction of a complex object from its representation. By doing so the same construction process can create different representations.

Let us take an example of a car. A car can  have so many options like GPS, no. of seats, car type such as compact, city, sports, etc. If we create a type named Car then it will be too much responsibility on this type to handle so many options as constructors.

So, to keep the type Car in its simple representation, we will create a builder class named CarBuilder that can handle setup of such options step by step and return a final car at the end. Notice that I’ve also created an interface named ICarBuilder that any car builder class can implement.  The definition of each type is shown below:

Now, our car builder class is ready to be used. It is fine to directly use car builder class directly and get a car back. However, we can take one more step further to create a car builder director class that assembles a car instance i.e. delegating the construction to a separate builder object as shown below:

The output of method named show above is:

The concept is really simple that a client/consumer doesn’t need to know how an object – car in this case is build. It just requests a builder director to construct a car.  Internally, this director uses the car builder that knows how to actually build a car. Even if the internal logic is changed how a car is build, the client/consumer will not be affected in above scenario.

I hope this post properly explains how to implement Builder 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