1
00:00:00,120 --> 00:00:02,130
- Now following on from
the exact same example

2
00:00:02,130 --> 00:00:03,390
we had in the last video,

3
00:00:03,390 --> 00:00:04,770
something that you may want to do

4
00:00:04,770 --> 00:00:06,900
is to destructure your parameters

5
00:00:06,900 --> 00:00:09,840
or to provide some default
values to your parameters.

6
00:00:09,840 --> 00:00:12,450
So for example, my name, if
I give it a default value,

7
00:00:12,450 --> 00:00:14,310
which is like John, for example,

8
00:00:14,310 --> 00:00:17,010
you'll notice it automatically
infers the type as string

9
00:00:17,010 --> 00:00:18,150
which is really nice.

10
00:00:18,150 --> 00:00:19,530
Or I can manually come in here

11
00:00:19,530 --> 00:00:22,290
and say that the type is going
to be string if I want to.

12
00:00:22,290 --> 00:00:24,900
What happens if I want to
essentially give a default value

13
00:00:24,900 --> 00:00:28,140
for an object parameter
by destructuring it?

14
00:00:28,140 --> 00:00:29,190
Well, first of all, what I'm gonna do is

15
00:00:29,190 --> 00:00:30,180
I'm gonna take these options

16
00:00:30,180 --> 00:00:31,170
and break them out into a type

17
00:00:31,170 --> 00:00:33,420
just to make our code a
little bit easier to read.

18
00:00:33,420 --> 00:00:35,760
We'll just say that this is our options.

19
00:00:35,760 --> 00:00:37,260
We'll paste that down just like that.

20
00:00:37,260 --> 00:00:39,690
Get rid of any extra parentheses I have.

21
00:00:39,690 --> 00:00:40,523
There we go.

22
00:00:40,523 --> 00:00:42,030
That is working fine.

23
00:00:42,030 --> 00:00:43,290
And then what we can do is we can say

24
00:00:43,290 --> 00:00:44,970
that this is going to be our options type.

25
00:00:44,970 --> 00:00:47,190
That just cleaned up the look
of our code a little bit.

26
00:00:47,190 --> 00:00:49,080
But instead of calling this options,

27
00:00:49,080 --> 00:00:50,280
I want to destructure this.

28
00:00:50,280 --> 00:00:52,020
I'm gonna write the same
function as JavaScript

29
00:00:52,020 --> 00:00:53,160
so you can see what I'm trying to do.

30
00:00:53,160 --> 00:00:55,620
So we'll say printNameAndAge,
takes a name,

31
00:00:55,620 --> 00:00:57,150
and we're gonna have a debug mode,

32
00:00:57,150 --> 00:00:59,730
which by default, I'm gonna set to false.

33
00:00:59,730 --> 00:01:01,680
There we go, and I'm also
gonna give this a default value

34
00:01:01,680 --> 00:01:03,960
of an empty object just like that.

35
00:01:03,960 --> 00:01:04,793
And then inside of here

36
00:01:04,793 --> 00:01:07,050
we can console.log whatever
information we want,

37
00:01:07,050 --> 00:01:08,430
for example, this debug mode,

38
00:01:08,430 --> 00:01:10,050
and this should say equals right there.

39
00:01:10,050 --> 00:01:12,720
This is the JavaScript way
of writing this function.

40
00:01:12,720 --> 00:01:15,000
I wanna convert this over to TypeScript.

41
00:01:15,000 --> 00:01:17,130
So we already have the
first portion of this done.

42
00:01:17,130 --> 00:01:18,960
I'm just gonna comment this
out real quick with the name.

43
00:01:18,960 --> 00:01:19,980
That works fine.

44
00:01:19,980 --> 00:01:20,820
For options, though,

45
00:01:20,820 --> 00:01:22,890
we obviously don't have this
options variable anymore.

46
00:01:22,890 --> 00:01:24,660
And instead, we have this debug mode

47
00:01:24,660 --> 00:01:26,880
which is going to be
set to false by default.

48
00:01:26,880 --> 00:01:28,140
So just by making that change

