Brief Intro to TypeScript Generics

A lot of developers struggle to understand how to read generics and what problem they solve. Let’s dive in.

The use of generics is common in many other programming languages, but they’re still rather new to the TypeScript/JavaScript world. Adding generics to your repertoire will help you be a much more rounded developer and create more robust and type-safe code. In other words, it will help you get away from the crutch of throwing any all over the place!

Generics are one of the various ways to implement “polymorphism,” but don’t freak out over the scary-sounding word. It just means one thing can take various different forms.

One of the most common ways that we see generics in modern TypeScript is in association with a Promise. We might see an async function that returns the type as Promise<string>. This means the promise (once resolved) will give us a string. So we can await that promise and the resulting variable will be a string, for example…

Let’s say we have a function called getStatus that looks like this:

const getStatus = async (): Promise<string> => "foobar";

So then we call that function, and (once we await the promise) we know we will get back a string.

const myString: string = await getStatus();

Okay, great but how else is this actually useful outside of a promise? Glad you asked! Let’s say you want to store a value, but you want to create a wrapper class for it so that you can keep track of what the value represents.

That’s great, but what if some of those values are not strings? We could set the type of valueto any, but you know every time you use any Microsoft kills a kitten, right?? So what is a modern TS developer to do then? Generics!!!

The T above just represents some unknown type. Most often we see this represented with a “T”, but it can be set to anything (even full words). It’s just a variable with a specific role of holding a type instead of a value.

Now we can re-use our WrapedValue class, but specify the type of value that it holds within it. Then when we later need to access data[2].value your IDE will know that it is a number.

This is a very simple example, but I hope that it gives you some context. Learning to master generics will mean less anys and much better type-hinting in your code, which ultimately will make your life easier and prevent a whole lot of bugs.