1
00:00:00,120 --> 00:00:01,380
- Now all of the rest of the videos

2
00:00:01,380 --> 00:00:04,230
in this type safety module are
going to be about TypeScript.

3
00:00:04,230 --> 00:00:05,460
This one specifically is gonna be

4
00:00:05,460 --> 00:00:08,070
about setting up TypeScript
inside of Vite and React

5
00:00:08,070 --> 00:00:10,650
and how to type the props
inside of your components.

6
00:00:10,650 --> 00:00:12,750
But I'm not actually going
to be teaching TypeScript

7
00:00:12,750 --> 00:00:14,280
inside this section of the course.

8
00:00:14,280 --> 00:00:16,800
I'm expecting that you
understand and know how to write

9
00:00:16,800 --> 00:00:18,870
inside of TypeScript to
watch these tutorials.

10
00:00:18,870 --> 00:00:20,760
And this is specifically
the different things

11
00:00:20,760 --> 00:00:23,220
you need to know about how
to use TypeScript in React

12
00:00:23,220 --> 00:00:24,540
because there's a few different gotchas

13
00:00:24,540 --> 00:00:26,100
that you need to know and
a few different things

14
00:00:26,100 --> 00:00:27,660
that React has set up
that you need to know

15
00:00:27,660 --> 00:00:29,880
before you can use
TypeScript inside of it.

16
00:00:29,880 --> 00:00:30,990
So the very first thing you wanna do

17
00:00:30,990 --> 00:00:32,970
is to create your
project just like normal.

18
00:00:32,970 --> 00:00:36,360
So npm create Vite at latest.

19
00:00:36,360 --> 00:00:37,740
And what we wanna do instead of select

20
00:00:37,740 --> 00:00:39,570
the JavaScript version, is obviously

21
00:00:39,570 --> 00:00:41,610
to select the TypeScript version.

22
00:00:41,610 --> 00:00:43,230
Then we just need to install everything

23
00:00:43,230 --> 00:00:45,060
and run just like normal.

24
00:00:45,060 --> 00:00:45,893
There we go.

25
00:00:45,893 --> 00:00:46,800
And you'll notice that the files

26
00:00:46,800 --> 00:00:48,600
that are generated are slightly different.

27
00:00:48,600 --> 00:00:49,620
There's not very much difference,

28
00:00:49,620 --> 00:00:50,640
but there's a few differences.

29
00:00:50,640 --> 00:00:53,190
For example, we have these
TSS config files right here

30
00:00:53,190 --> 00:00:54,510
where you can configure all your different

31
00:00:54,510 --> 00:00:56,790
TypeScript related setup that you need.

32
00:00:56,790 --> 00:01:00,210
Same thing here inside of
our actual package.json,

33
00:01:00,210 --> 00:01:01,920
you'll notice we have a linting section

34
00:01:01,920 --> 00:01:03,660
that we can have in here that
has some more information.

35
00:01:03,660 --> 00:01:06,840
Our TSC is being run here to
build our TypeScript files.

36
00:01:06,840 --> 00:01:08,730
And we have a few extra dev dependencies

37
00:01:08,730 --> 00:01:10,590
for everything related to TypeScript.

38
00:01:10,590 --> 00:01:12,090
Also inside of eslint we're using

39
00:01:12,090 --> 00:01:13,860
some TypeScript related eslint rules

40
00:01:13,860 --> 00:01:15,210
instead of the normal ones.

41
00:01:15,210 --> 00:01:17,760
So again, just a little bit
of extra TypeScript stuff.

42
00:01:17,760 --> 00:01:19,470
And then finally inside
our source we have this

43
00:01:19,470 --> 00:01:21,120
vite.env file here.

44
00:01:21,120 --> 00:01:22,560
Essentially that's just hooking up

45
00:01:22,560 --> 00:01:23,970
all the Vite related stuff.

46
00:01:23,970 --> 00:01:26,310
With Typescripts, you have
things for like importing

47
00:01:26,310 --> 00:01:28,080
your metadata and stuff like that.

48
00:01:28,080 --> 00:01:30,180
Overall, the code that's
actually generated for you

