How to create a stack in TypeScript using an array?

The stack is a data structure based on the LIFO, which means last in, first out. In brief, it says that whatever element you add at last in the stack comes out first from the stack.

There are some basic operations that users can perform on the stack. For example, we can push an element to the stack, pop an element from the stack, or peek an element from the stack.

Here, users can see the basic methods of the stack, which we will also implement while creating the stack in this tutorial.

Stack Methods

• Push() − It allows us to add an element to the stack.

• Pop() − It allows removing the last element from the stack.

• Peek() − It returns the top element from the stack without removing it.

• isEmpty() − It returns the boolean values based on whether the stack is empty.

• isFull() − It returns the true or false values based on whether the stack is full.

• Size() − The size() method returns the numeric value representing the size of the stack.

• printStack() − The printStack() method prints all stack values.

Implementing the stack class

Now, we will implement a stack using class and interface in TypeScript. Users can follow the steps below to create a stack.

Step 1 − Create an interface containing all the stack methods.

interface stackInterface<dataType> {
   push(dataItem: dataType): void;
   pop(): dataType | null | undefined;
   peek(): dataType | null;
   isEmpty(): boolean;
   isFull(): boolean;
   size(): number;
   printStack(): void;
}

In the above code, users can see that we have declared all stack methods in the stackInterface named interface with their parameter and return type. We will implement the above interface in the stack class.

Step 2 − Now, We need to create a StackClass and define all methods declared in the above interface. Also, create data and stackSize private members to store the stack elements and the maximum size of the stack, respectively.

Step 3 − After that, create a constructor to initialize the maximum size of the stack, as shown below.

constructor(size: number) {
   this.stackSize = size;
}

Step 4 − Now, we need to implement the push() method for the stack.

push(dataItem: dataType): void {
   if (this.data.length === this.stackSize) {
      // throw error
   }
   this.data.push(dataItem);
}

In the above code, we are checking whether the stack is full. If the stack is full, throw the error; Otherwise, push the element to the array using the Array.push() method.

Step 5 − Next, implement the pop() method for the stack.

pop(): dataType | null | undefined {
   return this.data.pop();
}

In the above code, we use the Array.pop() method to remove the element from the last index of the array.

Step 6 − Next, implement the peek() method in the StackClass.

peek(): dataType | null {
   return this.data[this.size() - 1];
}

In the above code, we are accessing the last element of the array and returning it.

Step 7 − Implement the isEmpty() method for the StackClass.

isEmpty(): boolean {
   return this.data.length <= 0;
}

We used the length method of the array to check whether the stack is empty.

Step 8 − Users can follow the syntax below to define isFull() method.

isFull(): boolean {
   let result = this.data.length >= this.stackSize;
   return result;
}

We compared the length of the array and the value of the stackSize property to check whether the stack is full.

Step 9 − Users can use the below code to implement the size() method for StackClass.

size(): number {
   return this.data.length;
}

The stack size is similar to the array size, and to get the array’s size, we can use the length property.

Step 10 − Next, define the printStack() method to print the elements of the stack.

printStack(): void {
    
   this.data.forEach((dataItem) => {
      // print dataItem
   });
}

In the above code, we iterate through the data array and print all array values.

Example

In the example below, we have created the StackClass, which implements the stackInterface. Also, users can see how we can create a stack with the custom data type.

The below example’s StackClass contains the implementation of all the above methods. After that, we created the object of StackClass and used the number as a data type. After that, we used the various methods of StackClass to perform the different operations on the stack.

interface stackInterface<dataType> {
   push(dataItem: dataType): void;
   pop(): dataType | null | undefined;
   peek(): dataType | null;
   isEmpty(): boolean;
   isFull(): boolean;
   size(): number;
   printStack(): void;
}

class StackClass<dataType> implements stackInterface<dataType> {
   private data: Array<dataType> = [];
   private stackSize: number = 0;

   constructor(size: number) {
      this.stackSize = size;
   }

   push(dataItem: dataType): void {
      if (this.data.length === this.stackSize) {
         throw Error(
            "You can't add more elements to stack as stack storage is full!"
         );
      }
      this.data.push(dataItem);
   }

   pop(): dataType | null | undefined {
      let element = this.data.pop();
      return element;
   }

   peek(): dataType | null {
      let element = this.data[this.size() - 1];
      return element;
   }
   isEmpty(): boolean {
      let result = this.data.length <= 0;
      return result;
   }
   isFull(): boolean {
      let result = this.data.length >= this.stackSize;
      return result;
   }
   size(): number {
      let len = this.data.length;
      return len;
   }
   printStack(): void {
      console.log("All stack values are printed below!");
      this.data.forEach((dataItem) => {
         console.log(dataItem);
      });
   }
}

const newstack = new StackClass<number>(5);
newstack.push(10);
newstack.push(12);
newstack.push(897);
newstack.push(54);
newstack.push(14);

console.log("The peek element of the stack is " + newstack.peek());
console.log("Is stack full? " + newstack.isFull());
console.log("The last removed element from the stack is " + newstack.pop());
console.log("The size of the stack is " + newstack.size());
console.log("Is stack empty? " + newstack.isEmpty());
newstack.printStack();

On compiling, it will generate the following JavaScript code −

var StackClass = /** @class */ (function () {
   function StackClass(size) {
      this.data = [];
      this.stackSize = 0;
      this.stackSize = size;
   }
   StackClass.prototype.push = function (dataItem) {
      if (this.data.length === this.stackSize) {
         throw Error("You can't add more elements to stack as stack storage is full!");
      }
      this.data.push(dataItem);
   };
   StackClass.prototype.pop = function () {
      var element = this.data.pop();
      return element;
   };
   StackClass.prototype.peek = function () {
      var element = this.data[this.size() - 1];
      return element;
   };
   StackClass.prototype.isEmpty = function () {
      var result = this.data.length <= 0;
      return result;
   };
   StackClass.prototype.isFull = function () {
      var result = this.data.length >= this.stackSize;
      return result;
   };
   StackClass.prototype.size = function () {
      var len = this.data.length;
      return len;
   };
   StackClass.prototype.printStack = function () {
      console.log("All stack values are printed below!");
      this.data.forEach(function (dataItem) {
         console.log(dataItem);
      });
   };
   return StackClass;
}());
var newstack = new StackClass(5);
newstack.push(10);
newstack.push(12);
newstack.push(897);
newstack.push(54);
newstack.push(14);
console.log("The peek element of the stack is " + newstack.peek());
console.log("Is stack full? " + newstack.isFull());
console.log("The last removed element from the stack is " + newstack.pop());
console.log("The size of the stack is " + newstack.size());
console.log("Is stack empty? " + newstack.isEmpty());
newstack.printStack();

Output

The above code will produce the following output −

The peek element of the stack is 14
Is stack full? true
The last removed element from the stack is 14
The size of the stack is 4
Is stack empty? false
All stack values are printed below!
10
12
897
54

In this tutorial, we learned to create a stack from scratch. We have implemented the various methods of the stack from scratch. Also, users can create a stack of any data type. Even users can create the stack of ‘any’ data type and add elements of multiple data types.