Implementing Singleton in TypeScript

What is the Singleton design pattern?

Implementing the singleton design pattern ensure that there is only one instance of a class. It essentially controls of when and how that the single instance of the class is created and provides global access point to that single instance. It also restrict the developers from creating new instance of the class.

Advantage of using singleton design pattern ?

• To keep resource utilization under control that is some objects
  consumes too much time or resources to be created. So by making
  the class singleton restricts the option to have multiple objects of the same class.

• Memory overhead is reduced as the singleton pattern has only one instance in memory.

• To keep a single channel of communication with an outside resource open all the time.

Some well known examples of Singleton design pattern are logging, caching, and database connection.

Let's try to implement singleton design pattern in typescript

we need to make sure that:

• there is no option to create multiple instance of the class. To achieve this we can make our class constructor specifier as private. These way the ability to create new instance using new keyword will only be possible within the class.

• function and method can be called without the need to create instance of the object. These we can achieve by making method and function static. A static method don’t need an instance of the class to be used.

Let's dive into code

Here we have a TaskListTemplates class which helps to render the task list in the dom. And the constructor is private. So that if you try to instantiate this class using new keyword from outside, then TypeScript compiler will prompt the following error message:

Constructor of class 'TaskListTemplates' is private and only accessible within the class TaskListTemplates.ts(2673)

Now we can use the TaskListTemplates class as follow

import TaskListTemplates from './templates/TaskListTemplates';


let taskList: TaskListTemplates = TaskListTemplates .getInstance();
taskList.render();

By having TaskListTemplates class as singleton, we made sure that there only one task list instance manipulating the dom (instead of accidentally instantiating several at once, and having duplicate task list showing in the dom).

we can further verify its functionality

let taskListOne: TaskListTemplates = TaskListTemplates .getInstance();
let taskListTwo: TaskListTemplates = TaskListTemplates .getInstance();

console.log(taskListOne=== taskListTwo); // true

You can find the complete code sample here