49
00:01:30,180 --> 00:01:33,180
is very similar between
TypeScript and JavaScript

50
00:01:33,180 --> 00:01:35,610
except for obviously now
you have TypeScript files

51
00:01:35,610 --> 00:01:37,230
that have different types being defined

52
00:01:37,230 --> 00:01:39,480
as opposed to JavaScript files.

53
00:01:39,480 --> 00:01:40,710
So the very first thing I wanna do

54
00:01:40,710 --> 00:01:42,000
is I'm gonna come in here.

55
00:01:42,000 --> 00:01:47,000
Export default function
app, just like that.

56
00:01:49,680 --> 00:01:51,028
Just like you would normally do.

57
00:01:51,028 --> 00:01:55,263
And let's just return an H1 that says Hi.

58
00:01:56,220 --> 00:01:57,053
There we go.

59
00:01:57,053 --> 00:01:58,350
And let's just get rid of all these files

60
00:01:58,350 --> 00:01:59,550
that we don't need.

61
00:01:59,550 --> 00:02:00,383
Get rid of all these.

62
00:02:00,383 --> 00:02:02,880
Make sure you keep this
.d.ts file in there.

63
00:02:02,880 --> 00:02:04,650
Get rid of all of our CSS files.

64
00:02:04,650 --> 00:02:07,410
And now if we just open this
up, we should hopefully see

65
00:02:07,410 --> 00:02:09,810
there we go, that this is
actually rendering our output.

66
00:02:09,810 --> 00:02:12,090
Now in order to talk about
everything related to TypeScript

67
00:02:12,090 --> 00:02:14,340
what I wanna do is I wanna
create a brand new component.

68
00:02:14,340 --> 00:02:16,500
We're just gonna call this child.tsx.

69
00:02:16,500 --> 00:02:17,850
That's important if
you're using TypeScript,

70
00:02:17,850 --> 00:02:21,240
use TSX instead of JSX,
that's for TypeScript.

71
00:02:21,240 --> 00:02:25,803
We're gonna export our
function child just like that,

72
00:02:28,440 --> 00:02:32,610
return an H1 that just
says child, there we go.

73
00:02:32,610 --> 00:02:34,710
And we can render that out inside of here.

74
00:02:36,780 --> 00:02:38,340
Make sure I import it.

75
00:02:38,340 --> 00:02:40,440
And there we go, that's working just fine.

76
00:02:40,440 --> 00:02:42,840
Now if we wanted to be able
to use things like props

77
00:02:42,840 --> 00:02:43,980
we would need to add them in.

78
00:02:43,980 --> 00:02:45,960
So here I would come in
and I would add a prop.

79
00:02:45,960 --> 00:02:47,760
Like let's just say
that we pass in a name.

80
00:02:47,760 --> 00:02:49,350
That's the only thing we can pass in.

81
00:02:49,350 --> 00:02:50,400
And that's what gets rendered out

82
00:02:50,400 --> 00:02:51,930
inside of our child component.

83
00:02:51,930 --> 00:02:53,130
Immediately you'll notice we start

84
00:02:53,130 --> 00:02:54,480
to get some errors showing up.

85
00:02:54,480 --> 00:02:55,950
This error right here
is essentially saying,

86
00:02:55,950 --> 00:02:57,660
hey, that we don't have
a type for our name.

87
00:02:57,660 --> 00:02:58,800
So it has an any type.

88
00:02:58,800 --> 00:02:59,820
And here in our app it's saying,

89
00:02:59,820 --> 00:03:01,980
hey, the prop name is expected.

90
00:03:01,980 --> 00:03:03,690
So the really great thing
about using TypeScript

91
00:03:03,690 --> 00:03:06,420
is we get errors and
warnings inside of our editor

92
00:03:06,420 --> 00:03:07,860
that are telling us we need to add things

93
00:03:07,860 --> 00:03:10,650
and we also get great type
safety and type auto complete.

94
00:03:10,650 --> 00:03:12,660
For example you can see I
can auto complete my name

95
00:03:12,660 --> 00:03:15,720
right here and let's just say
my name is going to be Kyle.

