Implement a Stack with TypeScript
Published: 2020-07-12 06:04:00

##Hi Guys Good Day!

__TypeScript__ is still booming, take a look at this survey [StackOverflow](https://insights.stackoverflow.com/survey/2020#most-loved-dreaded-and-wanted). A lot of people are using it right now and will so for the next couple of years because of the rise of [Deno](https://deno.land/), 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](https://code.visualstudio.com/) as your code editor because it has great support for __TypeScript__ out of the box.


First, install [Nodejs](https://nodejs.org/en/).

After installing Nodejs install TypeScript and Nodemon using this command.
```cmd
 npm i -g typescript nodemon
```

Then, make a folder called __typescript_practice__
```cmd
  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_
```ts
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.
```ts
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 <code>?</code> operator. Also, we're using a __Generic__ here <code>\<T></code> to make this class reusable and can work with multiple types. The <code>T</code> holds the type information, not the value but the __type__ of that value we're gonna use in this class. 

```ts
 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 <code>number</code> then all of those <code>T</code> above in the interface and class will hold a value of <code>number</code>. What I mean about value here is the __type__. and lastly in our __interface__ if you're wondering what does this <code>|</code> mean in the <code>T | null</code>.It means a __Union Type__,so the property _value_ can either have a type of <code>T</code> or it can have a type of <code>null</code>.

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.

```ts
class Stack<T = string>
```

```ts
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 <code>string</code>, 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 <code>this.top</code> property can have two types a <code>null</code> or a <code>StackNode</code> but inside the condition we know that the stack is not empty and the top has still value, so <code>this.top</code> is not <code>null</code>. This is why we use the <code>as</code> operator to tell the TypeScript compiler that the type of <code>this.top</code> is a
<code>StackNode</code>. If you remove this part <code>as StackNode\<T></code> some of you will get this error __Object is possibly 'null'__.

Add this code below.
```ts
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 <code>console.log</code>'s
```cmd
nodemon main.ts
```
You can also add the <code>peek</code> and <code>isEmpty</code> methods in our stack.

##Thanks guys for reading this post.
##Have a Nice Day and Stay Safe :smiley:!.