Creating a Task Queue with TypeScript
Tags: JavaScript, Web Development, Front End Development, Typescript, Frontend

I have always wanted to write a super basic task queue. I didn’t have any specific language that I wanted to implement it in so I just decided to go with TypeScript.

Before we carry on I would just like to say that the code that follows is untidy and it does not always use types. For example the variable that holds all the queue items should have a type but it is just a normal JS object.

Ok lets get into the code.

Queue

I am going to start off with the Queue class. It is extremely basic. It has one property and two methods.

The property holds all the tasks or “queueItems” as I have called it. This is just a simple blank JavaScript object.

The next part of the code is the “addQueueItemForTopic” function. All this does is it takes a queueItem of type IQueueItem(we will get to this later) and a topic. A topic is just a string which will be a key in the “queueItems” property. The queueItem parameter will be the task that needs to be run.

The next function is the “processItemsForQueueTopic”. This basically does what it says. It just runs the code for each task or “queueItem” that the queue currently has.

class Queue

{

queueItems = {};



addQueueItemForTopic(queueItem: IQueueItem, topic: string)

{

if (this.queueItems[topic] === undefined)

{

this.queueItems[topic] = [queueItem];

}

else

{

this.queueItems[topic].push(queueItem);

}

}



processItemsForQueueTopic(topic: string)

{

for (let item of queue.queueItems[topic])

{

item.main();

}



this.queueItems[topic] = [];

let numberOfItemsLeft = this.queueItems[topic].length;



if (numberOfItemsLeft > 0)

{

console.log("Number of items left in Queue for topic" + topic, this.queueItems[topic].length);

}

else

{

console.log("No more tasks for topic " + topic);

}

}

}



let queue = new Queue();

QueueItem

Now we get onto the “IQueueItem” interface.

// Interface that an item added to the queue needs to conform to

interface IQueueItem

{

main<T>(something?:T);

}

This is what allows the “processItemsForQueueTopic” function to be able to run. Every item that gets added to the queue needs to conform to this protocol. This interface has a method called “main”. When you create an object that conforms to this interface all the processing that you want to happen will happen in this “main” function.

When the “processItemsForQueueTopic” function gets called it will loop through every item in the queue for the topic that you have specified and call the “main” function on the “queueItem” or task.

Creating the tasks

Creating the tasks are super simple. It just needs to conform to the IQueueItem interface.

let task1: IQueueItem = {

main: function<T>(something?:T)

{

let calculation = 1 + 1;

console.log(calculation);

}

}

The reason the task needs to conform to the IQueueItem interface is because it needs to have the main function that you see above.

That function will hold all the logic that you need for processing whatever you need to be processing.

Then when you tell the queue to process the items for a specific topic. It will run through all the items for that topic and then just call that main function on each task which will do all the processing that you wanted it to do.

Example of another task but with “email” as the topic:

let task2: IQueueItem = {

main: function<T>(something?:T)

{

let email = "test@email.com";

console.log("Send mail to:", email);

}

}

Adding to the queue

Now all that is needed is to add this to the queue like so:

queue.addQueueItemForTopic(task1, "calculation");

queue.addQueueItemForTopic(task2, "email");

That is pretty all that one needs to do to add it to the queue. After that we will just tell the queue to process or call the main function.

Processing the tasks in the queue

queue.processItemsForQueueTopic("calculation");

queue.processItemsForQueueTopic("email");

When we want to process all the tasks for each topic we just call the processItemsForQueue function with the topic that we want it to run for and it is done.

That will run all the tasks that we have added to the queue.

Please note that this is an extremely basic version of a queue. There can be many other features added to make it much better and actually useable.

Let me know if there is something that I can improve with this code in the comments!