96
00:03:15,720 --> 00:03:17,550
Now everything will work,
but we still have the error

97
00:03:17,550 --> 00:03:20,850
inside of here because we
haven't typed the actual props.

98
00:03:20,850 --> 00:03:23,280
In my opinion, probably the
best way to type your props

99
00:03:23,280 --> 00:03:25,350
in the most common way is
just what you're going to do

100
00:03:25,350 --> 00:03:27,420
is right after all your props put a colon

101
00:03:27,420 --> 00:03:29,940
and then you can define
your props in line.

102
00:03:29,940 --> 00:03:31,710
So for example, I could do name string

103
00:03:31,710 --> 00:03:34,710
and that is defining my props
in line, no errors at all.

104
00:03:34,710 --> 00:03:36,000
This is a bit unwieldy though.

105
00:03:36,000 --> 00:03:38,640
And generally I like to
rename this to an actual type.

106
00:03:38,640 --> 00:03:42,120
So I'll say child props is what
the type is gonna be called.

107
00:03:42,120 --> 00:03:43,830
And then I can define my type up here.

108
00:03:43,830 --> 00:03:46,380
Child props equals and I
could say that it's going

109
00:03:46,380 --> 00:03:49,260
to be a name which is a
string just like that.

110
00:03:49,260 --> 00:03:51,510
Now you can use an interface
or you can use a type.

111
00:03:51,510 --> 00:03:53,250
It doesn't matter, they're
pretty much the same thing.

112
00:03:53,250 --> 00:03:54,630
In my case, I like to use types.

113
00:03:54,630 --> 00:03:56,730
So that's what I'll be using
throughout most of the course.

114
00:03:56,730 --> 00:03:59,160
But again, use whatever you
want, it doesn't really matter.

115
00:03:59,160 --> 00:04:00,450
So just by doing that you can see

116
00:04:00,450 --> 00:04:01,860
that we've typed everything properly.

117
00:04:01,860 --> 00:04:03,810
If I go to my app here and
I try to pass in something

118
00:04:03,810 --> 00:04:04,950
that's not a string, for example,

119
00:04:04,950 --> 00:04:06,300
I try to pass in a number.

120
00:04:06,300 --> 00:04:07,590
You can see I'm getting an error

121
00:04:07,590 --> 00:04:08,940
and it gives me a nice warning that says

122
00:04:08,940 --> 00:04:11,040
hey number is not
assignable to type string.

123
00:04:11,040 --> 00:04:12,840
So obviously this shouldn't be working.

124
00:04:12,840 --> 00:04:15,300
Now the other way that you
may see your components

125
00:04:15,300 --> 00:04:18,780
being typed is by using
the React.fc helper.

126
00:04:18,780 --> 00:04:22,410
So you would need to actually
use here a variable instead.

127
00:04:22,410 --> 00:04:24,180
So it's export const child.

128
00:04:24,180 --> 00:04:27,270
We'll set this equal to an
arrow function just like this

129
00:04:27,270 --> 00:04:30,213
and we're gonna type this
variable as a react.fc.

130
00:04:31,260 --> 00:04:33,090
This stands for function component.

131
00:04:33,090 --> 00:04:35,520
And essentially what
that does is it says Hey

132
00:04:35,520 --> 00:04:38,250
this is a component that
is a function component

133
00:04:38,250 --> 00:04:40,380
and this takes in a generic
where you can pass in

134
00:04:40,380 --> 00:04:41,340
what your props are.

135
00:04:41,340 --> 00:04:42,510
So in our case, we already have a type

136
00:04:42,510 --> 00:04:44,490
for our child props just like that.

137
00:04:44,490 --> 00:04:46,860
Then what I can do is I can
remove this prop right here

138
00:04:46,860 --> 00:04:47,693
for our child props.

139
00:04:47,693 --> 00:04:48,690
We don't need that type anymore

140
00:04:48,690 --> 00:04:50,940
'cause this generic is
taking care of that for us.

141
00:04:50,940 --> 00:04:53,610
And if I were to change
this back to a string,

142
00:04:53,610 --> 00:04:55,440
you'll notice that
everything is working exactly

143
00:04:55,440 --> 00:04:56,820
as it was before.