49
00:01:28,140 --> 00:01:29,760
you can see that this
code is working fine,

50
00:01:29,760 --> 00:01:31,920
and as long as we swap out
options for debug mode,

51
00:01:31,920 --> 00:01:33,540
you can see that this is working.

52
00:01:33,540 --> 00:01:34,500
The last thing we have to do though

53
00:01:34,500 --> 00:01:36,270
is to make sure that this is optional.

54
00:01:36,270 --> 00:01:38,220
And generally, the easiest
way to make something optional

55
00:01:38,220 --> 00:01:39,840
is just to give it a default value.

56
00:01:39,840 --> 00:01:41,070
We are getting an error, though,

57
00:01:41,070 --> 00:01:43,830
and that's because debug
mode is a required parameter.

58
00:01:43,830 --> 00:01:45,240
If we make that an optional parameter,

59
00:01:45,240 --> 00:01:47,460
you can now see all of our errors go away.

60
00:01:47,460 --> 00:01:48,720
Again, to understand a little bit better

61
00:01:48,720 --> 00:01:50,730
what's going on inside of this code,

62
00:01:50,730 --> 00:01:52,920
we have this name variable,
that's just string, that's fine.

63
00:01:52,920 --> 00:01:55,410
We've defined essentially
a destructured version

64
00:01:55,410 --> 00:01:57,810
of our object where we said
debug mode equals false.

65
00:01:57,810 --> 00:02:00,810
This is identical to what our
JavaScript code looks like.

66
00:02:00,810 --> 00:02:02,460
We're then just specifically saying

67
00:02:02,460 --> 00:02:04,140
that the type of this is options,

68
00:02:04,140 --> 00:02:06,540
and then we're again defaulting
it to an empty object

69
00:02:06,540 --> 00:02:08,460
which is working just
like a normal JavaScript.

70
00:02:08,460 --> 00:02:09,750
If I remove this one line,

71
00:02:09,750 --> 00:02:11,220
that's essentially the exact same thing

72
00:02:11,220 --> 00:02:13,680
as what we had in our
normal JavaScript code.

73
00:02:13,680 --> 00:02:15,810
Now, a lot of times when you
do destructuring like this,

74
00:02:15,810 --> 00:02:17,280
you don't actually need to define a type

75
00:02:17,280 --> 00:02:18,540
because it already kind of knows

76
00:02:18,540 --> 00:02:20,340
that this debug mode is a Boolean.

77
00:02:20,340 --> 00:02:22,830
So we can get rid of this
type entirely up here.

78
00:02:22,830 --> 00:02:25,740
Now let's say we wanted to add
another thing onto this type.

79
00:02:25,740 --> 00:02:27,120
So instead of just debug mode,

80
00:02:27,120 --> 00:02:29,790
we want to also have like indent level.

81
00:02:29,790 --> 00:02:31,290
In our case, we want this to be a number

82
00:02:31,290 --> 00:02:33,150
but we don't wanna give
it a default value.

83
00:02:33,150 --> 00:02:34,650
Well, you may think
we're just gonna do colon

84
00:02:34,650 --> 00:02:36,810
and then follow it up
by the text of number,

85
00:02:36,810 --> 00:02:38,460
but that doesn't actually work.

86
00:02:38,460 --> 00:02:40,170
And that's because when
you destructure things

87
00:02:40,170 --> 00:02:43,140
in JavaScript, this colon
syntax is actually something

88
00:02:43,140 --> 00:02:45,360
that you could use in normal JavaScript.

89
00:02:45,360 --> 00:02:47,940
Now in order to actually
type what this needs to be

90
00:02:47,940 --> 00:02:51,120
we actually need to
type this entire object,

91
00:02:51,120 --> 00:02:52,500
which is a little bit of a pain.

92
00:02:52,500 --> 00:02:55,050
So if you're ever destructuring
something like this,

93
00:02:55,050 --> 00:02:57,060
you need to make sure that
you break out your type.

94
00:02:57,060 --> 00:02:59,340
So we actually now need
to have that option type

