TypeScript Generic Classes

Summary: in this tutorial, you will learn how to develop TypeScript generic classes.

Introduction to TypeScript generic classes

A generic class has a generic type parameter list in angle brackets <> that follows the name of the class:

class className<T>{
    //... 
}Code language: TypeScript (typescript)

TypeScript allows you to have multiple generic types in the type parameter list. For example:

class className<K,T>{
    //...
}
Code language: TypeScript (typescript)

The generic constraints are also applied to the generic types in the class:

class className<T extends TypeA>{
    //...
}
Code language: TypeScript (typescript)

Placing the type parameter on the class allows you to develop methods and properties that work with the same type.

TypeScript generic classes example

In this example, we will develop a generic Stack class.

A stack is a data structure that works on the last-in-first-out (or LIFO) principle. It means that the first element you place into the stack is the last element you can get from the stack.

Typically, a stack has a size. By default, it is empty. The stack has two main operations:

• Push: push an element into the stack.
• Pop: pop an element from the stack.

The following shows a complete generic Stack class called Stack<T>:

class Stack<T> {
    private elements: T[] = [];

    constructor(private size: number) {
    }
    isEmpty(): boolean {
        return this.elements.length === 0;
    }
    isFull(): boolean {
        return this.elements.length === this.size;
    }
    push(element: T): void {
        if (this.elements.length === this.size) {
            throw new Error('The stack is overflow!');
        }
        this.elements.push(element);

    }
    pop(): T {
        if (this.elements.length == 0) {
            throw new Error('The stack is empty!');
        }
        return this.elements.pop();
    }
}
Code language: TypeScript (typescript)

The following creates a new stack of numbers:

let numbers = new Stack<number>(5);Code language: TypeScript (typescript)

This function returns a random number between two numbers, low and high:

function randBetween(low: number, high: number): number {
    return Math.floor(Math.random() * (high - low + 1) + low);
}
Code language: TypeScript (typescript)

Now, you can use the randBetween() function to generate random numbers for pushing into the numbers stack:

let numbers = new Stack<number>(5);

while (!numbers.isFull()) {
    let n = randBetween(1, 10);
    console.log(`Push ${n} into the stack.`)
    numbers.push(n);
}Code language: TypeScript (typescript)

Output:

Push 3 into the stack.
Push 2 into the stack. 
Push 1 into the stack. 
Push 8 into the stack. 
Push 9 into the stack. Code language: TypeScript (typescript)

The following shows how to pop elements from the stack until it is empty:

while (!numbers.isEmpty()) {
    let n = numbers.pop();
    console.log(`Pop ${n} from the stack.`);
}Code language: TypeScript (typescript)

Output:

Pop 9 from the stack.
Pop 8 from the stack.
Pop 1 from the stack.
Pop 2 from the stack.
Pop 3 from the stack.
Code language: TypeScript (typescript)

Similarly, you can create a stack of strings. For example:

let words = 'The quick brown fox jumps over the lazy dog'.split(' ');

let wordStack = new Stack<string>(words.length);

// push words into the stack
words.forEach(word => wordStack.push(word));

// pop words from the stack
while (!wordStack.isEmpty()) {
    console.log(wordStack.pop());
}
Code language: TypeScript (typescript)

How it works:

• First, split the sentences into words.
• Second, create a stack whose size is equal to the number of words in the words array.
• Third, push elements of the words array into the stack.
• Finally, pop words from the stack until it is empty.

In this tutorial, you have learned how to develop generic classes in TypeScript.