144
00:04:56,820 --> 00:04:58,590
Now personally I don't like using

145
00:04:58,590 --> 00:05:01,140
this function component
way of doing things as much

146
00:05:01,140 --> 00:05:02,190
because first of all,

147
00:05:02,190 --> 00:05:04,110
it adds a bunch of extra stuff onto here.

148
00:05:04,110 --> 00:05:06,420
So for example, in
React on your components

149
00:05:06,420 --> 00:05:08,340
you can define things
like your prop types.

150
00:05:08,340 --> 00:05:10,740
You can define your default
props, your display name

151
00:05:10,740 --> 00:05:12,120
but these things are
not really that useful,

152
00:05:12,120 --> 00:05:13,200
especially default props.

153
00:05:13,200 --> 00:05:14,850
If you're using a function component

154
00:05:14,850 --> 00:05:16,710
you can just set your
default like this in line

155
00:05:16,710 --> 00:05:18,690
so you really don't
need that default props.

156
00:05:18,690 --> 00:05:20,400
So having all those extra
things is not really

157
00:05:20,400 --> 00:05:22,350
something that you always need or want.

158
00:05:22,350 --> 00:05:23,280
It also makes working

159
00:05:23,280 --> 00:05:25,230
with some things a
little bit more difficult

160
00:05:25,230 --> 00:05:26,250
if you have like name spacing

161
00:05:26,250 --> 00:05:28,410
that you're trying to do
inside of your components.

162
00:05:28,410 --> 00:05:30,480
And also just adds a
little bit of extra code.

163
00:05:30,480 --> 00:05:32,400
Like we don't wanna write
all this extra code.

164
00:05:32,400 --> 00:05:34,380
So personally what I prefer to do is

165
00:05:34,380 --> 00:05:36,210
I just like to write my normal functions

166
00:05:36,210 --> 00:05:38,760
and I just like to add my
types on the end like this.

167
00:05:38,760 --> 00:05:41,460
I find it's a little bit
cleaner and easier to work with.

168
00:05:41,460 --> 00:05:43,380
Now if you want to actually
be able to pass children

169
00:05:43,380 --> 00:05:44,820
down into a component, let's say

170
00:05:44,820 --> 00:05:46,800
that we want to be able
to pass in children here

171
00:05:46,800 --> 00:05:48,090
and instead of passing a name,

172
00:05:48,090 --> 00:05:50,250
we're gonna pass down children instead.

173
00:05:50,250 --> 00:05:51,690
So we no longer have a name

174
00:05:51,690 --> 00:05:53,280
and instead we have some children prop.

175
00:05:53,280 --> 00:05:54,630
We don't know what the
type is gonna be yet

176
00:05:54,630 --> 00:05:55,770
but that's what we have.

177
00:05:55,770 --> 00:05:57,600
So here, instead of having a name

178
00:05:57,600 --> 00:05:59,520
we wanna pass along some child.

179
00:05:59,520 --> 00:06:03,300
And let's just say child inside of here,

180
00:06:03,300 --> 00:06:04,620
we'll say children, doesn't matter.

181
00:06:04,620 --> 00:06:06,150
And you can see it's printing out fine

182
00:06:06,150 --> 00:06:07,560
and it looks like
everything's working fine.

183
00:06:07,560 --> 00:06:09,240
That's because right now
we're passing a string.

184
00:06:09,240 --> 00:06:11,250
But if I were to pass this as a div,

185
00:06:11,250 --> 00:06:12,540
that wraps my children

186
00:06:12,540 --> 00:06:14,190
now all of a sudden we're
gonna get some errors

187
00:06:14,190 --> 00:06:16,560
because it's expecting not a JSS tag.

188
00:06:16,560 --> 00:06:18,780
So what exactly is the
type we should use here?

189
00:06:18,780 --> 00:06:20,730
Well, inside of React,
they have a special type.

190
00:06:20,730 --> 00:06:22,030
We can say react.reactnode

191
00:06:23,412 --> 00:06:25,650
and that is going to be a
type that is specifically

192
00:06:25,650 --> 00:06:27,810
for anything that can be a React child.

