Understanding TypeScript Generics

In a previous post I talked about how you can create explicit types on functions to have more control of inputs. As a quick recap, you can do this by adding a colon and specifying the type after an argument.

Well you can actually do this another way, with Generics. From the example above I’ll be replacing number[] with Array<number>. Whatever type I specify inside the less than (<) and greater than (>) signs will be the type that the TypeScript compiler will set for that argument.

You might be wondering “how is this useful?” and to that I’d say in this particular case, it isn’t. For more context on how Generics can be used, lets look at another example.

I’ve created a function named addDate that accepts an object and returns a new object with an added date property.

TypeScript allows us to console log the object on the second to last line and it will show us exactly what we’d expect, an object with the properties name, quantity and date. However the compiler throws an error when we try to access the name property of the object on the last line. Why is that?

Well we only told the compiler that we were passing in an object. It doesn’t know about the properties on that object. To give it access to those properties we need to use a Generic.

By adding <T> before the list of parameters and specifying that T would be the type that was being passed in for the variable order we got rid of the error. The TypeScript compiler now understands that the object we passed into the function had a name property.

Its important to note that <T> wasn’t chosen for any specific reason, you can use <Generic> if you wanted. You commonly find people using <T> so I’ve gone ahead and used that standard.

So back to the function at hand, our current implementation works perfectly so far but we’re only passing along objects. Lets say we forget about this code and want to use it 6 months from now and accidently pass in a number instead of an object. If our intention when writing this function was that it would only work with objects that had specific properties, would TypeScript send us an error?

Nope! I’ll just pass back a new object with just the date property.

If we want to avoid having this behavior we’ll have to be more specific than just <T>. We can do this a few ways:

extends object

We can tell the TypeScript compiler that <T> will be an object with extends object.

This lets any old object into the function which for this case we’ll say isn’t the intended functionality. Lets be more specific.

extends a specific object

We can also directly specify the object by writing it inline.

However if we were using this same object in multiple places it would be tedious and hard to manage if and when that object changes. So lets use an interface instead.

extends interface

Now out addDate function can only accept an Order type which was our intended behavior from the beginning.

Learn More

This blog post was intended as an introduction to Generics and honestly there’s a lot more. Check out these free resources to keep learning:

Official Generics Documentation