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

Abstract Factory is a creational design pattern that lets you produce families of related objects without specifying their concrete classes.

TypeScript Abstract Factory Pattern Example

The below diagram shows the generic structure of the Abstract Factory Pattern:

Let's refer the above structure to create an example to demonstrates the usage of the Abstract Factory Pattern:

    export interface AbstractProductA {
        methodA(): string;
    }
    export interface AbstractProductB {
        methodB(): number;
    }

    export interface AbstractFactory {
        createProductA(param?: any) : AbstractProductA;
        createProductB() : AbstractProductB;
    }


    export class ProductA1 implements AbstractProductA {
        methodA = () => {
            return "This is methodA of ProductA1";
        }
    }
    export class ProductB1 implements AbstractProductB {
        methodB = () => {
            return 1;
        }
    }

    export class ProductA2 implements AbstractProductA {
        methodA = () => {
            return "This is methodA of ProductA2";
        }
    }
    export class ProductB2 implements AbstractProductB {
        methodB = () => {
            return 2;
        }
    }


    export class ConcreteFactory1 implements AbstractFactory {
        createProductA(param?: any) : AbstractProductA {
            return new ProductA1();
        }

        createProductB(param?: any) : AbstractProductB {
            return new ProductB1();
        }
    }
    export class ConcreteFactory2 implements AbstractFactory {
        createProductA(param?: any) : AbstractProductA {
            return new ProductA2();
        }

        createProductB(param?: any) : AbstractProductB {
            return new ProductB2();
        }
    }


    export class Tester {
        private abstractProductA: AbstractProductA;
        private abstractProductB: AbstractProductB;

        constructor(factory: AbstractFactory) {
            this.abstractProductA = factory.createProductA();
            this.abstractProductB = factory.createProductB();
        }

        public test(): void {
            console.log(this.abstractProductA.methodA());
            console.log(this.abstractProductB.methodB());
        }
    }

Usage

import {AbstractFactory, ConcreteFactory1, Tester, ConcreteFactory2 } from './abstractFactory'
export function show() {
 // Abstract factory1
 var factory1: AbstractFactory = new ConcreteFactory1();
 var tester1: Tester = new Tester(factory1);
 tester1.test();

 // Abstract factory2
 var factory2: AbstractFactory = new ConcreteFactory2();
 var tester2: Tester = new Tester(factory2);
 tester2.test();
}

show();

Run:

• Compile the above code using the TypeScript compiler.
• Above code is compiled to plan JavaScript code
• Run Javascript code using node

PS C:\Users\RAMESH\design_patterns_in_typescript\abstract_factory> tsc --target ES5 .\demo.ts
PS C:\Users\RAMESH\design_patterns_in_typescript\abstract_factory> node .\demo.js
This is methodA of ProductA1
1
This is methodA of ProductA2
2

Abstract Factory Design Pattern Benefits

• Abstract Factory design pattern provides an approach to code for interface rather than implementation.

• Abstract Factory pattern is “factory of factories” and can be easily extended to accommodate more products, 

• Abstract Factory pattern is robust and avoids the conditional logic of the Factory pattern.

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