- Now following on from the exact same example
we had in the last video,
something that you may want to do
is to destructure your parameters
or to provide some default values to your parameters.
So for example, my name, if I give it a default value,
which is like John, for example,
you'll notice it automatically infers the type as string
which is really nice.
Or I can manually come in here
and say that the type is going to be string if I want to.
What happens if I want to essentially give a default value
for an object parameter by destructuring it?
Well, first of all, what I'm gonna do is
I'm gonna take these options
and break them out into a type
just to make our code a little bit easier to read.
We'll just say that this is our options.
We'll paste that down just like that.
Get rid of any extra parentheses I have.
There we go.
That is working fine.
And then what we can do is we can say
that this is going to be our options type.
That just cleaned up the look of our code a little bit.
But instead of calling this options,
I want to destructure this.
I'm gonna write the same function as JavaScript
so you can see what I'm trying to do.
So we'll say printNameAndAge, takes a name,
and we're gonna have a debug mode,
which by default, I'm gonna set to false.
There we go, and I'm also gonna give this a default value
of an empty object just like that.
And then inside of here
we can console.log whatever information we want,
for example, this debug mode,
and this should say equals right there.
This is the JavaScript way of writing this function.
I wanna convert this over to TypeScript.
So we already have the first portion of this done.
I'm just gonna comment this out real quick with the name.
That works fine.
For options, though,
we obviously don't have this options variable anymore.
And instead, we have this debug mode
which is going to be set to false by default.
So just by making that change
you can see that this code is working fine,
and as long as we swap out options for debug mode,
you can see that this is working.
The last thing we have to do though
is to make sure that this is optional.
And generally, the easiest way to make something optional
is just to give it a default value.
We are getting an error, though,
and that's because debug mode is a required parameter.
If we make that an optional parameter,
you can now see all of our errors go away.
Again, to understand a little bit better
what's going on inside of this code,
we have this name variable, that's just string, that's fine.
We've defined essentially a destructured version
of our object where we said debug mode equals false.
This is identical to what our JavaScript code looks like.
We're then just specifically saying
that the type of this is options,
and then we're again defaulting it to an empty object
which is working just like a normal JavaScript.
If I remove this one line,
that's essentially the exact same thing
as what we had in our normal JavaScript code.
Now, a lot of times when you do destructuring like this,
you don't actually need to define a type
because it already kind of knows
that this debug mode is a Boolean.
So we can get rid of this type entirely up here.
Now let's say we wanted to add another thing onto this type.
So instead of just debug mode,
we want to also have like indent level.
In our case, we want this to be a number
but we don't wanna give it a default value.
Well, you may think we're just gonna do colon
and then follow it up by the text of number,
but that doesn't actually work.
And that's because when you destructure things
in JavaScript, this colon syntax is actually something
that you could use in normal JavaScript.
Now in order to actually type what this needs to be
we actually need to type this entire object,
which is a little bit of a pain.
So if you're ever destructuring something like this,
you need to make sure that you break out your type.
So we actually now need to have that option type
back in there.
We can say that our debug mode,
whoops, debug mode, this is going to be a Boolean,
and we now have a log level,
and this is going to be a number.
We wanna make sure both these are optional
because in our case that's kind of what we're doing here.
And now we can remove this like that.
And now if we just make sure we use
this indent level variable somewhere,
it should get rid of the errors.
And now all we need to do is just say
that this is going to be of that option type.
And if I make sure I use indent level
in both places, there we go.
Now you can see all of our errors are removed
and this indent level properly is typed
as either number or undefined,
and that's just 'cause it is an optional type.
So to recap a little bit more what we did here
with this destruction 'cause it's a little bit confusing.
Essentially do your normal destructuring
just like you would in JavaScript.
As you can see, if I remove this option right here,
this is exactly the same as my normal JavaScript code.
When you want to type something in a destructuring, though,
providing a default value will give you a type already.
So if you have default values for everything,
you may not need to create a manual type.
But if you have something that doesn't have a default value,
you need to give it a type,
and you can't give it a type inline
like you could do with a string here on the name property.
And that's just because the keyword here
for doing a colon followed by text
is already something that JavaScript handles.
So instead, you need to type the entire object
that you're destructuring,
which is why we add in that colon option after it
to say that this entire object here is an option type.
Now, if we've done everything right,
you can see that we can pass into here, for example,
a debug mode of true, and all of our code works fine.
We can instead pass in an indent level of like three.
All of our code still works fine.
If we try to pass it a string, we're getting an error.
And if we leave this entire thing off,
again, our entire code base is working fine.
This is a really common thing you're gonna run into
because this destructuring kind of object syntax
is very common in JavaScript.
Just make sure that if you want to provide types for it,
you make sure you put that colon with the type
after the entire object that you destructured
and not within it.
That's one problem a lot of people run into.
Now the next thing I wanna talk about
is how the rest operator works.
Let's say we have a sum function
that can take in any number of, you know, parameters.
So this is our numbers that we wanna sum.
We wanna add all these together.
So we'll just say like code to add them.
I'm not gonna actually write the code for that.
It doesn't matter for this.
I can call sum.
I could say like one, two, three or four.
I could say sum
and I could pass it just two parameters, for example.
It doesn't matter how many parameters I pass,
as long as I pass along a bunch of numbers,
it's gonna work fine.
How do we go about typing this parameter?
Well, we type it just like any other parameter.
In our case, we know that this is a number parameter.
We also know it's an array of numbers.
So we just put the array syntax at the end of it.
Now what I'm saying is that this numbers,
which is just essentially taking all the parameters
that I passed to this function is just an array
and it's an array specifically of numbers.
Anytime you use this rest operator,
you always need to make sure you use the array syntax
because it's always going to return to you an array
no matter what, it's either going to be an empty array
or an array with different values in it.
You always need to make sure you use the array index
That's why I'm getting an error here,
'cause essentially it literally says
it must be an array type.
So I just need to make sure I put that array in there.
That's how you deal with rest parameters.
They're much simpler than destruction, which is really nice.