TypeScript Factory Design Pattern

What is factory design pattern?

The Factory Design Pattern is a creational design pattern that manipulates the creation of objects from superclasses. It places an interface between the superclass and its instances. This approach provides the option to manipulate the superclass instance. With the aid of this interface, we can change and alter the type of instance that is going to be created. This way, we can have various types of instances based on our requirements.

There are a few terminologies in the Factory Design Pattern. These are:

• Concrete Creator: The client application, class, or method that requests an object from the Creator.
• Product Interface: It’s the interface that intervenes in instantiating of objects from superclasses. It provides specifications for the creator to generate the final object.
• Creator: The factory class contains the factory method that returns the final object based on requirements.
• Concrete Product: The object returned from the Factory implements the Product interface.

When should the factory design pattern be used?

This pattern is commonly used when the specific type and dependencies of an object are unknown, or when there’s a need to delegate the responsibility of instantiation to a separate component.

How to implement factory design pattern in TypeScript

Let’s try to apply the factory design pattern to a TypeScript example. Imagine we have a store that holds various products and, upon request, returns the product model and price.

Our issue here is that we deal with different types of products. Creating a separate system for each product type would result in unnecessary complexity and increased workload. Therefore, we’ve decided to employ the factory design pattern.

By creating a generalized factory class and a factory method for instantiating products, we centralize the product creation process. This way instead of building different systems, we utilize interfaces between our factory class and product classes to modify the products in subclasses.

First, let’s start by visualizing our design with a UML class diagram:

Factory desing pattern diagram

Factory design pattern diagram

As depicted in the diagram above, we employed essential components of the factory method design pattern by utilizing interfaces and inheritances.

Factory desing pattern code

//product interface
interface IElectronic {
    product(): string;
}

//concrete product
class Computer implements IElectronic {
    protected price: number;
    protected model: string;
    constructor() {
        this.price = 0;
        this.model = "unknown";
    }
    product(): string {
        return `product model: ${this.model}\nproduct price: ${this.price}$`
    }
}

//final product A
class Laptop extends Computer {
    constructor() {
        super();
        this.price = 22;
        this.model = "Laptop";
    }
}

//final product B
class Desktop extends Computer {
    constructor() {
        super();
        this.model = "Desktop";
        this.price = 50;
    }
}

//Factory/Creator class
class Store {
  //Factory Method
    public static getProduct(product: string): IElectronic {
        if (product == "Laptop") {
            return new Laptop();
        } else if (product == "Desktop") {
            return new Desktop();
        } else {
            throw new Error('Undefined Product');
        }
    }
}

//          Client

const laptop = Store.getProduct("Laptop");
//Output: product model: Laptop
//        product price: 22$
console.log(laptop.product());


const desktop = Store.getProduct("Desktop");
//Output: product model: Desktop
//        product price: 50$
console.log(desktop.product());

Factory design pattern advantages

• Encapsulation: By encapsulating the object creation process and centralizing it, its hides the details from the client and provides better organization and maintenance.
• Abstraction: By moving the communication between concrete classes and clients to interfaces, it provides flexibility in object creation without requiring changes in the client.
• Code Reusability and Extensibility: It enhances the reuse of existing code by centralizing the object creation logic, making it easier to add new features to the object creation logic using new classes.
• Decoupling: It separates client code from the specifics of the object creation process and reduces dependencies, making the code more modular and easier to maintain.

Factory design pattern disadvantages

• Complexity: Implementing the factory design pattern in small-scale applications can increase the complexity of the code.
• Increased Number of Classes: Employing the Factory Design Pattern inherently involves creating separate classes for factories, which can increase the number of classes in the codebase and make the code more complex.