In-Depth Look at TypeScript Generics: Part 1 — Intro to Generics

In this two-part series, we will take an in-depth look at TypeScript generics. This first post will give you a basic understanding of generics and how it works. In the later post, we’ll cover advanced inference and conditional types.

So, without further ado, let’s get started!

Why do we need generics?

Using generics allows us to write a typesafe code that will work with a wide range of primitives and objects.

Without generics, we would have to create a new type for every possible combination of data that we want to work with. With generics, we can write our function or method once and then reuse it for different types of inputs.

That sounds great, but what does TypeScript generics look like in practice? Let’s take a look at the syntax.

Generic syntax

TypeScript uses angled bracket <> and a type symbol T to indicate generic syntax. In your client code, TypeScript will replace the type T with the type you pass. This will make more sense if we take a look at an example:

function identifyType <T>(target: T) {
  console.log("Type of target is", typeof target);
}
identifyType("LOL") // "Type of target is", "string"
identifyType({word: "LOL"}) // Type of target is", "object"

The function in the code above takes a parameter of generic type T. It then prints the parameter's type to the console using the typeof operator.

In the first call, we pass in a string, and in the second one, we pass in an object. Since it’s generic, this function will work with any data and will execute successfully in both instances.

Classes and interfaces can also use generics:

class Identifier<T> {
  seed: T;
  constructor(public newSeed: T) {
    this.seed = newSeed;
  }
identifyType<T>(target: T) {
    console.log("Type of target is", typeof target);
  }
}

Here we defined a generic class with a constructor and the identifyType method. The type of argument that the identifyType method accepts must match the newSeed argument supplied to the constructor.