Subscribe

TypeScript generic types

✍️

What are generic types in TypeScript and how to use them

26 Feb, 2022 · 3 min read

When working with types in TypeScript, we assume we know what type we will be working with.

For instance, to define this log function:

const logAndReturn = (input: string): string => {
  console.log(input);
  return input;
};

In this simple function, we expect a string, return a string, and that's it. But why should this be limited to just strings? What if we try to pass a number?

Number type error

Hmm, that's a bit silly. We can't pass numbers to this function. And it makes total sense.

One possible way of solving this would be to use any as the type.

const logAndReturn = (input: any): any => {
  console.log(input);
  return input;
};

But using this makes it impossible to identify the type from the outside. It's basically as if you didn't use TypeScript at this point.

By the use of outside, I mean wherever we call this function, you should see what type it is being cast to like so:

TypeScript any type

So what, then?

TypeScript generic type

This is precisely where generic types come in handy. They can be used to identify that specific called function as a type.

Making the function itself unaware of which type it's working with.

To identify a generic type, you must prefix the function with <Type> where Type is the generic variable.

Note: We often use T for generic types. However, it's not limited to any name.

Let's redo the above function as a generic typed function.

const logAndReturn = <T>(input: T): T => {
  console.log(input);
  return input;
};

Now, if we want to use this function and pass a string, we can do the following:

logAndReturn < string > 'a string';

And on inspection, it states the following:

Generic string type

And if we want to convert this to our number, we can change the generic type used.

logAndReturn < number > 123;

Generic type number cast

As you can see, this is super powerful as we don't need to know the type upfront but keep the reference to the correct types.

This method is not limited to these existing types. We can even define a custom interface that we want to use.

interface User {
  firstname: string;
  lastname: string;
}

logAndReturn < User > { firstname: 'Chris', lastname: 'Bongers' };

And in that case, our function will expect the User type.

Conclusion

I hope you got an excellent first look at Generic types and how we can use them. In the following articles, I'll go deeper into specific use-cases that will shed a broader light on them.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next 📖

The Record Utility Type in TypeScript

12 Mar, 2022 · 3 min read

The Record Utility Type in TypeScript

TypeScript Union type a deeper look

11 Mar, 2022 · 3 min read

TypeScript Union type a deeper look

Join 1828 devs and subscribe to my newsletter