The Weird Parts of TypeScript 13 exercises
solution

Understanding TypeScript's Function Parameter Comparisons

You might be tempted to define the CallbackType as a function that either takes an Event by itself or along with x and y coordinates or screenId:


type CallbackType =
| ((event: Event) => void)
| ((event: Event, x: number, y: number) => void);
| ((event: Event, x: number, y:

Loading solution

Transcript

00:00 Okay, you might be tempted into doing something like this where we say the callback type is actually a function that either has an event in it So let's say the event is of type event Or let's say we wrap this in a parentheses and we say there's another one here that takes in

00:16 Event and then which is an event and then X which is number and Y which is number here beautiful Then you're kind of looking at this and you think okay, this seems to work for the second one here But why isn't this working for the first one parameter event implicitly has an any type?

00:33 Okay, that seems really weird. And as we'll notice we can add a third one here and have the screen ID to it Let's just do that quickly screen ID number and then that means that this one isn't working either It turns out because of the way that typescript works is we can actually delete two of the members of this union

00:53 We can actually delete these two and it now just works so I can remove this and this should now just work perfectly Why would this work though? Because we've got our callback type up here Which really it like it means that we can call it in all these different ways or reference it in all these different ways How could that possibly work?

01:12 Well, if you think about it, then when we call this callback, we're gonna have to pass it a few things We're gonna have to pass it click We're gonna have to pass it an X and then a Y and then a screen ID, which we'll say is one So when we call it, we have to call it in this way

01:27 But when we implement the function the function doesn't actually have to pay attention to all of the things that it's been passed It can literally pay attention to none of these or it can pay attention to only the event or it can pay attention to event X and Y or it can pay attention to all four

01:44 It obviously can't pay attention to a one that doesn't exist in here because this isn't assignable target signature provides too few Arguments expected five or more but got four. Okay, so slightly confusing error, but sure so when you think about Like function parameter comparisons in typescript

02:03 Then this is really important to remember just because a function expects to be called with all of these different things Doesn't mean that the function actually has to implement those things Another really good example is if we say let's say we just say map like this and let's say we've got Three numbers in here. So one two, three map

02:22 We've got a number here and usually the way you handle this as you can just say console dot log num like this But if we think about this a bit more deeply the map function actually like can take in three Arguments can take in the value the index and the entire array

02:39 But the function we pass to that mapping doesn't have to implement even any of those it can just literally just have an empty Number of parameters if we wanted to so just because an array or sorry just because a function

02:53 Can receive those parameters doesn't mean that function has to receive those parameters or has to handle those parameters Really interesting weird little bits of typescript where if you think about how JavaScript works makes total sense