menu

JavaScript/Typescript - 16 Topics

DEEP DIVE INTO

JavaScript/Typescript

Topic:singleton pattern

menu

The Singleton Pattern is a creational design pattern that restricts the instantiation of a class to a single instance and provides a global point of access to that instance.

This pattern is useful when you want to ensure that there is only one instance of a class, regardless of how many times you request an instance. In TypeScript, you can implement the Singleton Pattern in several ways.

Here's a deep dive into how to implement the Singleton Pattern in TypeScript:

Classic Singleton Pattern:

In the Classic Singleton Pattern, you create a class with a private constructor and a static method to retrieve the single instance. TypeScript helps you enforce the access control.

javascriptclass Singleton {
  private static instance: Singleton | null = null;

  private constructor() {
    // Private constructor to prevent external instantiation.
  }

  static getInstance(): Singleton {
    if (!this.instance) {
      this.instance = new Singleton();
    }
    return this.instance;
  }

  someMethod() {
    // Add methods and properties here
  }
}

// Usage
const instance1 = Singleton.getInstance();
const instance2 = Singleton.getInstance();

console.log(instance1 === instance2); // Output: true, they are the same instance

In this Classic Singleton implementation:

  • The instance property holds the single instance of the class, and it starts as null.

  • The private constructor ensures that instances cannot be created externally.

  • The getInstance method is used to access the single instance. It creates the instance if it doesn't exist and returns the existing instance otherwise.

Module-based Singleton Pattern:

In TypeScript, you can implement a Singleton by using modules and exporting a single instance of a class. This approach is simpler and doesn't involve the complexities of the classic Singleton pattern:

javascriptclass Singleton {
  someProperty: string;

  private constructor() {
    this.someProperty = "Singleton instance initialized.";
  }

  static getInstance(): Singleton {
    return SingletonInstance.instance;
  }
}

const SingletonInstance = new Singleton();

export default SingletonInstance;

In this module-based Singleton implementation:

  • The Singleton class has a private constructor to prevent external instantiation.

  • An instance of Singleton named SingletonInstance is created and exported from the module.

  • To access the Singleton, you simply import it into other parts of your application.

javascriptimport SingletonInstance from './Singleton';

console.log(SingletonInstance.someProperty); // Output: "Singleton instance initialized."

This module-based Singleton is a straightforward way to ensure a single instance of a class in your TypeScript application.

When implementing the Singleton Pattern, remember to use it judiciously. Overusing it can lead to tight coupling between components and make the code harder to test and maintain. The Singleton Pattern is most beneficial when you genuinely need a single point of control for shared resources or state.

1280 x 720 px