Typescript Generics Explained

Learn what generics are and how they are used in Typescript

Generics: the ability to abstract types

The implementation of generics in Typescript give us the ability to pass in a range of types to a component, adding an extra layer of abstraction and re-usability to your code. Generics can be applied to functions, interfaces and classes in Typescript.

This talk will explain what generics are and how they can be used for these items, visiting a range of viable use cases along the way to further abstract your code.

The Hello World of Generics

To demonstrate the idea behind generics in simple terms, consider the following function, identity(), that simply takes one argument and returns it:

function identity(arg: number): number {
    return arg;
}

Our identity function’s purpose is to simply return the argument we pass in. The problem here is that we are assigning the number type to both the argument and return type, rendering the function only usable for this primitive type — the function is not very expandable, or generic, as we would like it to be.

We could indeed swap number to any, but in the process we are losing the ability to define which type should be returned, and dumbing down the compiler in the process.

What we really need is identity() to work for any specific type, and using generics can fix this. Below is the same function, this time with a type variable included:

function identity<T>(arg: T): T {
    return arg;
}

After the name of the function we have included a type variable, T, in angled brackets <>.T is now a placeholder for the type we wish to pass into identity, and is assigned to arg in place of its type: instead of number, T is now acting as the type.

Note: Type variables are also referred to as type parameters and generic parameters. This article opts to use the term type variables, coinciding with the official Typescript documentation.

T stands for Type, and is commonly used as the first type variable name when defining generics. But in reality T can be replaced…