193
00:06:27,810 --> 00:06:29,280
And if we wanna clean this up a little bit

194
00:06:29,280 --> 00:06:33,000
what we can do is we can
actually import reactnode,

195
00:06:33,000 --> 00:06:34,920
we can get that from the React library.

196
00:06:34,920 --> 00:06:37,320
Then we don't have to prefix
this with the react dot.

197
00:06:37,320 --> 00:06:38,700
Also, if you're importing types,

198
00:06:38,700 --> 00:06:40,020
I highly recommend making sure

199
00:06:40,020 --> 00:06:42,000
you use the import type syntax.

200
00:06:42,000 --> 00:06:42,960
That's just going to make sure

201
00:06:42,960 --> 00:06:44,610
when you actually deploy your code,

202
00:06:44,610 --> 00:06:46,920
it doesn't import any unnecessary code

203
00:06:46,920 --> 00:06:48,990
because this is purely
for development only

204
00:06:48,990 --> 00:06:50,460
and we don't need to
push this to production

205
00:06:50,460 --> 00:06:51,840
'cause it's just a type.

206
00:06:51,840 --> 00:06:54,180
So now no matter what I
pass in here as a children

207
00:06:54,180 --> 00:06:55,380
this is going to work fine.

208
00:06:55,380 --> 00:06:57,390
And since I made this
required, it's actually going

209
00:06:57,390 --> 00:06:59,730
to gimme an error if I
try not to pass a child.

210
00:06:59,730 --> 00:07:01,590
For example, if I do this with no children

211
00:07:01,590 --> 00:07:02,910
I'm getting an error that says, hey,

212
00:07:02,910 --> 00:07:05,160
children is missing inside of this type.

213
00:07:05,160 --> 00:07:06,750
Now generally if you're
working with children

214
00:07:06,750 --> 00:07:07,680
they may be optional.

215
00:07:07,680 --> 00:07:09,420
So you can just come in
here, put the question mark

216
00:07:09,420 --> 00:07:11,340
and now it's saying that
children is optional.

217
00:07:11,340 --> 00:07:14,040
So again, if I don't pass
any children in like this

218
00:07:14,040 --> 00:07:15,690
you can see I'm not getting an error.

219
00:07:15,690 --> 00:07:17,250
Now the final thing I wanna
talk about in this video

220
00:07:17,250 --> 00:07:20,580
for passing along props is
how you deal with HTML props.

221
00:07:20,580 --> 00:07:23,310
Oftentimes in React you're
gonna have a custom component.

222
00:07:23,310 --> 00:07:25,610
Like I'm going to have a
custom button component,

223
00:07:25,610 --> 00:07:28,830
export function button, just like this

224
00:07:28,830 --> 00:07:30,810
and let's just return a button

225
00:07:30,810 --> 00:07:33,480
and I wanna pass along all
of the normal button props

226
00:07:33,480 --> 00:07:34,313
that I would get.

227
00:07:34,313 --> 00:07:36,000
So for example, here I'm gonna get

228
00:07:36,000 --> 00:07:38,370
all my normal button props
and maybe I wanna pass in

229
00:07:38,370 --> 00:07:41,160
something else like if it
is an outline button or not,

230
00:07:41,160 --> 00:07:42,900
and I'll add, you know whatever I want,

231
00:07:42,900 --> 00:07:45,120
whether it's a class name or
like I'll add a custom style

232
00:07:45,120 --> 00:07:46,980
that's specifically for this like outline.

233
00:07:46,980 --> 00:07:48,430
So I'll just say like border,

234
00:07:51,330 --> 00:07:53,640
one pixel solid red, whatever it is,

235
00:07:53,640 --> 00:07:54,690
it doesn't really matter.

236
00:07:54,690 --> 00:07:56,610
And we'll do that only
if we're in the outline.

237
00:07:56,610 --> 00:07:58,380
So outline, then we'll do that.

238
00:07:58,380 --> 00:08:01,110
Otherwise we'll just pass
an undefined here, whatever,

239
00:08:01,110 --> 00:08:02,310
not the best code in the entire world,

240
00:08:02,310 --> 00:08:04,080
but that'll get the job done.

