TypeScript Factory Design Pattern with Example

In this article, we will learn how to use and implement the Factory Design Pattern in TypeScript with an example.

The factory design pattern overview

  • Factory Pattern is one of the Creational Design Pattern.
  • In the Factory pattern, we create an object without exposing the creation logic to the client and refer to newly created objects using a common interface.
  • The factory design pattern is used when we have a superclass with multiple sub-classes and based on input, we need to return one of the sub-class. This pattern takes out the responsibility of the instantiation of a class from the client program to the factory class.

TypeScript Factory Design Pattern Example

Let's create factory_method.ts file and add the following code to it:
export interface Product {
    method(param?: any) : void;
}

export class ConcreteProductA implements Product {
    method = (param?: any) => {
        return "Method of ConcreteProductA";
    }
}

export class ConcreteProductB implements Product {
    method = (param?: any) => {
        return "Method of ConcreteProductB";
    }
}


export class ProductFactory {
    public static createProduct(type: string) : Product {
        if (type === "A") {
            return new ConcreteProductA();
        } else if (type === "B") {
            return new ConcreteProductB();
        }

        return null;
    }
}

Usage

Let's create demo.ts file and add the following code to it:
import { Product, ProductFactory } from "./factoryMethod";

export function show() : void {
 var a: Product = ProductFactory.createProduct("A");
 var b: Product = ProductFactory.createProduct("B");

 console.log(a.method());
 console.log(b.method());
};

show();
Run:
  • Compile the above code using the TypeScript compiler.
  • Above code is compiled to plan JavaScript code
  • Run Javascript code using node
design_patterns_in_typescript\factory_method> tsc --target ES5 .\demo.ts
design_patterns_in_typescript\factory_method> node .\demo.js
Method of ConcreteProductA
Method of ConcreteProductB

Benefits of Factory Design Pattern

  • Factory design pattern provides an approach to code for interface rather than implementation.
  • Factory pattern removes the instantiation of actual implementation classes from client code. Factory pattern makes our code more robust, less coupled, and easy to extend. For example, we can easily change PC class implementation because the client program is unaware of this.
  • Factory pattern provides abstraction between implementation and client classes through inheritance.

All TypeScript Design Patterns

1. Creational Design Patterns

Creational patterns provide various object creation mechanisms, which increase flexibility and reuse of existing code.
  1. TypeScript Singleton Pattern Example
  2. TypeScript Factory Design Pattern with Example
  3. TypeScript Abstract Factory Pattern Example
  4. TypeScript Builder Pattern Example
  5. TypeScript Prototype Pattern Example

2. Structural Design Patterns

Structural patterns explain how to assemble objects and classes into larger structures while keeping these structures flexible and efficient.
  1. TypeScript Bridge Pattern Example
  2. TypeScript Adapter Pattern Example
  3. TypeScript Decorator Pattern Example
  4. TypeScript Composite Pattern Example
  5. TypeScript Flyweight Design Pattern Example
  6. TypeScript Facade Pattern Example
  7. TypeScript Proxy Pattern Example

3. Behavioral Design Patterns

Behavioral design patterns are concerned with algorithms and the assignment of responsibilities between objects.
  1. TypeScript Command Pattern Example
  2. TypeScript Chain of Responsibility Pattern Example
  3. TypeScript Visitor Pattern Example
  4. TypeScript Template Method Pattern Example
  5. TypeScript Strategy Pattern Example
  6. TypeScript State Pattern Example
  7. TypeScript Observer Pattern Example
  8. TypeScript Memento Pattern Example
  9. TypeScript Mediator Pattern Example
  10. TypeScript Iterator Pattern Example
  11. TypeScript Interpreter Design Pattern Example