95
00:02:59,340 --> 00:03:00,570
back in there.

96
00:03:00,570 --> 00:03:02,220
We can say that our debug mode,

97
00:03:02,220 --> 00:03:06,660
whoops, debug mode, this
is going to be a Boolean,

98
00:03:06,660 --> 00:03:08,163
and we now have a log level,

99
00:03:09,450 --> 00:03:10,890
and this is going to be a number.

100
00:03:10,890 --> 00:03:12,360
We wanna make sure both these are optional

101
00:03:12,360 --> 00:03:14,550
because in our case that's
kind of what we're doing here.

102
00:03:14,550 --> 00:03:16,530
And now we can remove this like that.

103
00:03:16,530 --> 00:03:17,790
And now if we just make sure we use

104
00:03:17,790 --> 00:03:19,530
this indent level variable somewhere,

105
00:03:19,530 --> 00:03:20,850
it should get rid of the errors.

106
00:03:20,850 --> 00:03:22,320
And now all we need to do is just say

107
00:03:22,320 --> 00:03:25,800
that this is going to
be of that option type.

108
00:03:25,800 --> 00:03:27,540
And if I make sure I use indent level

109
00:03:27,540 --> 00:03:28,890
in both places, there we go.

110
00:03:28,890 --> 00:03:30,420
Now you can see all of
our errors are removed

111
00:03:30,420 --> 00:03:32,130
and this indent level properly is typed

112
00:03:32,130 --> 00:03:33,510
as either number or undefined,

113
00:03:33,510 --> 00:03:35,550
and that's just 'cause
it is an optional type.

114
00:03:35,550 --> 00:03:37,110
So to recap a little bit
more what we did here

115
00:03:37,110 --> 00:03:39,240
with this destruction 'cause
it's a little bit confusing.

116
00:03:39,240 --> 00:03:41,010
Essentially do your normal destructuring

117
00:03:41,010 --> 00:03:42,450
just like you would in JavaScript.

118
00:03:42,450 --> 00:03:44,400
As you can see, if I remove
this option right here,

119
00:03:44,400 --> 00:03:47,340
this is exactly the same as
my normal JavaScript code.

120
00:03:47,340 --> 00:03:50,040
When you want to type something
in a destructuring, though,

121
00:03:50,040 --> 00:03:52,680
providing a default value
will give you a type already.

122
00:03:52,680 --> 00:03:54,360
So if you have default
values for everything,

123
00:03:54,360 --> 00:03:56,430
you may not need to create a manual type.

124
00:03:56,430 --> 00:03:58,530
But if you have something that
doesn't have a default value,

125
00:03:58,530 --> 00:04:00,030
you need to give it a type,

126
00:04:00,030 --> 00:04:01,530
and you can't give it a type inline

127
00:04:01,530 --> 00:04:04,470
like you could do with a string
here on the name property.

128
00:04:04,470 --> 00:04:06,000
And that's just because the keyword here

129
00:04:06,000 --> 00:04:07,620
for doing a colon followed by text

130
00:04:07,620 --> 00:04:09,690
is already something
that JavaScript handles.

131
00:04:09,690 --> 00:04:12,030
So instead, you need to
type the entire object

132
00:04:12,030 --> 00:04:13,320
that you're destructuring,

133
00:04:13,320 --> 00:04:16,140
which is why we add in
that colon option after it

134
00:04:16,140 --> 00:04:19,320
to say that this entire
object here is an option type.

135
00:04:19,320 --> 00:04:20,490
Now, if we've done everything right,

136
00:04:20,490 --> 00:04:22,530
you can see that we can
pass into here, for example,

137
00:04:22,530 --> 00:04:25,410
a debug mode of true, and
all of our code works fine.

138
00:04:25,410 --> 00:04:28,080
We can instead pass in an
indent level of like three.

139
00:04:28,080 --> 00:04:29,160
All of our code still works fine.

140
00:04:29,160 --> 00:04:31,590
If we try to pass it a string,
we're getting an error.

141
00:04:31,590 --> 00:04:32,940
And if we leave this entire thing off,