241
00:08:04,080 --> 00:08:08,310
So for our types, we can
type our button props,

242
00:08:08,310 --> 00:08:11,060
set that equal to here and
then we can say the outline.

243
00:08:12,014 --> 00:08:15,120
This is going to be a Boolean,
we know that for a fact.

244
00:08:15,120 --> 00:08:16,380
That's working just fine.

245
00:08:16,380 --> 00:08:20,010
Let's make sure we apply these
button props down to here.

246
00:08:20,010 --> 00:08:20,843
There we go.

247
00:08:20,843 --> 00:08:23,320
And now if I try to use
that button inside of here

248
00:08:26,264 --> 00:08:28,587
And we just say, hi, I am a button.

249
00:08:30,420 --> 00:08:31,253
There we go.

250
00:08:31,253 --> 00:08:35,670
Let's import that component
and let's just pass in outline.

251
00:08:35,670 --> 00:08:36,503
I should probably make sure

252
00:08:36,503 --> 00:08:37,710
that this is an optional property

253
00:08:37,710 --> 00:08:39,660
because I obviously don't
wanna make that required.

254
00:08:39,660 --> 00:08:41,430
You're gonna see though
I'm getting some errors.

255
00:08:41,430 --> 00:08:43,500
If I hover over this
it's saying type children

256
00:08:43,500 --> 00:08:44,490
is not assignable to it

257
00:08:44,490 --> 00:08:46,290
because I'm trying to pass along a child,

258
00:08:46,290 --> 00:08:48,240
but I wanna just infer all the types

259
00:08:48,240 --> 00:08:49,530
that a button normally has.

260
00:08:49,530 --> 00:08:50,820
Also, maybe I wanna pass along

261
00:08:50,820 --> 00:08:53,340
like the disabled property and
again, I'm gonna get an error

262
00:08:53,340 --> 00:08:55,710
because disabled is not
part of that as well.

263
00:08:55,710 --> 00:08:57,270
So in order to get those normal props

264
00:08:57,270 --> 00:08:58,260
that we get from a button

265
00:08:58,260 --> 00:08:59,600
what we need to do is go
into our button component

266
00:08:59,600 --> 00:09:03,901
and I wanna actually import
a type from React here.

267
00:09:03,901 --> 00:09:06,720
And this type is going to be
getting the component props

268
00:09:06,720 --> 00:09:08,730
and it's actually just
called component props.

269
00:09:08,730 --> 00:09:10,470
And what we can do with
this is we can pass it

270
00:09:10,470 --> 00:09:12,660
whatever component we
want to get the props for.

271
00:09:12,660 --> 00:09:13,500
And we're just gonna add that

272
00:09:13,500 --> 00:09:16,230
onto our component props
for our actual button.

273
00:09:16,230 --> 00:09:19,410
So here inside of some angle
brackets, this takes a generic

274
00:09:19,410 --> 00:09:21,960
I can pass in any element inside of HTML.

275
00:09:21,960 --> 00:09:23,340
You can see I have a massive list here.

276
00:09:23,340 --> 00:09:24,810
So for example, I could do a div.

277
00:09:24,810 --> 00:09:26,940
In our case I want to use a button.

278
00:09:26,940 --> 00:09:28,290
And now if we give that a quick save

279
00:09:28,290 --> 00:09:31,260
our button props is containing
this outline custom code

280
00:09:31,260 --> 00:09:33,780
that we defined as well as all
of this React related stuff

281
00:09:33,780 --> 00:09:34,613
for our button.

282
00:09:34,613 --> 00:09:36,810
And if we go back into here,
we have no more errors.

283
00:09:36,810 --> 00:09:38,520
And also you'll notice I get auto complete

284
00:09:38,520 --> 00:09:40,830
for every single thing that
I can pass to a button.

285
00:09:40,830 --> 00:09:42,120
So every prop that is available

286
00:09:42,120 --> 00:09:44,970
on a normal HTML button
is available on here

287
00:09:44,970 --> 00:09:47,100
as well as the custom outline prop

288
00:09:47,100 --> 00:09:48,630
that I have defined myself.

