This course has been updated! We now recommend you take the React and TypeScript, v2 course.
Transcript from the "Function Overloads" Lesson
[00:00:00]
>> We have one more kind of TypeScript thing that we need to jump into a little bit here. That will kind of one final pattern before we jump into some of the context stuff that we saw earlier. Now that we know a little bit more about generics and stuff along those lines.
[00:00:15] TypeScript has this feature called a function overload. And that's a really cool word. And what does it mean? It basically means that JavaScript, we think a lot about the idea that functions can take all sorts of different types of arguments, they return different things, a lot of that kind of dynamic typing.
[00:00:39] That is kinda built in the language gives us a bunch of interesting patterns, right. You can do stuff like partial application, currying. You can do things where it's, okay, if I give you a callback, use the callback. Otherwise return a promise like these are things that we've been doing.
[00:00:56] Famously, the best example I can come up with is a certain function that a lot of times we abbreviate it to just $1 sign, right. jQuery was, in a lot of cases, a single function that did all sorts of stuff. And TypeScript does still give you a little bit of an ability to make that happen using this thing called function overload.
[00:01:18] Which is basically a way to have multiple type declarations for the same function. And let's kind of we'll kind of look at it together. We can check out one example right here, where we've got an asynchronous add function, right. This could be an API call or something along those lines.
[00:01:39] I kept it small and simple so that we could talk about it fairly easily. And if you look kind of right here, we can kinda see this is the all cases, right. We have a number a number b, and maybe we have a callback right, add a and b, if there was a callback function call the callback, if not immediately return results promise, right.
[00:02:04] And so the type of this we can actually let's take this and let's pull it into the TypeScript playground actually. The type here I'll leave that for a second cuz you'll need it. If we just remove these two lines for a second, Is what we might expect, which is we've got a, what's the number, we've got b and maybe a functional callback, or undefined.
[00:02:33] The callback is optional or it could be undefined and either it'll be void or a promise. All right, and that'll technically work but when you're the function overloads and say, hey listen this thing has multiple different kinds of type signatures. And given the different combinations, this is what you can expect from this function.
[00:02:53] Again adding more clarity about the intention of your code in this case. So all we can do is have actually additional declarations for how this might work. And if you hover over we say a sync add over here. Okay, the past and one and two, we can tell that this is the version of it that takes a number and a b number.
[00:03:23] And returns a promise cuz that is one of the different signatures it has. The other one cuz it's add plus one overload is, the idea that it might take a callback at which point it returns void, right. Cuz the base one can return either one, but we just say, yeah.
[00:03:40] I understand it has all these different ways it can be used but the two that we support are if you give me a b, you're getting back a promise. Or if you give me a being a callback, you're getting back undefined, right. So we pass in something just a function in this case, we'll say takes the result.
[00:04:01] Now you can see that it's actually the version that takes ab in a callback and returns void. So it's basically having two different interfaces for the same function. Now, I will tell you a secret about me when I originally saw this, that's super cool. And that makes sense.
[00:04:18] And then the first time I went to go implement it a few years ago, it just didn't work, right. I couldn't ,as I, what's wrong? And I what I'll explain to you real quick Is effectively, the one thing to keep in mind, which is a fact these are the these are the two type interfaces that you're supporting.
[00:04:41] But effectively the actual implementation has to be ready for any of those. So a lot of times you might say, okay, I wanna have, I want it to work like this and you can see it already is blowing up and then have an additional type signature. The kinda bottom one has to effectively work in every case.
[00:05:02] So you know we have definitely an a definitely b definitely a callback. And then we've got definitely a definitely b definitely return a promise in this case. We have definitely a definitely b, and the optional function, right, which covers both cases. And then TypeScript didn't make you define a return type per say.
[00:05:24] But we know that we does that completeness checking that we're seeing before right, okay, in the case of function, there's both branches of whether or not fn exists. If it does exist, call it if it doesn't return the promise that basically covers all of the bases of the two overloads that we gave it, right.
[00:05:45] So you do need to make sure that the actual implementation appeases all of the, I was gonna say all the promises that you made, but it's overusing. It's overloading the term promise. But you have to make sure that this version cuz this is not actually the type signature.
[00:05:59] This is the implementation, it has to appease every overload that you give it, right. And so it's a way to have multiple interfaces. And you can think about the fact that we might have components. That might have multiple kind of prop interfaces for them. And that might be a thing that we interplant implement right after this.
[00:06:17] So we want to kind of just play around with it just on the TypeScript level first, cuz also like I kind of joked before, never promised too much to chat rooms yeah, I think that's fair. As we saw before, effectively react is a full fledged framework but it's also it's boiled down to, it's a bunch of functions that return react components now so a lot of this will kind of apply a little bit