142
00:04:32,940 --> 00:04:35,400
again, our entire code
base is working fine.

143
00:04:35,400 --> 00:04:37,170
This is a really common
thing you're gonna run into

144
00:04:37,170 --> 00:04:39,840
because this destructuring
kind of object syntax

145
00:04:39,840 --> 00:04:41,490
is very common in JavaScript.

146
00:04:41,490 --> 00:04:43,680
Just make sure that if you
want to provide types for it,

147
00:04:43,680 --> 00:04:45,360
you make sure you put
that colon with the type

148
00:04:45,360 --> 00:04:47,550
after the entire object
that you destructured

149
00:04:47,550 --> 00:04:48,720
and not within it.

150
00:04:48,720 --> 00:04:51,120
That's one problem a
lot of people run into.

151
00:04:51,120 --> 00:04:52,320
Now the next thing I wanna talk about

152
00:04:52,320 --> 00:04:53,880
is how the rest operator works.

153
00:04:53,880 --> 00:04:54,960
Let's say we have a sum function

154
00:04:54,960 --> 00:04:57,780
that can take in any number
of, you know, parameters.

155
00:04:57,780 --> 00:04:59,730
So this is our numbers that we wanna sum.

156
00:04:59,730 --> 00:05:01,200
We wanna add all these together.

157
00:05:01,200 --> 00:05:03,450
So we'll just say like code to add them.

158
00:05:03,450 --> 00:05:04,890
I'm not gonna actually
write the code for that.

159
00:05:04,890 --> 00:05:06,390
It doesn't matter for this.

160
00:05:06,390 --> 00:05:07,223
I can call sum.

161
00:05:07,223 --> 00:05:09,870
I could say like one, two, three or four.

162
00:05:09,870 --> 00:05:10,703
I could say sum

163
00:05:10,703 --> 00:05:12,930
and I could pass it just
two parameters, for example.

164
00:05:12,930 --> 00:05:14,730
It doesn't matter how
many parameters I pass,

165
00:05:14,730 --> 00:05:16,260
as long as I pass along
a bunch of numbers,

166
00:05:16,260 --> 00:05:17,640
it's gonna work fine.

167
00:05:17,640 --> 00:05:20,070
How do we go about typing this parameter?

168
00:05:20,070 --> 00:05:22,020
Well, we type it just
like any other parameter.

169
00:05:22,020 --> 00:05:24,150
In our case, we know that
this is a number parameter.

170
00:05:24,150 --> 00:05:26,010
We also know it's an array of numbers.

171
00:05:26,010 --> 00:05:28,500
So we just put the array
syntax at the end of it.

172
00:05:28,500 --> 00:05:30,150
Now what I'm saying is that this numbers,

173
00:05:30,150 --> 00:05:31,893
which is just essentially
taking all the parameters

174
00:05:31,893 --> 00:05:34,800
that I passed to this
function is just an array

175
00:05:34,800 --> 00:05:37,380
and it's an array specifically of numbers.

176
00:05:37,380 --> 00:05:39,030
Anytime you use this rest operator,

177
00:05:39,030 --> 00:05:41,250
you always need to make sure
you use the array syntax

178
00:05:41,250 --> 00:05:43,350
because it's always going
to return to you an array

179
00:05:43,350 --> 00:05:45,360
no matter what, it's either
going to be an empty array

180
00:05:45,360 --> 00:05:47,370
or an array with different values in it.

181
00:05:47,370 --> 00:05:49,170
You always need to make
sure you use the array index

182
00:05:49,170 --> 00:05:50,250
That's why I'm getting an error here,

183
00:05:50,250 --> 00:05:51,660
'cause essentially it literally says

184
00:05:51,660 --> 00:05:52,770
it must be an array type.

185
00:05:52,770 --> 00:05:54,930
So I just need to make sure
I put that array in there.

186
00:05:54,930 --> 00:05:56,250
That's how you deal with rest parameters.

187
00:05:56,250 --> 00:05:59,250
They're much simpler than
destruction, which is really nice.