Compare function overloads and generics

A simple function - returnWhatIPassIn - can be enough to stump many newbie TypeScript devs.

Here, I compare two approaches - function overloads and generics - to see which one works best.

Discuss on Twitter

Transcript

Here, I've got a function called returnWhatIPassIn. It takes an input of unknown and returns an input of unknown. Whatever I pass in here, it's going to return unknown. I'm not really fulfilling the promise of this function's name. I can fulfill it by using a function overload, if I want to, for each member of the thing that I want to do.

I can do export function and have this be a string. Suddenly, I can pass in strings now, which is good, and that will return me a string. I can also add another overload here, which will be a number, for instance. If I add in 12 here, then it will return me a number. Great.

The issue here is that I'm going to have to add an overload for everything I can possibly imagine using this function for, which is a little bit tricky. If you have a set number of things that you want to pass in and return, then that might be useful. The real way to do this is with a generic. I can add just T in here, or let's say TInput.

TInput is going to be...I'm just going to replace all the pieces with this and I'm just returning the input. Now, whatever I pass in, I'm going to get returned to in here. I can pass in an object. I can say blah, blah, blah, blah, blah, blah, blah, and that's all going to be returned to me like this. This is a good way of thinking about the difference between function overloads and generics.

More Tips