Implement a Stack with TypeScript
Mark Abeto
Posted on July 12, 2020
Hi Guys Good Day!
TypeScript is still booming, take a look at this survey StackOverflow. A lot of people are using it right now and will so for the next couple of years because of the rise of Deno, a secure runtime for JavaScript and TypeScript.
But, first let's make a Stack with TypeScript. Stack is a LIFO (Last In First Out) data structure. Our stack will have two methods push and pop. When we use the push method
that item will be a new item at the top of the stack and when we use the pop method that newly push item in the stack will be removed. We could easily make a Stack with TypeScript by using arrays but we're not gonna do that. I highly recommend using VSCode as your code editor because it has great support for TypeScript out of the box.
First, install Nodejs.
After installing Nodejs install TypeScript and Nodemon using this command.
npm i -g typescript nodemon
Then, make a folder called typescript_practice
mkdir typescript_practice && cd typescript_practice
After that, in our main.js inside the typescript_practice folder. I'm gonna explain this code later.
main.js
interface StackNode<T> {
value: T | null
next: StackNode<T> | null
}
class StackNode<T> implements StackNode<T> {
constructor(val: T) {
this.value = val
this.next = null
}
}
interface Stack<T> {
size: number
top: StackNode<T> | null
bottom: StackNode<T> | null
push(val: T): number
pop(): StackNode<T> | null
}
class Stack<T = string> implements Stack<T> {
constructor() {
this.size = 0
this.top = null
this.bottom = null
}
push(val: T) {
const node = new StackNode(val)
if (this.size === 0) {
this.top = node
this.bottom = node
} else {
const currentTop = this.top
this.top = node
this.top.next = currentTop
}
this.size += 1
return this.size
}
pop(): StackNode<T> | null {
if (this.size > 0) {
const nodeToBeRemove = this.top as StackNode<T>
this.top = nodeToBeRemove.next
this.size -= 1
nodeToBeRemove.next = null
return nodeToBeRemove
}
return null
}
}
So, I'm gonna explain this part first and I believe you will understand most of our code eventually.
interface StackNode<T> {
value: T | null
next: StackNode<T> | null
}
class StackNode<T> implements StackNode<T> {
constructor(val: T) {
this.value = val;
this.next = null;
}
}
In this part, obviously we're making an interface and a class. The class implements the interface so our class StackNode must have these two properties value and next. Basically an interface is a contract between the class and the interface saying that our class should have the shape of our interface unless if you make a property optional in the interface using the ?
operator. Also, we're using a Generic here <T>
to make this class reusable and can work with multiple types. The T
holds the type information, not the value but the type of that value we're gonna use in this class.
const node = new StackNode(1)
For example, in the code above, we're passing a value of 1 when creating an instance of the class. Since 1 is type of number
then all of those T
above in the interface and class will hold a value of number
. What I mean about value here is the type. and lastly in our interface if you're wondering what does this |
mean in the T | null
.It means a Union Type,so the property value can either have a type of T
or it can have a type of null
.
Ok, I believe you understand most of our code now, so I'm not gonna explain the class Stack and interface implementation, but I'm gonna explain these two parts.
class Stack<T = string>
const nodeToBeRemove = this.top as StackNode<T>
In the first part, what we are doing is that we're giving a default value for the Generic type and that value is string
, We can give a default value for a Generic as long it is valid.
In the second part, what we are doing is Type Assertion. Basically, what Type Assertion is that we're telling the TypeScript compiler that we know the type of this value and we set that value's type to that type. In this example, the this.top
property can have two types a null
or a StackNode
but inside the condition we know that the stack is not empty and the top has still value, so this.top
is not null
. This is why we use the as
operator to tell the TypeScript compiler that the type of this.top
is a
StackNode
. If you remove this part as StackNode<T>
some of you will get this error Object is possibly 'null'.
Add this code below.
const stack = new Stack<string>()
stack.push("a")
stack.push("b")
stack.push("c")
const popData = stack.pop()
console.log(popData)
console.log(stack)
Then, run this command to see the output of the console.log
's
nodemon main.ts
You can also add the peek
and isEmpty
methods in our stack.
Thanks guys for reading this post.
Have a Nice Day and Stay Safe 😃!.
Posted on July 12, 2020
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
November 29, 2024