TypeScript Factory Design Pattern

🎓 Top 15 Udemy Courses (80-90% Discount): My Udemy Courses - Ramesh Fadatare — All my Udemy courses are real-time and project oriented courses.

▶️ Subscribe to My YouTube Channel (178K+ subscribers): Java Guides on YouTube

▶️ For AI, ChatGPT, Web, Tech, and Generative AI, subscribe to another channel: Ramesh Fadatare on YouTube

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.

TypeScript Design Patterns

• TypeScript Singleton Pattern Example

• TypeScript Factory Method Example

• TypeScript Builder Pattern Example

My Top and Bestseller Udemy Courses. The sale is going on with a 70 - 80% discount. The discount coupon has been added to each course below:

Build REST APIs with Spring Boot 4, Spring Security 7, and JWT

🆕 High-Demand 80–90% OFF

[NEW] Learn Apache Maven with IntelliJ IDEA and Java 25

🆕 High-Demand 80–90% OFF

ChatGPT + Generative AI + Prompt Engineering for Beginners

🚀 Trending Now 80–90% OFF

Spring 7 and Spring Boot 4 for Beginners (Includes 8 Projects)

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Building Real-Time REST APIs with Spring Boot - Blog App

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Building Microservices with Spring Boot and Spring Cloud

🌟 Top Rated 80–90% OFF
Available in Udemy for Business

Java Full-Stack Developer Course with Spring Boot and React JS

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Build 5 Spring Boot Projects with Java: Line-by-Line Coding

🌟 Top Rated 80–90% OFF

Testing Spring Boot Application with JUnit and Mockito

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Spring Boot Thymeleaf Real-Time Web Application - Blog App

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Master Spring Data JPA with Hibernate

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Spring Boot + Apache Kafka Course - The Practical Guide

🎓 Student Favorite 80–90% OFF
Available in Udemy for Business

Java Testing: Mastering JUnit 5 Framework

🆕 New 80–90% OFF

Reactive Programming in Java: Spring WebFlux and Testing

🌟 Top Rated 80–90% OFF

Spring Boot + RabbitMQ Course - The Practical Guide

🌟 Top Rated 80–90% OFF
Available in Udemy for Business

Functional Programming in Java (Includes Java Collections)

🎓 Student Favorite 80–90% OFF

ChatGPT for Java Developers: Boost Your Productivity with AI

🚀 Trending Now 80–90% OFF