DEV Community

Cover image for TypeScript generic types
Chris Bongers
Chris Bongers

Posted on • Originally published at daily-dev-tips.com

 

TypeScript generic types

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

For instance to define this log function:

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

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;
};
Enter fullscreen mode Exit fullscreen mode

But using this makes it impossible to identify the type from 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;
};
Enter fullscreen mode Exit fullscreen mode

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

logAndReturn<string>('a string');
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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'});
Enter fullscreen mode Exit fullscreen mode

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.
I'll go deeper into specific use-cases that will shed a broader light on them in the following articles.

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

Top comments (14)

Collapse
 
lexlohr profile image
Alex Lohr

One interesting feature missing in that description is that you can limit what types a generic type can be using extends; multiple types can be expressed via union.

Collapse
 
dailydevtips1 profile image
Chris Bongers

Definitely a big pro, I think in tomorrow's article I actually use multiple types πŸ™Œ.
Generics in general are such a blessing and great way to control types.

Collapse
 
leob profile image
leob

Java devs will find this feature very familiar :)

Collapse
 
jwp profile image
John Peters

In C# the type passed in may be inferred. It that true here?

Collapse
 
dailydevtips1 profile image
Chris Bongers

Generics can be inferred indeed.
If you define them like this for instance, in which case you can pass the inferred type you want.

But in general it will default to the T anyhow. this could just prove to be a security fallback.

type InferredType = <T>(t: T) => void
Enter fullscreen mode Exit fullscreen mode
Collapse
 
naztech01 profile image
Nazmul Hossain

This is help me to understand

Collapse
 
dailydevtips1 profile image
Chris Bongers

Glad it helped Nazmul πŸ’–

Collapse
 
sachinchaurasiya profile image
Sachin Chaurasiya

Indeed , Typescript generics are life saving.

Collapse
 
alimobasheri profile image
MirAli Mobasheri

This post was really helpful πŸ‘

Collapse
 
dailydevtips1 profile image
Chris Bongers

Thanks MirAli!

Collapse
 
maupanelo profile image
Mauricio Panelo

Oh nice! I'm just learning Typescript and I had no idea of generics. I would have defaulted to using "any".

Thanks for the tip!

Collapse
 
dailydevtips1 profile image
Chris Bongers

Glad it helped!
Generics are so powerful and indeed a valid replacement of any in most cases (when used correctly).

They have way more power than described here, so they can solve a lot of issues 🀯

Collapse
 
dailydevtips1 profile image
Chris Bongers

Awesome!
They definitely take some getting used to, and practive.