TypeScript Generic Interfaces

Summary: in this tutorial, you will learn how to develop TypeScript generic interfaces to create an interface that can work with different types while maintaining type safety.

Introduction to TypeScript generic interfaces

Like classes, interfaces can also be generic. A generic interface allows you to create an interface that can work with different types while maintaining type safety.

A generic interface has a generic type parameter list in angle brackets <> following the name of the interface:

interface interfaceName<T> {
    // ...
}Code language: TypeScript (typescript)

This makes the type parameter T visible to all members of the interface.

The type parameter list can have one or multiple types. For example:

interface interfaceName<U,V> {
    // ...
}
Code language: TypeScript (typescript)

TypeScript generic interface examples

Let’s take some examples of declaring generic interfaces.

1) Generic interfaces that describe object properties

The following shows how to declare a generic interface that consists of two members key and value with the corresponding types K and V:

interface Pair<K, V> {
    key: K;
    value: V;
}
Code language: TypeScript (typescript)

Now, you can use the Pair interface to define any key/value pair with any type. For example:

let month: Pair<string, number> = {
    key: 'Jan',
    value: 1
};

console.log(month);Code language: TypeScript (typescript)

In this example, we declare a month key-value pair whose key is a string and the value is a number.

2) Generic interfaces that describe methods

The following declares a generic interface with two methods add() and remove():

interface Collection<T> {
    add(o: T): void;
    remove(o: T): void;
}
Code language: TypeScript (typescript)

And this List<T> generic class implements the Collection<T> generic interface:

class List<T> implements Collection<T>{
    private items: T[] = [];

    add(o: T): void {
        this.items.push(o);
    }
    remove(o: T): void {
        let index = this.items.indexOf(o);
        if (index > -1) {
            this.items.splice(index, 1);
        }
    }
}
Code language: TypeScript (typescript)

From the List<T> class, you can create a list of values of various types e.g., numbers, or strings.

For example, the following shows how to use the List<T> generic class to create a list of numbers:

let list = new List<number>();

for (let i = 0; i < 10; i++) {
    list.add(i);
}
Code language: TypeScript (typescript)

3) Generic interfaces that describe index types

The following declares an interface that describes an index type:

interface Options<T> {
    [name: string]: T
}

let inputOptions: Options<boolean> = {
    'disabled': false,
    'visible': true
};
Code language: TypeScript (typescript)

In this tutorial, you have learned about the TypeScript generic interfaces.