This course has been updated! We now recommend you take the TypeScript Fundamentals, v3 course.
Transcript from the "Functions: Parameters" Lesson
[00:00:00]
>> Mike North: More on Functions. Unlike in JavaScript, where there's a lot of flexibility around arguments, TypeScript by default requires that you pass a value for every argument. So in this situation, where we're gonna create a Twitter post saying, I ate a ham sandwich today. And we're gonna post it with like this particular username.
[00:00:20] But we failed to provide that third argument, an image url. We will say, I expected three arguments, we got two, full stop, and I cannot validate this. I'm not signing off on it. So we could fix this by making imageurl, what is called an optional parameter. That's what an optional parameter looks like.
[00:00:42] The question is there, any time you have this, what you will see is that the type of this value is not going to just be URL. Let me actually paste it into some code here for you to see.
>> Mike North: Where are you, slides?
>> Mike North: And this is complaining because I'm in a JavaScript file.
[00:01:21]
>> Mike North: So note that the type of this, is a url or undefined. This is really cool because imagine if we had something up here that was like. We had a tag like that and we said, okay, critical url, equals imageurl. It's gonna say hold up, like when you defined this you did not indicate that it was acceptable for undefined to be set here, like it's undefined currently.
[00:01:57] But if you're performing an assignment operation, it basically says whenever you have this optional here, you must kind of percolate that potential for it to be set to an undefined value wherever, like you have to percolate that through all assignments. You would have no safety like this in JavaScript, it was just carry on and if it's not parsed, it will be really easy for this code to slip through.
[00:02:25] If you had a lot of complexity, a lot of conditionals in here, so here it's basically saying right, either up here you have to say,
>> Mike North: I'm okay with this being undefined, this by the way is called a union type, think of it as the or operator. You know how we can do like,
[00:02:48]
>> Mike North: Something like that, ujst think of it, it is a bit wise or but in types. Just think of it as the union type, it's any of these things, right. Could do like that, any of those three. But we either have to do that or down here we'd have to say,
[00:03:21]
>> Mike North: Something like this.
>> Mike North: And why is it complaining now?
>> Mike North: It wants a string,
>> Mike North: Sorry, that's not JavaScript
>> Mike North: That's what I was trying to do. So here, now it forces that decision, it forces us to have that extra layer of robustness. It's basically saying, look, you either have to make a decision.
[00:03:54] Tolerate the potential for this to be undefined, or handle it, and I will go along with that URL being a critical URL. And it can never be undefined, and you can't assign it. To any other type, where you could possibly not pass something in, so this insulates you, combined with the fact that like, without that maybe this would have been required.
[00:04:15] Now, we can be sure that like, our functions would be called with the right number of arguments. And in the event that we say things are optional, that potential for things to not have a defined value. That's something we have to deal with and sort of go all the way back through code that might depend on it, and eventually let things shake out.
[00:04:36] Really, really, really powerful idea. Okay, that was worth a little side trip.
>> Mike North: All right, so, option value, optional parameter. We can also do, we can have a default value to use with a parameter. I have types here, I'm indicating that it's JavaScript in the top right corner, because we can Take the types away we can totally do this with modern JavaScript.
[00:05:06] You can do this in Chrome we'll understand it if you do it right in the console, you can have a default value. So defaults like arguments with the default value or perimeters with the default value for obvious reasons, or hopefully obvious reasons. They are required, because you're basically saying here's your fallback to use in the event that I don't explicitly pass you something.
[00:05:31] So when you're consuming that you can depend on it being there. With this default value here, if I go back to pasting that into this little environment here we can see that.
>> Mike North: I'm already one slide ahead, we can see that we've got.
>> Mike North: This user name is still just a string.
[00:05:55] Is it clipping off the top up there? Yes see parameter user name string. So that doesn't end up turning into that potentially undefined thing. So this is required, rest parameters. So we talked about using rest when we were doing destructuring. It sort of captures anything else that you didn't explicitly name.
[00:06:14] Same concept up here, so this allows us to have like a, as people call these variatic arguments. Right, you can have any number of arguments you pass to this function. When we order a sandwich, you must provide a bread, you must provide the name of the sandwich type that you're ordering.
[00:06:31] And then anything after that will be regarded as a topping. And like that will be captured In this toppings array, and you treat that as an array in the body of the body of the function. But when you're invoking the function, those are the final arguments that are passed.
[00:06:46] This can only go at the end, like, you can only have one rest parameter per function signature, and it always goes at the end because it kind of captures anything else that might be there.