289
00:09:48,630 --> 00:09:50,910
So this is really handy
because any HTML element

290
00:09:50,910 --> 00:09:52,500
that you want to be able
to add the props to,

291
00:09:52,500 --> 00:09:53,970
for example in this type of snare

292
00:09:53,970 --> 00:09:55,710
you can just pass it along additionally

293
00:09:55,710 --> 00:09:57,960
to the actual type you're
passing to your props.

294
00:09:57,960 --> 00:10:00,270
And if I did something wrong,
like I tried to do a div here

295
00:10:00,270 --> 00:10:01,710
I'm immediately getting an error here.

296
00:10:01,710 --> 00:10:03,630
It's gonna be probably
a very massive error.

297
00:10:03,630 --> 00:10:04,860
But essentially it's just saying that hey

298
00:10:04,860 --> 00:10:06,750
I'm trying to pass along
all these div types

299
00:10:06,750 --> 00:10:08,820
and they don't work
for the button element.

300
00:10:08,820 --> 00:10:10,140
And another really nice thing is

301
00:10:10,140 --> 00:10:11,070
that you can actually do this

302
00:10:11,070 --> 00:10:12,540
with custom components as well.

303
00:10:12,540 --> 00:10:15,030
For example, I could pass in
my child component in here

304
00:10:15,030 --> 00:10:17,883
and if I make sure that I
import that child component,

305
00:10:20,040 --> 00:10:23,400
we'll get child here from
there, just like that.

306
00:10:23,400 --> 00:10:24,327
And now if I just come into here

307
00:10:24,327 --> 00:10:26,550
and I make sure that this
says the type of our child

308
00:10:26,550 --> 00:10:27,960
'cause I wanna get the
actual type of that,

309
00:10:27,960 --> 00:10:30,300
now my button is expecting
everything that I can pass

310
00:10:30,300 --> 00:10:32,220
to my child, which is
right now just children.

311
00:10:32,220 --> 00:10:34,980
Let's change it to like name
of string, just like that.

312
00:10:34,980 --> 00:10:36,180
That's going to be fine.

313
00:10:37,140 --> 00:10:38,070
Change that to a name.

314
00:10:38,070 --> 00:10:38,903
There we go.

315
00:10:38,903 --> 00:10:40,440
So now inside my button component

316
00:10:40,440 --> 00:10:42,750
this is going to expect an
outline as well as a name.

317
00:10:42,750 --> 00:10:45,540
So now here you can see
that we have an outline

318
00:10:45,540 --> 00:10:48,000
and we also have a name that
we can pass along as well.

319
00:10:48,000 --> 00:10:49,626
And the only reason
I'm getting an error is

320
00:10:49,626 --> 00:10:50,459
'cause I have a child inside of there.

321
00:10:50,459 --> 00:10:51,570
If I remove that, you can see now

322
00:10:51,570 --> 00:10:53,160
we no longer get any errors.

323
00:10:53,160 --> 00:10:55,200
So you can use this to do HTML props

324
00:10:55,200 --> 00:10:57,360
or you can get the props of
any component that you want.

325
00:10:57,360 --> 00:10:59,640
It doesn't matter what that component is.

326
00:10:59,640 --> 00:11:01,440
This is really useful if for some reason

327
00:11:01,440 --> 00:11:03,480
the actual type is not being exported

328
00:11:03,480 --> 00:11:05,580
because I could just
export the type like this

329
00:11:05,580 --> 00:11:06,720
and I could use it like that.

330
00:11:06,720 --> 00:11:08,280
But a lot of times if
you're using a library

331
00:11:08,280 --> 00:11:11,010
maybe the types are not exported
for the actual components.

332
00:11:11,010 --> 00:11:12,480
So you can just write
your code just like this

333
00:11:12,480 --> 00:11:14,610
to get whatever types you
need for that component.

334
00:11:14,610 --> 00:11:15,780
And you can use this anywhere.

335
00:11:15,780 --> 00:11:17,670
It doesn't have to be
just for passing props

336
00:11:17,670 --> 00:11:18,540
to another component.

337
00:11:18,540 --> 00:11:20,540
You can use this type anywhere you want.