menu

JavaScript/Typescript - 16 Topics

DEEP DIVE INTO

JavaScript/Typescript

Topic:factory pattern

menu

The Factory Pattern is a creational design pattern that provides an interface for creating objects but allows subclasses to alter the type of objects that will be created.

It abstracts the process of object creation and helps decouple the client code from the specific classes it needs to instantiate. In TypeScript, the Factory Pattern is especially useful for creating objects in a type-safe manner.

Here's a deep dive into the Factory Pattern in TypeScript:

Classic Factory Pattern:

The Classic Factory Pattern uses a factory class or method to create objects. It defines an interface for object creation and lets subclasses decide which class to instantiate.

javascript// Abstract Product
interface Product {
  operation(): string;
}

// Concrete Products
class ConcreteProductA implements Product {
  operation(): string {
    return 'Product A';
  }
}

class ConcreteProductB implements Product {
  operation(): string {
    return 'Product B';
  }
}

// Factory Interface
interface Factory {
  createProduct(): Product;
}

// Concrete Factories
class ConcreteFactoryA implements Factory {
  createProduct(): Product {
    return new ConcreteProductA();
  }
}

class ConcreteFactoryB implements Factory {
  createProduct(): Product {
    return new ConcreteProductB();
  }
}

// Client Code
function clientCode(factory: Factory) {
  const product = factory.createProduct();
  console.log(product.operation());
}

const factoryA = new ConcreteFactoryA();
clientCode(factoryA); // Output: "Product A"

const factoryB = new ConcreteFactoryB();
clientCode(factoryB); // Output: "Product B"

In this Classic Factory Pattern:

  • Product is an interface that defines the common interface for all products.

  • ConcreteProductA and ConcreteProductB are concrete implementations of Product.

  • Factory is an interface that declares a factory method for creating Product objects.

  • ConcreteFactoryA and ConcreteFactoryB are concrete implementations of Factory that create different Product objects.

  • The clientCode function uses a factory to create and work with Product objects.

Factory Method Pattern:

In the Factory Method Pattern, you define an abstract method for creating objects, which is implemented by concrete subclasses. This pattern promotes open-closed design principles.

javascript// Abstract Creator
abstract class Creator {
  abstract factoryMethod(): Product;

  someOperation(): string {
    const product = this.factoryMethod();
    return `Creator works with ${product.operation()}`;
  }
}

// Concrete Creators
class ConcreteCreatorA extends Creator {
  factoryMethod(): Product {
    return new ConcreteProductA();
  }
}

class ConcreteCreatorB extends Creator {
  factoryMethod(): Product {
    return new ConcreteProductB();
  }
}

// Client Code
function clientCode(creator: Creator) {
  console.log(creator.someOperation());
}

const creatorA = new ConcreteCreatorA();
clientCode(creatorA); // Output: "Creator works with Product A"

const creatorB = new ConcreteCreatorB();
clientCode(creatorB); // Output: "Creator works with Product B"

In this Factory Method Pattern:

  • Creator is an abstract class that defines the factory method for creating products.

  • ConcreteCreatorA and ConcreteCreatorB are concrete subclasses of Creator that implement the factory method.

  • The clientCode function works with creators, who create and operate on products without knowing their specific types.

The Factory Pattern in TypeScript provides a structured approach to object creation. It makes it easy to extend and add new products or creators without modifying the client code. This pattern promotes encapsulation, loose coupling, and maintainability, making it valuable in various software design scenarios.

1280 x 720 px