1
00:00:00,210 --> 00:00:01,650
- So, to get started with this project,

2
00:00:01,650 --> 00:00:04,470
I've just moved all the before
code into this after folder,

3
00:00:04,470 --> 00:00:06,450
so we have a place we can work with it.

4
00:00:06,450 --> 00:00:08,310
And as I mentioned,
since we're using vite,

5
00:00:08,310 --> 00:00:09,321
we could either look at the
documentation on everything

6
00:00:09,321 --> 00:00:10,154
we need to know about vite and TypeScript

7
00:00:10,154 --> 00:00:10,987
or sometimes the easier
path is just create

8
00:00:10,987 --> 00:00:11,820
a TypeScript project in
vite and then figure out

9
00:00:11,820 --> 00:00:12,653
what the differences
are between your project

10
00:00:12,653 --> 00:00:17,653
and that project.

11
00:00:20,490 --> 00:00:21,690
That's what I'm going to do.

12
00:00:21,690 --> 00:00:22,887
I'm just gonna create
a brand new tab here,

13
00:00:22,887 --> 00:00:25,700
and I'm gonna create vite
project in just a random folder.

14
00:00:25,700 --> 00:00:29,870
We'll say NPM create vite at latest.

15
00:00:29,870 --> 00:00:31,570
And it doesn't matter what
this folder is called,

16
00:00:31,570 --> 00:00:32,470
we'll just call it test.

17
00:00:32,470 --> 00:00:33,910
And that's going to
create that vite project.

18
00:00:33,910 --> 00:00:36,390
And we want this to be
a TypeScript project.

19
00:00:36,390 --> 00:00:38,790
Now, what we can do if we
just minimize this down,

20
00:00:38,790 --> 00:00:40,390
we don't even need that
terminal tab anymore.

21
00:00:40,390 --> 00:00:42,750
so we can look in this
folder and you can see, okay,

22
00:00:42,750 --> 00:00:44,790
we have this TS config that
we need to worry about.

23
00:00:44,790 --> 00:00:46,320
We have this package JSON,

24
00:00:46,320 --> 00:00:48,150
which is generally where most
of your changes are gonna be.

25
00:00:48,150 --> 00:00:50,030
So, we have this build
step, which is different,

26
00:00:50,030 --> 00:00:51,990
and TypeScript as a dev dependency.

27
00:00:51,990 --> 00:00:54,540
And we also have here
inside this source folder

28
00:00:54,540 --> 00:00:56,340
some different code inside of here.

29
00:00:56,340 --> 00:00:57,570
So, that's what I wanna make sure I add.

30
00:00:57,570 --> 00:00:59,010
I add this as a dev dependency,

31
00:00:59,010 --> 00:01:01,500
I change my build and I make
sure that I move all my code

32
00:01:01,500 --> 00:01:03,933
to the source folder and make
sure I deal with this JSON.

33
00:01:03,933 --> 00:01:06,120
Now, we don't have to move
the code to the source folder,

34
00:01:06,120 --> 00:01:08,730
but I generally find it easier
to work with a source folder,

35
00:01:08,730 --> 00:01:10,110
so that's what we're gonna do.

36
00:01:10,110 --> 00:01:12,600
So, first off, we're gonna
create a source folder.

37
00:01:12,600 --> 00:01:14,160
I'm gonna take my
script, move it in there,

38
00:01:14,160 --> 00:01:15,101
take my styles, move it in there,

39
00:01:15,101 --> 00:01:17,010
and this minesweeper file
and move it in there.

40
00:01:17,010 --> 00:01:18,970
And now, obviously, we have a
bunch of errors on our page.

41
00:01:18,970 --> 00:01:20,880
That's perfectly okay for now.

42
00:01:20,880 --> 00:01:24,270
Then, what we wanna do is we
wanna copy over our TS config

43
00:01:24,270 --> 00:01:26,710
into this after folder, so we
have the exact same config.

44
00:01:26,710 --> 00:01:28,330
We could make changes here if we need it,

45
00:01:28,330 --> 00:01:30,360
but for our purposes
we're just gonna leave it

46
00:01:30,360 --> 00:01:31,520
completely as is.

47
00:01:31,520 --> 00:01:34,373
Then what we want to do is we
want to install TypeScript,

48
00:01:34,373 --> 00:01:39,373
so we can say NPMI save dev TypeScript,

49
00:01:39,972 --> 00:01:40,805
there we go.

50
00:01:40,805 --> 00:01:42,560
That will we have TypeScript
inside of our project.

51
00:01:42,560 --> 00:01:44,220
If we look at our package JSON,

52
00:01:44,220 --> 00:01:47,060
we can now see that we have
TypeScript as a dev dependency.

53
00:01:47,060 --> 00:01:48,893
And finally, we just wanna
make sure our build command

54
00:01:48,893 --> 00:01:50,310
looks exactly the same.

55
00:01:50,310 --> 00:01:52,420
So, we'll just copy over
this just like that,

56
00:01:52,420 --> 00:01:54,720
and that should be all we
need to do to actually get

57
00:01:54,720 --> 00:01:57,020
TypeScript working inside of our project.

58
00:01:57,020 --> 00:02:00,150
And the next step is to get
our project working again,

59
00:02:00,150 --> 00:02:02,370
since we moved all these
files to this source folder

60
00:02:02,370 --> 00:02:03,960
inside of here, we need to make sure

61
00:02:03,960 --> 00:02:06,170
that we reference them
from this source folder.

62
00:02:06,170 --> 00:02:08,550
There you go, you can
now see we have our code

63
00:02:08,550 --> 00:02:10,230
and it's still working, which is great.

64
00:02:10,230 --> 00:02:12,000
If you convert over to TypeScript,

65
00:02:12,000 --> 00:02:13,710
all your codes should still work

66
00:02:13,710 --> 00:02:15,810
because obviously,
converting to TypeScript

67
00:02:15,810 --> 00:02:17,520
doesn't actually change the functionality

68
00:02:17,520 --> 00:02:19,170
or implementation of your code.

69
00:02:19,170 --> 00:02:20,910
The first step I recommend
doing is once you have

70
00:02:20,910 --> 00:02:23,040
everything converted over,
so your project is using

71
00:02:23,040 --> 00:02:25,140
and compiling TypeScript,
make sure that everything

72
00:02:25,140 --> 00:02:26,820
still works, and in our case,

73
00:02:26,820 --> 00:02:28,380
as you can see, everything
is still working,

74
00:02:28,380 --> 00:02:29,747
which is a really good sign.

75
00:02:29,747 --> 00:02:31,680
And the next step is to rename things

76
00:02:31,680 --> 00:02:33,000
to actually use TypeScript.

77
00:02:33,000 --> 00:02:34,800
And you can either use
the top down approach

78
00:02:34,800 --> 00:02:36,570
or the bottom up approach.

79
00:02:36,570 --> 00:02:38,730
Generally, I like to use
the bottom up approach

80
00:02:38,730 --> 00:02:41,040
because it's a lot easier to
type some of these simpler,

81
00:02:41,040 --> 00:02:43,440
smaller functions, but
it's entirely up to you.

82
00:02:43,440 --> 00:02:45,870
In our case, I'm going to
rename this Minesweeper file

83
00:02:45,870 --> 00:02:47,580
because this is the one that has like,

84
00:02:47,580 --> 00:02:50,610
most of our small functions and
all of our Minesweeper stuff

85
00:02:50,610 --> 00:02:52,860
is dependent on by this file right here.

86
00:02:52,860 --> 00:02:53,697
So, that's what I'm gonna do,

87
00:02:53,697 --> 00:02:56,010
and I'm gonna rename this Minesweeper file

88
00:02:56,010 --> 00:02:57,750
to add TS at the end of it.

89
00:02:57,750 --> 00:02:59,220
And that's how you go
about adding typescripts.

90
00:02:59,220 --> 00:03:01,160
You just rename your
JavaScript files one by one,

91
00:03:01,160 --> 00:03:03,840
to be TypeScript, 'cause by default,

92
00:03:03,840 --> 00:03:05,970
we're not type checking any
of these JavaScript files.

93
00:03:05,970 --> 00:03:07,287
So, everything is working just fine.

94
00:03:07,287 --> 00:03:09,480
And now, we converted
this over to TypeScript.

95
00:03:09,480 --> 00:03:11,340
We're getting tons of
errors inside of here

96
00:03:11,340 --> 00:03:13,560
and also we need to make
sure up here this import

97
00:03:13,560 --> 00:03:15,900
says .ts instead of .js.

98
00:03:15,900 --> 00:03:17,280
So, our code should still work.

99
00:03:17,280 --> 00:03:18,630
As you can see, everything
is still working

100
00:03:18,630 --> 00:03:19,590
just as it did before.

101
00:03:19,590 --> 00:03:21,923
That's a good sign just by
changing things to be .ts,

102
00:03:21,923 --> 00:03:23,821
nothing in your code should change.

103
00:03:23,821 --> 00:03:26,730
Now, we have tons of errors
because we don't have types

104
00:03:26,730 --> 00:03:29,910
on pretty much anything, that's
going to be what we work on.

105
00:03:29,910 --> 00:03:31,410
And first, I'm gonna work on our imports

106
00:03:31,410 --> 00:03:33,270
'cause as you can see
we're importing load dash,

107
00:03:33,270 --> 00:03:35,130
but we need to make sure
we have the types for that.

108
00:03:35,130 --> 00:03:36,630
So, I'm just going to import the types

109
00:03:36,630 --> 00:03:38,160
for low dash really quick.

110
00:03:38,160 --> 00:03:39,333
So we can just do that.

111
00:03:40,290 --> 00:03:41,160
That shouldn't take too long.

112
00:03:41,160 --> 00:03:42,893
And then, we'll rerun our dev server.

113
00:03:42,893 --> 00:03:45,540
As you can see that at
least gave us our types

114
00:03:45,540 --> 00:03:46,923
and got rid of that one error.

115
00:03:46,923 --> 00:03:49,050
Now, the next step is
going to be going ahead

116
00:03:49,050 --> 00:03:50,635
and doing this from
the bottom up approach.

117
00:03:50,635 --> 00:03:52,440
So, what I like to do is I like to look at

118
00:03:52,440 --> 00:03:54,755
the functions that have
no dependencies at all.

119
00:03:54,755 --> 00:03:56,430
This function has dependencies.

120
00:03:56,430 --> 00:03:58,440
You can see it's calling
this position match function.

121
00:03:58,440 --> 00:03:59,940
So let's just go ahead
and look at this function

122
00:03:59,940 --> 00:04:00,990
and see what it does.

123
00:04:00,990 --> 00:04:03,600
As you can see, this is a
relatively simple function.

124
00:04:03,600 --> 00:04:05,640
We have an A variable with an X property,

125
00:04:05,640 --> 00:04:07,050
a B variable with an X property,

126
00:04:07,050 --> 00:04:09,066
A variable with Y and a B variable with Y.

127
00:04:09,066 --> 00:04:12,184
So, both of these properties
have an X and a Y coordinate.

128
00:04:12,184 --> 00:04:14,550
And probably what we want to do is create

129
00:04:14,550 --> 00:04:16,320
a separate type for this
because if you kind of look at

130
00:04:16,320 --> 00:04:17,760
the rest of this code,
you can see here's X

131
00:04:17,760 --> 00:04:18,960
and Y being used.

132
00:04:18,960 --> 00:04:20,250
You can see there's lots of other places

133
00:04:20,250 --> 00:04:21,870
where we're using X and Y.

134
00:04:21,870 --> 00:04:23,607
So, it kind of makes sense
that this should be a type

135
00:04:23,607 --> 00:04:25,350
and I like to put my types at the top.

136
00:04:25,350 --> 00:04:27,060
So, we're gonna come up here,

137
00:04:27,060 --> 00:04:28,173
we're gonna create a type,

138
00:04:28,173 --> 00:04:30,210
we're gonna call it position.

139
00:04:30,210 --> 00:04:32,400
We're gonna say it's an X
and it's going to be a Y.

140
00:04:32,400 --> 00:04:34,860
And right now I don't know
what these X and Y's are

141
00:04:34,860 --> 00:04:35,790
just by looking at my code.

142
00:04:35,790 --> 00:04:37,530
So, I'm just gonna type them as any.

143
00:04:37,530 --> 00:04:38,730
This is kind of like the first step.

144
00:04:38,730 --> 00:04:40,277
A lot of times you don't
know what things are,

145
00:04:40,277 --> 00:04:42,480
so you just type them
as any to get started

146
00:04:42,480 --> 00:04:44,536
and then you'll make it
more specific as you go.

147
00:04:44,536 --> 00:04:48,630
So, we'll come down here and
we'll add that in as our type.

148
00:04:48,630 --> 00:04:50,670
So, A is gonna be this position

149
00:04:50,670 --> 00:04:52,045
and B is gonna be this position

150
00:04:52,045 --> 00:04:54,390
because right now I don't
know what this equals

151
00:04:54,390 --> 00:04:57,060
is actually comparing for
these different things.

152
00:04:57,060 --> 00:04:58,800
Now, if I want to try to
figure out what that does,

153
00:04:58,800 --> 00:05:00,600
a good idea would be to
look at the rest of my code

154
00:05:00,600 --> 00:05:01,950
and kind of see how this is used.

155
00:05:01,950 --> 00:05:03,750
So, if we go back to
where this position match

156
00:05:03,750 --> 00:05:05,970
was being used, you can
see it's being used here

157
00:05:05,970 --> 00:05:07,352
with some X and Y information.

158
00:05:07,352 --> 00:05:10,200
And you'll notice really
importantly that I actually get

159
00:05:10,200 --> 00:05:11,910
some information about what X and Y are.

160
00:05:11,910 --> 00:05:15,247
As you can see they're the
second property to calling.map.

161
00:05:15,247 --> 00:05:17,400
If I call this on an array,

162
00:05:17,400 --> 00:05:19,440
the second property is always the index,

163
00:05:19,440 --> 00:05:20,440
which is a number.

164
00:05:20,440 --> 00:05:23,860
So now I know that X and Y are
probably numbers just because

165
00:05:23,860 --> 00:05:26,100
I assume that this row and this board

166
00:05:26,100 --> 00:05:27,892
probably refer to an array.

167
00:05:27,892 --> 00:05:30,060
So what I can do is just
assume they're numbers.

168
00:05:30,060 --> 00:05:30,930
Also, same thing here,

169
00:05:30,930 --> 00:05:32,813
I'm using them inside of
like this array syntax.

170
00:05:32,813 --> 00:05:35,291
So it's a really good indicator
to me that these are numbers

171
00:05:35,291 --> 00:05:36,980
and if you wrote this code yourself,

172
00:05:36,980 --> 00:05:40,009
you'd probably know that
these yes should be numbers.

173
00:05:40,009 --> 00:05:41,780
So let's go ahead and make these numbers.

174
00:05:41,780 --> 00:05:43,444
And now what we can do is again,

175
00:05:43,444 --> 00:05:45,510
we can keep going from the bottom up

176
00:05:45,510 --> 00:05:47,520
and look at some of these
other smaller functions.

177
00:05:47,520 --> 00:05:48,353
For example,

178
00:05:48,353 --> 00:05:50,370
let's look at this check lose function.

179
00:05:50,370 --> 00:05:52,980
This takes in a board
property and what it does

180
00:05:52,980 --> 00:05:54,856
is it has a board that it's
going to do some looping over.

181
00:05:54,856 --> 00:05:57,390
So this is an array and
it gives us another array

182
00:05:57,390 --> 00:05:58,740
which has this tile information.

183
00:05:58,740 --> 00:06:00,460
So it kind of has a lot
of stuff going on in it.

184
00:06:00,460 --> 00:06:02,640
So let's figure out where this
function's used to figure out

185
00:06:02,640 --> 00:06:04,820
what this board property
actually refers to.

186
00:06:04,820 --> 00:06:06,180
So we'll go to check loose,

187
00:06:06,180 --> 00:06:07,440
you can just do that control click

188
00:06:07,440 --> 00:06:08,910
and then double click
in here to go directly

189
00:06:08,910 --> 00:06:09,950
to where it's at.

190
00:06:09,950 --> 00:06:10,783
In our case,

191
00:06:10,783 --> 00:06:12,540
we wanna figure out where
it's actually being used at.

192
00:06:12,540 --> 00:06:14,283
And as you can see, it's being
used inside this script file.

193
00:06:14,283 --> 00:06:16,710
So maybe this isn't a good
choice because right now we're

194
00:06:16,710 --> 00:06:19,170
focusing more on our mine sweeper file.

195
00:06:19,170 --> 00:06:21,240
So we're gonna skip that
one for now and move on to a

196
00:06:21,240 --> 00:06:22,650
different function maybe.

197
00:06:22,650 --> 00:06:25,470
Let's try and go ahead and
we know that position match

198
00:06:25,470 --> 00:06:27,200
is fine so we can find places
where this is being used.

199
00:06:27,200 --> 00:06:30,480
As you can see it's being used
up here and this create board

200
00:06:30,480 --> 00:06:34,431
function as well as being used
inside of this tile function.

201
00:06:34,431 --> 00:06:35,910
So let's just go to the very top

202
00:06:35,910 --> 00:06:37,470
at the create board function.

203
00:06:37,470 --> 00:06:39,720
So we have here this create board.

204
00:06:39,720 --> 00:06:41,160
You can see it takes in a board size

205
00:06:41,160 --> 00:06:42,773
and it takes in mine positions

206
00:06:42,773 --> 00:06:44,880
so we can kind of figure
out exactly what these

207
00:06:44,880 --> 00:06:46,123
functions return for us.

208
00:06:46,123 --> 00:06:47,764
If we look at times here,

209
00:06:47,764 --> 00:06:50,940
you can see that times expects
us to pass in a function

210
00:06:50,940 --> 00:06:52,890
as the first property
and the second property

211
00:06:52,890 --> 00:06:54,421
expects us to pass in a number.

212
00:06:54,421 --> 00:06:56,808
So we know that this board
size is probably a number.

213
00:06:56,808 --> 00:06:59,250
And the really nice
thing about using VS code

214
00:06:59,250 --> 00:07:01,320
and TypeScript is if
you hit control period

215
00:07:01,320 --> 00:07:03,090
or on a Mac it be command period,

216
00:07:03,090 --> 00:07:04,740
you can see you get some quick fixes

217
00:07:04,740 --> 00:07:07,051
and you can actually infer
the types from the usage

218
00:07:07,051 --> 00:07:09,060
And TypeScript will look
at your code and say,

219
00:07:09,060 --> 00:07:10,830
okay, based on how you're using this,

220
00:07:10,830 --> 00:07:12,870
this is what I think
the type is going to be.

221
00:07:12,870 --> 00:07:13,770
So if we click on that,

222
00:07:13,770 --> 00:07:15,900
you can see it's inferring these
different parameters for us

223
00:07:15,900 --> 00:07:16,740
and it's saying, "Hey, you know what?

224
00:07:16,740 --> 00:07:18,480
This board is probably a number

225
00:07:18,480 --> 00:07:20,190
based on how you're using it."

226
00:07:20,190 --> 00:07:22,380
And it's saying this mine
position is essentially

227
00:07:22,380 --> 00:07:24,934
going to be an array with
this position thing going on.

228
00:07:24,934 --> 00:07:27,816
It doesn't quite know what
this mine position is.

229
00:07:27,816 --> 00:07:30,180
Well we can figure out a
little bit better what mine

230
00:07:30,180 --> 00:07:33,300
positions is because right
now where mine positions

231
00:07:33,300 --> 00:07:34,133
is being used,

232
00:07:34,133 --> 00:07:36,150
we can see it's an array
because it's using that dot sum

233
00:07:36,150 --> 00:07:38,790
property which comes from
arrays and it's calling position

234
00:07:38,790 --> 00:07:40,530
match and it's using the bind syntax,

235
00:07:40,530 --> 00:07:41,820
which is a little bit confusing.

236
00:07:41,820 --> 00:07:44,310
So I'm gonna actually rewrite
this so it doesn't use bind

237
00:07:44,310 --> 00:07:45,506
just so we can see exactly what this does.

238
00:07:45,506 --> 00:07:47,404
So we have our position
that we're getting.

239
00:07:47,404 --> 00:07:49,770
So this is like our mine position.

240
00:07:49,770 --> 00:07:50,603
There we go.

241
00:07:51,812 --> 00:07:54,010
And then we're calling position match,

242
00:07:54,010 --> 00:07:57,150
make sure we return this
position match and the first

243
00:07:57,150 --> 00:08:00,240
property we're passing into
this is going to be our mine

244
00:08:00,240 --> 00:08:03,640
position and then we're passing
this X Y property into it

245
00:08:03,640 --> 00:08:05,760
and make sure close everything off.

246
00:08:05,760 --> 00:08:06,593
There we go.

247
00:08:06,593 --> 00:08:08,790
So this is what this looks like for us.

248
00:08:08,790 --> 00:08:10,470
We're passing this mine position

249
00:08:10,470 --> 00:08:12,240
into this position match function.

250
00:08:12,240 --> 00:08:14,550
We know position X accepts two positions.

251
00:08:14,550 --> 00:08:17,867
So our mine position must
just be an array of positions.

252
00:08:17,867 --> 00:08:20,430
So we can say that this
is a position array

253
00:08:20,430 --> 00:08:22,410
and as you can see, that is working fine.

254
00:08:22,410 --> 00:08:23,610
And again, if you weren't quite sure

255
00:08:23,610 --> 00:08:24,750
what this mine position was,

256
00:08:24,750 --> 00:08:26,040
you could go to this create board,

257
00:08:26,040 --> 00:08:27,960
which is used inside this script here.

258
00:08:27,960 --> 00:08:29,810
We could kind of look at where
it's called and we could see,

259
00:08:29,810 --> 00:08:31,460
okay, it's calling get mind positions.

260
00:08:31,460 --> 00:08:34,050
And if we look into that you
can see it's just returning to

261
00:08:34,050 --> 00:08:36,600
us a bunch of different X and Y positions.

262
00:08:36,600 --> 00:08:38,850
You can see that that is
what this thing is doing

263
00:08:38,850 --> 00:08:40,050
if you need to go a little bit further.

264
00:08:40,050 --> 00:08:41,640
But just by looking at our code,

265
00:08:41,640 --> 00:08:42,990
we were able to determine essentially

266
00:08:42,990 --> 00:08:44,250
what this thing was doing.

267
00:08:44,250 --> 00:08:46,140
And when we rewrote this to not use bind,

268
00:08:46,140 --> 00:08:47,680
it was a little easier to understand.

269
00:08:47,680 --> 00:08:50,400
Now this create board function
is entirely typed force.

270
00:08:50,400 --> 00:08:51,900
We can minimize that to kind of know

271
00:08:51,900 --> 00:08:53,100
that we're done with that.

272
00:08:53,100 --> 00:08:55,650
Same thing down here where we
have that position matched,

273
00:08:55,650 --> 00:08:56,520
it's entirely typed.

274
00:08:56,520 --> 00:08:58,650
So let's minimize that
down so we know it's done.

275
00:08:58,650 --> 00:08:59,880
Now if we go back to create board,

276
00:08:59,880 --> 00:09:01,860
you'll notice we have
references to board everywhere

277
00:09:01,860 --> 00:09:04,020
and I assume that our
board is the same type

278
00:09:04,020 --> 00:09:06,080
as the thing that we
return from create board.

279
00:09:06,080 --> 00:09:07,680
Just by looking at my code,

280
00:09:07,680 --> 00:09:08,880
knowing how this code is written,

281
00:09:08,880 --> 00:09:10,002
I know that that is a fact.

282
00:09:10,002 --> 00:09:13,632
I know that this should probably
have a specific type to it.

283
00:09:13,632 --> 00:09:15,810
What we do, if we look
at this code real quick,

284
00:09:15,810 --> 00:09:18,000
you can see that our
board is represented by

285
00:09:18,000 --> 00:09:19,140
an array of arrays.

286
00:09:19,140 --> 00:09:20,640
That's what this double times is doing.

287
00:09:20,640 --> 00:09:22,050
It's returning to us an array of arrays.

288
00:09:22,050 --> 00:09:22,890
And as you can see,

289
00:09:22,890 --> 00:09:25,191
the actual inferred return
type is an array of arrays

290
00:09:25,191 --> 00:09:26,958
and each element in the array

291
00:09:26,958 --> 00:09:29,430
is an X and Y coordinate as well

292
00:09:29,430 --> 00:09:32,040
as a Boolean for if it's a
mine and a status a string.

293
00:09:32,040 --> 00:09:34,650
So we should probably
type out this information.

294
00:09:34,650 --> 00:09:36,843
So we need to type out what our board is.

295
00:09:37,920 --> 00:09:39,660
We also need to create
a type for the thing

296
00:09:39,660 --> 00:09:40,493
that's in our board,

297
00:09:40,493 --> 00:09:41,970
which in our case is called a tile.

298
00:09:41,970 --> 00:09:43,761
That's kind of the naming
we used in this code.

299
00:09:43,761 --> 00:09:46,410
So a tile here is this right here.

300
00:09:46,410 --> 00:09:47,700
It has an X and Y property,

301
00:09:47,700 --> 00:09:49,560
a mine Boolean and a status.

302
00:09:49,560 --> 00:09:51,840
So we know that it's going
to be an X and Y property

303
00:09:51,840 --> 00:09:52,890
just like our position.

304
00:09:52,890 --> 00:09:55,080
So it's actually going
to extend our position by

305
00:09:55,080 --> 00:09:56,380
intersecting these two types.

306
00:09:56,380 --> 00:09:59,111
So it's going to be a
position and something else.

307
00:09:59,111 --> 00:10:01,351
So we have mine, which is a Boolean,

308
00:10:01,351 --> 00:10:05,250
and we have a status and that status

309
00:10:05,250 --> 00:10:07,140
is going to be some type of string.

310
00:10:07,140 --> 00:10:08,040
Now if we look at this tile,

311
00:10:08,040 --> 00:10:09,060
you could see we have our position

312
00:10:09,060 --> 00:10:10,830
and then it's combining these together.

313
00:10:10,830 --> 00:10:12,507
And our board is just
going to be taking this

314
00:10:12,507 --> 00:10:14,940
and we want an array of arrays of these,

315
00:10:14,940 --> 00:10:16,689
essentially a matrix of
these different elements.

316
00:10:16,689 --> 00:10:20,430
Now I can specify that this is
going to return to us a board

317
00:10:20,430 --> 00:10:23,040
object and this is going
to help us in our code,

318
00:10:23,040 --> 00:10:25,320
because right now, it's
inferring the return type.

319
00:10:25,320 --> 00:10:26,153
As you can see,

320
00:10:26,153 --> 00:10:27,840
it's inferring this specific return type.

321
00:10:27,840 --> 00:10:29,350
I'm going to be explicit
in what this is returning

322
00:10:29,350 --> 00:10:31,980
just so that the rest of our code knows

323
00:10:31,980 --> 00:10:33,090
that this is returning a board

324
00:10:33,090 --> 00:10:34,590
and it'll help with
some of our type safety

325
00:10:34,590 --> 00:10:36,210
going down in the future.

326
00:10:36,210 --> 00:10:38,220
Now another thing to
look at is our statuses

327
00:10:38,220 --> 00:10:39,450
are not just a string.

328
00:10:39,450 --> 00:10:41,187
Instead they are one of
these four different types

329
00:10:41,187 --> 00:10:43,512
and this looks a lot like an e-num to you

330
00:10:43,512 --> 00:10:46,719
or maybe something like an
array of as const values.

331
00:10:46,719 --> 00:10:48,840
The reason that this
is written as an object

332
00:10:48,840 --> 00:10:50,730
is because I wanted to have auto complete

333
00:10:50,730 --> 00:10:52,230
when I wrote this code in JavaScript

334
00:10:52,230 --> 00:10:54,030
and to make sure that I had
everything set up correctly.

335
00:10:54,030 --> 00:10:56,547
The only way to do that is
to create an object with keys

336
00:10:56,547 --> 00:10:58,463
that link to different strings.

337
00:10:58,463 --> 00:10:59,640
But with TypeScript,

338
00:10:59,640 --> 00:11:01,740
I don't need to take this extra step,

339
00:11:01,740 --> 00:11:04,010
I can just use a type of tile statuses

340
00:11:04,010 --> 00:11:06,090
and it's going to do all this for me.

341
00:11:06,090 --> 00:11:07,320
So I can actually come up here,

342
00:11:07,320 --> 00:11:08,790
I'm gonna create an array.

343
00:11:08,790 --> 00:11:09,766
So we'll say const,

344
00:11:09,766 --> 00:11:12,810
tile statuses and instead
of doing an object,

345
00:11:12,810 --> 00:11:14,250
I'm gonna convert this to an array

346
00:11:14,250 --> 00:11:15,330
of these different values.

347
00:11:15,330 --> 00:11:16,890
So we're gonna have hidden,

348
00:11:16,890 --> 00:11:17,880
we're gonna have mine,

349
00:11:17,880 --> 00:11:19,080
we're gonna have number,

350
00:11:20,490 --> 00:11:22,260
and we're gonna have marked.

351
00:11:22,260 --> 00:11:24,090
Then what I'm gonna do
is I'm gonna export this

352
00:11:24,090 --> 00:11:26,035
'cause it looks like
this is exported as well.

353
00:11:26,035 --> 00:11:29,160
And then I'm gonna set
this as a const variable

354
00:11:29,160 --> 00:11:31,140
'cause I can use that to
actually create a type

355
00:11:31,140 --> 00:11:32,584
which is going to be my status.

356
00:11:32,584 --> 00:11:36,390
So we can say tile status is equal to

357
00:11:36,390 --> 00:11:39,517
and it's going to take getting
the type of my tile status.

358
00:11:39,517 --> 00:11:41,836
I want to get the number
properties from that.

359
00:11:41,836 --> 00:11:42,900
As you can see,

360
00:11:42,900 --> 00:11:44,789
that gives me a union of all those types

361
00:11:44,789 --> 00:11:48,076
and now I can set my status
to that union right here.

362
00:11:48,076 --> 00:11:50,640
So this is a little bit
cleaner for me to work with

363
00:11:50,640 --> 00:11:52,770
because now I get this auto
complete automatically.

364
00:11:52,770 --> 00:11:53,790
For example down here,

365
00:11:53,790 --> 00:11:55,740
instead of saying tile status.hidden,

366
00:11:55,740 --> 00:11:57,450
I can just type in hidden and you can see

367
00:11:57,450 --> 00:11:59,010
I actually should be getting auto complete

368
00:11:59,010 --> 00:12:00,793
for that if I come in here hidden.

369
00:12:00,793 --> 00:12:01,830
There we go.

370
00:12:01,830 --> 00:12:02,863
That's working just fine.

371
00:12:02,863 --> 00:12:04,560
Now if I move on to the next functions,

372
00:12:04,560 --> 00:12:06,000
you'll really see this in work.

373
00:12:06,000 --> 00:12:07,920
So you can see here we have
our markeds tiles count.

374
00:12:07,920 --> 00:12:09,930
It's taking in a board so we can say that

375
00:12:09,930 --> 00:12:11,040
that is a board type.

376
00:12:11,040 --> 00:12:13,590
And now here, we can say
that this is a markeds tile

377
00:12:13,590 --> 00:12:15,600
and we get perfect auto complete for that.

378
00:12:15,600 --> 00:12:18,292
Same thing here, we have
a board being passed in

379
00:12:18,292 --> 00:12:20,790
and this right here is a position

380
00:12:20,790 --> 00:12:22,863
relatively straightforward based
on the types we've created.

381
00:12:22,863 --> 00:12:26,700
This is going to be a hidden
one and this one right here

382
00:12:26,700 --> 00:12:28,353
is going to be marked.

383
00:12:30,390 --> 00:12:31,410
There we go.

384
00:12:31,410 --> 00:12:33,090
And one thing that we could
do to maybe clean this up a

385
00:12:33,090 --> 00:12:34,770
little bit is I can
highlight all instances

386
00:12:34,770 --> 00:12:35,940
of tile status.marked,

387
00:12:35,940 --> 00:12:37,440
just hit Ctrl D a bunch.

388
00:12:37,440 --> 00:12:39,480
That'll select all of
them and I can change that

389
00:12:39,480 --> 00:12:40,620
to the text marked.

390
00:12:40,620 --> 00:12:41,711
Same thing here with hidden.

391
00:12:41,711 --> 00:12:44,040
Let's just change all those to hidden.

392
00:12:44,040 --> 00:12:45,780
That'll clean that up a little bit for us,

393
00:12:45,780 --> 00:12:46,804
which is really nice.

394
00:12:46,804 --> 00:12:48,630
So now if we look this mark tile

395
00:12:48,630 --> 00:12:50,370
is actually completely type safe,

396
00:12:50,370 --> 00:12:51,300
which is good.

397
00:12:51,300 --> 00:12:53,850
Now the one thing is this
replaced tile isn't type safe yet.

398
00:12:53,850 --> 00:12:56,370
So this may throw some errors
when we start to add types

399
00:12:56,370 --> 00:12:57,203
to this function.

400
00:12:57,203 --> 00:12:58,220
Let's look at this.

401
00:12:58,220 --> 00:12:59,585
We have our board here,

402
00:12:59,585 --> 00:13:00,990
we have our position.

403
00:13:00,990 --> 00:13:02,940
The nice thing is since these
had good variable names,

404
00:13:02,940 --> 00:13:04,620
it's pretty easy for me
to know what these are.

405
00:13:04,620 --> 00:13:05,490
And if I really needed to,

406
00:13:05,490 --> 00:13:07,590
I could look in the code to
make sure they are the types

407
00:13:07,590 --> 00:13:08,822
I'm actually typing them as.

408
00:13:08,822 --> 00:13:11,209
And this seems to be a
tile based on the name.

409
00:13:11,209 --> 00:13:12,420
So we're gonna go with that.

410
00:13:12,420 --> 00:13:13,470
And it looks like everything in here

411
00:13:13,470 --> 00:13:14,520
is working perfectly fine.

412
00:13:14,520 --> 00:13:15,353
So that's good.

413
00:13:15,353 --> 00:13:17,174
Which means we know that
this is type safe as well.

414
00:13:17,174 --> 00:13:20,031
Now we have our reveal tile
which looks to be taken

415
00:13:20,031 --> 00:13:23,280
in a board and a position.

416
00:13:23,280 --> 00:13:26,250
So that's pretty straightforward for us.

417
00:13:26,250 --> 00:13:29,160
And now here, you can see we
have this tile status as mine.

418
00:13:29,160 --> 00:13:31,230
I can just replace this
with the string mine again,

419
00:13:31,230 --> 00:13:32,190
which is great.

420
00:13:32,190 --> 00:13:34,650
Here I can replace this
with the string of number,

421
00:13:34,650 --> 00:13:35,550
which is great.

422
00:13:35,550 --> 00:13:37,110
But now I'm running into a new error.

423
00:13:37,110 --> 00:13:39,213
I have this adjacent mines count

424
00:13:39,213 --> 00:13:42,480
that I'm trying to add
onto my tile object.

425
00:13:42,480 --> 00:13:44,640
I'm trying to add a
property onto my tile object

426
00:13:44,640 --> 00:13:47,040
and this means that most likely my tile

427
00:13:47,040 --> 00:13:49,230
should have this property
but it should be optional

428
00:13:49,230 --> 00:13:50,760
because when I originally create them

429
00:13:50,760 --> 00:13:52,260
in this create board function,

430
00:13:52,260 --> 00:13:53,792
you can see they don't have that property

431
00:13:53,792 --> 00:13:56,587
but it looks like sometimes
they can have that property.

432
00:13:56,587 --> 00:13:58,912
I'm gonna add that to my tile type here.

433
00:13:58,912 --> 00:14:00,768
I'm gonna make sure it's optional.

434
00:14:00,768 --> 00:14:02,970
And this is a number based on the code

435
00:14:02,970 --> 00:14:03,900
that we were looking at.

436
00:14:03,900 --> 00:14:05,483
If we scroll down you can
see that that is working.

437
00:14:05,483 --> 00:14:07,500
Now there's no more errors inside of here,

438
00:14:07,500 --> 00:14:08,747
but I do have an error on this.

439
00:14:08,747 --> 00:14:11,130
The reason for this is
because reveal title

440
00:14:11,130 --> 00:14:13,115
is actually a recursive
function that calls itself

441
00:14:13,115 --> 00:14:14,940
and returns itself.

442
00:14:14,940 --> 00:14:17,338
So TypeScript can't infer
the type of this function

443
00:14:17,338 --> 00:14:19,418
'cause it can't infer a
function that calls itself

444
00:14:19,418 --> 00:14:20,445
and returns itself.

445
00:14:20,445 --> 00:14:21,618
As you can see here,

446
00:14:21,618 --> 00:14:24,193
we are returning the
results of this reveal tile

447
00:14:24,193 --> 00:14:25,850
as part of our function.

448
00:14:25,850 --> 00:14:26,683
If we look here,

449
00:14:26,683 --> 00:14:28,260
you can see that in all of the instances

450
00:14:28,260 --> 00:14:29,093
where we're returning,

451
00:14:29,093 --> 00:14:30,454
this is returning a new board.

452
00:14:30,454 --> 00:14:31,883
Here, this is returning replace tile

453
00:14:31,883 --> 00:14:33,782
which returns a tile array of arrays,

454
00:14:33,782 --> 00:14:36,299
which is essentially a board
here we're returning our board

455
00:14:36,299 --> 00:14:39,420
so we know overall this is
just returning to us a board.

456
00:14:39,420 --> 00:14:41,153
So we can make that right there.

457
00:14:41,153 --> 00:14:43,200
That looks like that is working.

458
00:14:43,200 --> 00:14:44,310
Here we're getting a board.

459
00:14:44,310 --> 00:14:48,540
So we can just manually type
that and change this to number.

460
00:14:48,540 --> 00:14:50,400
So this string is actually working.

461
00:14:50,400 --> 00:14:51,521
Here same exact thing.

462
00:14:51,521 --> 00:14:55,323
This is a board and this is
going to be that mine type.

463
00:14:56,430 --> 00:15:00,150
And then finally we have a
board followed by some X and Ys

464
00:15:00,150 --> 00:15:01,650
which are gonna be a position

465
00:15:01,650 --> 00:15:02,945
and it looks like no error showed up.

466
00:15:02,945 --> 00:15:04,950
The really great thing
is about TypeScript,

467
00:15:04,950 --> 00:15:06,615
especially if you do
the bottom up approach

468
00:15:06,615 --> 00:15:08,876
is that the more of your
code that becomes typed,

469
00:15:08,876 --> 00:15:11,070
the easier it is to write
the rest of your code.

470
00:15:11,070 --> 00:15:12,660
Because this was a little bit tricky,

471
00:15:12,660 --> 00:15:13,650
there was quite a few different things

472
00:15:13,650 --> 00:15:14,760
we had to change inside of here.

473
00:15:14,760 --> 00:15:16,170
But now you'll see that everything in here

474
00:15:16,170 --> 00:15:17,370
is perfectly typed.

475
00:15:17,370 --> 00:15:20,002
We no longer have any more
errors inside of this file.

476
00:15:20,002 --> 00:15:23,490
And when I go over to
type my script.js file,

477
00:15:23,490 --> 00:15:25,484
you'll notice that that one's
actually relatively easy

478
00:15:25,484 --> 00:15:27,874
to change because of all
the changes we made in here.

479
00:15:27,874 --> 00:15:31,140
As you get further up the chain
in the bottom up approach,

480
00:15:31,140 --> 00:15:33,033
it becomes easier and
easier to type things.

481
00:15:33,033 --> 00:15:36,150
So let's go ahead and
change this to a .ts file

482
00:15:36,150 --> 00:15:38,910
and make sure that we
import here the .ts file

483
00:15:38,910 --> 00:15:40,434
so that we have our code still working.

484
00:15:40,434 --> 00:15:42,081
As you can see,
everything's still working.

485
00:15:42,081 --> 00:15:43,873
Generally I recommend
when you're typing things

486
00:15:43,873 --> 00:15:47,370
after you change like one
file or one set of code,

487
00:15:47,370 --> 00:15:49,260
make sure your entire project still works.

488
00:15:49,260 --> 00:15:51,030
If you have test, run those tests.

489
00:15:51,030 --> 00:15:53,174
If not, just manually check
your code to make sure.

490
00:15:53,174 --> 00:15:56,097
As you can see everything is
still working as I expect.

491
00:15:56,097 --> 00:15:57,720
Now let's go into this script file.

492
00:15:57,720 --> 00:15:59,640
You notice we have errors
absolutely everywhere

493
00:15:59,640 --> 00:16:00,990
so we need to go ahead and make sure

494
00:16:00,990 --> 00:16:02,183
we fix these different errors.

495
00:16:02,183 --> 00:16:05,550
So let's scroll on down here
away and we can see we have

496
00:16:05,550 --> 00:16:07,920
this board element is
either null or an element.

497
00:16:07,920 --> 00:16:09,720
And that's 'cause we're
using query selectors.

498
00:16:09,720 --> 00:16:11,580
I'm gonna make sure that
all these query selectors

499
00:16:11,580 --> 00:16:13,050
just have an exclamation point at the end

500
00:16:13,050 --> 00:16:15,090
to say that they're
always going to be there.

501
00:16:15,090 --> 00:16:17,169
That's because I know
that in my HTML file,

502
00:16:17,169 --> 00:16:20,097
you can see that these are
always going to be there.

503
00:16:20,097 --> 00:16:21,750
Now what I can do is I can determine

504
00:16:21,750 --> 00:16:22,830
what the type of these are.

505
00:16:22,830 --> 00:16:24,510
As you can see this div right here,

506
00:16:24,510 --> 00:16:25,560
we have a span right here.

507
00:16:25,560 --> 00:16:26,700
This is a div.

508
00:16:26,700 --> 00:16:30,660
So our board here is going
to be an HTML div element

509
00:16:30,660 --> 00:16:31,737
not dialogue element.

510
00:16:31,737 --> 00:16:32,738
There we go.

511
00:16:32,738 --> 00:16:34,380
Our mines left text.

512
00:16:34,380 --> 00:16:35,213
If we look at that,

513
00:16:35,213 --> 00:16:37,020
that is going to be a span.

514
00:16:37,020 --> 00:16:39,836
So we can come in here and say
that that is a span element.

515
00:16:39,836 --> 00:16:41,760
And then finally our subtext.

516
00:16:41,760 --> 00:16:44,040
If we look at the HTML file for that,

517
00:16:44,040 --> 00:16:45,660
you can see that that is a div.

518
00:16:45,660 --> 00:16:48,453
So we can mark this as a div as well.

519
00:16:49,380 --> 00:16:50,213
There we go.

520
00:16:50,213 --> 00:16:51,046
Now we have everything marked at least

521
00:16:51,046 --> 00:16:52,890
and that got rid of a lot
of our TypeScript error.

522
00:16:52,890 --> 00:16:54,780
For example, this render
function now no longer

523
00:16:54,780 --> 00:16:55,740
has any type errors in it,

524
00:16:55,740 --> 00:16:56,760
this one doesn't.

525
00:16:56,760 --> 00:16:58,260
But here we have tile two element.

526
00:16:58,260 --> 00:16:59,093
This is great.

527
00:16:59,093 --> 00:17:00,150
We already have a tile type.

528
00:17:00,150 --> 00:17:01,170
Let's just add that on there.

529
00:17:01,170 --> 00:17:02,545
We need to make sure
we import that though.

530
00:17:02,545 --> 00:17:05,340
So let's export the tile type from here

531
00:17:05,340 --> 00:17:07,810
and we'll import it right into here.

532
00:17:07,810 --> 00:17:08,849
There we go.

533
00:17:08,849 --> 00:17:11,190
Now we are getting a bunch
of different warnings

534
00:17:11,190 --> 00:17:12,510
but we can look at what these errors are

535
00:17:12,510 --> 00:17:13,710
and see what they need.

536
00:17:13,710 --> 00:17:15,930
So this one says, "Type
number is not assignable

537
00:17:15,930 --> 00:17:17,430
to type string."

538
00:17:17,430 --> 00:17:19,890
That makes sense 'cause
this dataset always expects

539
00:17:19,890 --> 00:17:21,009
a string or undefined.

540
00:17:21,009 --> 00:17:22,680
And X right here is a number.

541
00:17:22,680 --> 00:17:25,680
So we need to convert this to a string.

542
00:17:25,680 --> 00:17:26,513
There we go.

543
00:17:26,513 --> 00:17:28,740
So TypeScript is nice
'cause it lets us pick up on

544
00:17:28,740 --> 00:17:31,140
maybe potential subtle
bugs that would happen

545
00:17:31,140 --> 00:17:32,430
inside of our code.

546
00:17:32,430 --> 00:17:33,600
So this is going to be great.

547
00:17:33,600 --> 00:17:34,956
So now there's no more errors there.

548
00:17:34,956 --> 00:17:37,440
This text content here
is again getting an error

549
00:17:37,440 --> 00:17:39,630
because it's expecting a
string and we're passing it

550
00:17:39,630 --> 00:17:41,169
a number or a string.

551
00:17:41,169 --> 00:17:42,570
So you may think,

552
00:17:42,570 --> 00:17:44,860
well we'll just add .tostring
to the end of this one

553
00:17:44,860 --> 00:17:45,840
and that'll work.

554
00:17:45,840 --> 00:17:48,360
But we actually are not
going to have this work

555
00:17:48,360 --> 00:17:49,193
if we do that.

556
00:17:49,193 --> 00:17:50,026
And first of all,

557
00:17:50,026 --> 00:17:51,780
this is obviously undefined possibly.

558
00:17:51,780 --> 00:17:53,820
So we'll make sure that we
check to make sure it exists

559
00:17:53,820 --> 00:17:55,500
before we convert it to a string.

560
00:17:55,500 --> 00:17:56,700
So you may think this works,

561
00:17:56,700 --> 00:17:58,076
if this value is not undefined,

562
00:17:58,076 --> 00:18:00,090
it'll be converted to a string,

563
00:18:00,090 --> 00:18:01,830
otherwise it'll be an empty string.

564
00:18:01,830 --> 00:18:02,663
As you can see,

565
00:18:02,663 --> 00:18:03,496
our code looks like it's working,

566
00:18:03,496 --> 00:18:05,520
but when I click you
notice now it's populating

567
00:18:05,520 --> 00:18:07,609
a bunch of numbers zeros
instead of an empty string.

568
00:18:07,609 --> 00:18:09,316
And the reason that's happening here

569
00:18:09,316 --> 00:18:12,900
is because our adjacent
mine count is set to zero

570
00:18:12,900 --> 00:18:15,510
and this is just saying an or equals sign.

571
00:18:15,510 --> 00:18:16,721
So what we had before like this,

572
00:18:16,721 --> 00:18:18,840
if adjacent mine count was zero,

573
00:18:18,840 --> 00:18:20,120
it would use this empty string here,

574
00:18:20,120 --> 00:18:22,900
which we still want to make
sure we enforce that behavior.

575
00:18:22,900 --> 00:18:26,070
Now I wanna do essentially a
check to see if it's undefined

576
00:18:26,070 --> 00:18:28,470
or zero then use this empty string.

577
00:18:28,470 --> 00:18:29,696
Otherwise don't.

578
00:18:29,696 --> 00:18:34,320
So if the adjacent mine
count is actually there,

579
00:18:34,320 --> 00:18:35,840
we'll do a simple turnery.

580
00:18:35,840 --> 00:18:37,530
We can say that we want to take

581
00:18:37,530 --> 00:18:39,930
the tile.adjacent mine count

582
00:18:39,930 --> 00:18:41,689
and convert it to a string.

583
00:18:41,689 --> 00:18:43,680
Otherwise we're gonna fall back

584
00:18:43,680 --> 00:18:45,150
and we're gonna use that empty string.

585
00:18:45,150 --> 00:18:47,610
Now you can see when I click
all these are empty strings

586
00:18:47,610 --> 00:18:49,320
by default 'cause we're
just first doing a check

587
00:18:49,320 --> 00:18:52,050
where if it's zero or undefined
then we're gonna make sure

588
00:18:52,050 --> 00:18:54,311
we do an empty string instead.

589
00:18:54,311 --> 00:18:56,040
So this is an important thing to make sure

590
00:18:56,040 --> 00:18:56,910
you're watching it for.

591
00:18:56,910 --> 00:19:00,150
Sometimes fixing a type error
may accidentally introduce

592
00:19:00,150 --> 00:19:02,220
a bug if your code
wasn't written super well

593
00:19:02,220 --> 00:19:04,140
in the first place or
maybe you didn't understand

594
00:19:04,140 --> 00:19:05,370
what the code was doing.

595
00:19:05,370 --> 00:19:06,300
Now if we go down a little further,

596
00:19:06,300 --> 00:19:08,940
we get to some of the more
complicated parts of converting

597
00:19:08,940 --> 00:19:11,077
this over to TypeScript just
because of how TypeScript works

598
00:19:11,077 --> 00:19:12,390
with the dom.

599
00:19:12,390 --> 00:19:13,680
You'll see here we're getting some errors.

600
00:19:13,680 --> 00:19:14,640
If I hover over this,

601
00:19:14,640 --> 00:19:15,954
it says property matches does not exist

602
00:19:15,954 --> 00:19:17,760
on type event target

603
00:19:17,760 --> 00:19:20,460
and here the event is also possibly null.

604
00:19:20,460 --> 00:19:22,590
So I have a few different problems here.

605
00:19:22,590 --> 00:19:24,291
First of all, my target
is set to event target,

606
00:19:24,291 --> 00:19:25,848
which is a super generic type.

607
00:19:25,848 --> 00:19:30,030
I know for a fact that when
I click my event target here

608
00:19:30,030 --> 00:19:32,333
is going to be equal to
some type of HTML element,

609
00:19:32,333 --> 00:19:34,720
but I should probably check
to make sure that's the case.

610
00:19:34,720 --> 00:19:37,200
So what I can do is use
that type and narrowing

611
00:19:37,200 --> 00:19:38,430
way we've talked about.

612
00:19:38,430 --> 00:19:42,637
So I can say E.target
instance of HTML element.

613
00:19:42,637 --> 00:19:45,450
I can have that as one of my
checks and I can essentially

614
00:19:45,450 --> 00:19:48,995
say if this is not an
instance of an HTML element

615
00:19:48,995 --> 00:19:52,553
or if it does not match this data status,

616
00:19:52,553 --> 00:19:55,380
then I can do a return right here.

617
00:19:55,380 --> 00:19:57,719
So this first line is
just a type narrowing

618
00:19:57,719 --> 00:19:59,047
that's essentially saying,

619
00:19:59,047 --> 00:20:01,283
"Hey is this thing an HTML element?"

620
00:20:01,283 --> 00:20:03,990
If it's not return and don't do anything,

621
00:20:03,990 --> 00:20:05,190
but if it is,

622
00:20:05,190 --> 00:20:07,140
then go a step further and check to see

623
00:20:07,140 --> 00:20:08,850
if it matches this particular thing.

624
00:20:08,850 --> 00:20:11,220
And now you can see when I
hover target it has the correct

625
00:20:11,220 --> 00:20:13,440
type of HTML element
'cause I did this type card

626
00:20:13,440 --> 00:20:15,807
before I went any further
but I'm still getting errors.

627
00:20:15,807 --> 00:20:16,877
As you can see here,

628
00:20:16,877 --> 00:20:21,080
this string here for our X
could be a string or undefined.

629
00:20:21,080 --> 00:20:23,469
We need to make sure we
check for that as well.

630
00:20:23,469 --> 00:20:25,260
What I probably wanna do is add

631
00:20:25,260 --> 00:20:26,700
some additional checks into here

632
00:20:26,700 --> 00:20:31,560
to see if our target.dataset.X
is equal to null

633
00:20:31,560 --> 00:20:35,370
or if the exact same thing
is true for our Y property.

634
00:20:35,370 --> 00:20:36,960
That'll just make sure if
either of those are null.

635
00:20:36,960 --> 00:20:38,970
We don't actually do
the code inside of here

636
00:20:38,970 --> 00:20:40,061
'cause it wouldn't make sense to.

637
00:20:40,061 --> 00:20:43,500
And by doing this I've actually
fixed some potential bugs

638
00:20:43,500 --> 00:20:46,390
because if for some reason my
dataset wasn't set properly,

639
00:20:46,390 --> 00:20:48,390
this would throw a bunch of errors for us

640
00:20:48,390 --> 00:20:50,190
and now we're actually making
sure we check for that.

641
00:20:50,190 --> 00:20:51,750
And what we could do is
we could throw an error

642
00:20:51,750 --> 00:20:52,583
or do whatever we want,

643
00:20:52,583 --> 00:20:54,180
but we're actually
purposely checking for it,

644
00:20:54,180 --> 00:20:55,702
which is really great.

645
00:20:55,702 --> 00:20:57,791
Down here you'll notice we have
almost the exact same code.

646
00:20:57,791 --> 00:21:00,246
I'm just gonna copy the
same exact if check.

647
00:21:00,246 --> 00:21:02,850
I'm gonna paste it in there
because it's essentially doing

648
00:21:02,850 --> 00:21:05,487
the exact same thing that
fixed up that as well.

649
00:21:05,487 --> 00:21:07,620
Now if we move a little
bit further on down here,

650
00:21:07,620 --> 00:21:08,550
you're gonna see we get an error

651
00:21:08,550 --> 00:21:10,410
because this should be a
string instead of a number.

652
00:21:10,410 --> 00:21:11,850
So just convert it to a string.

653
00:21:11,850 --> 00:21:13,270
Super simple, straightforward stuff.

654
00:21:13,270 --> 00:21:15,720
And here this should also be
a string instead of a number.

655
00:21:15,720 --> 00:21:19,500
So we'll convert this entire
thing to a string as well.

656
00:21:19,500 --> 00:21:20,333
There we go.

657
00:21:21,180 --> 00:21:22,680
And if we scroll through a little further,

658
00:21:22,680 --> 00:21:24,930
you notice here we have
our tile status stuff

659
00:21:24,930 --> 00:21:26,220
and the nice thing is I
don't have to worry about

660
00:21:26,220 --> 00:21:27,840
importing and exporting this variable.

661
00:21:27,840 --> 00:21:29,580
I just get my awesome auto complete.

662
00:21:29,580 --> 00:21:31,470
So we can see this should say marked,

663
00:21:31,470 --> 00:21:32,850
so we'll convert it to marked.

664
00:21:32,850 --> 00:21:34,680
And now that's working just fine.

665
00:21:34,680 --> 00:21:37,410
Here we have an event object
that we're getting passed in.

666
00:21:37,410 --> 00:21:39,478
If I look at where this
stop prop is being used,

667
00:21:39,478 --> 00:21:41,825
you can see it's being used
inside of our event listeners.

668
00:21:41,825 --> 00:21:44,534
So this I know is an event object.

669
00:21:44,534 --> 00:21:46,470
So we can just say it's an event object

670
00:21:46,470 --> 00:21:48,060
and now we have perfect TypeScript

671
00:21:48,060 --> 00:21:50,187
because the event object
has this function on it.

672
00:21:50,187 --> 00:21:52,560
Now this takes in a board size,

673
00:21:52,560 --> 00:21:55,170
which we know for a fact is a
number just based on our code.

674
00:21:55,170 --> 00:21:56,370
But if you look at our code,

675
00:21:56,370 --> 00:21:57,547
you can see it's passing in board size,

676
00:21:57,547 --> 00:21:58,590
which is a number,

677
00:21:58,590 --> 00:22:00,038
a number of mines, which is a number.

678
00:22:00,038 --> 00:22:04,170
So we can also type this
as a number as well.

679
00:22:04,170 --> 00:22:06,870
Our positions here is most
likely a position array.

680
00:22:06,870 --> 00:22:08,640
And if we look here you can
see that we're creating a

681
00:22:08,640 --> 00:22:10,650
position with an X and a y property.

682
00:22:10,650 --> 00:22:14,547
So it is in fact a position array.

683
00:22:14,547 --> 00:22:16,617
We just need to make
sure we import that type.

684
00:22:16,617 --> 00:22:18,025
So we can come in here,

685
00:22:18,025 --> 00:22:21,510
export the position array
and we can import it

686
00:22:21,510 --> 00:22:23,479
right here as you can see that fixed up,

687
00:22:23,479 --> 00:22:24,610
all those types.

688
00:22:24,610 --> 00:22:27,180
And here we'll just make
sure our size is a number

689
00:22:27,180 --> 00:22:28,899
because if we look at
where this is being used

690
00:22:28,899 --> 00:22:31,080
and we actually go to
the implementation of it,

691
00:22:31,080 --> 00:22:33,035
you can see it's just passing in a number.

692
00:22:33,035 --> 00:22:35,670
So now that's all we need
to have done right here

693
00:22:35,670 --> 00:22:38,580
for this and hopefully
our code should be working

694
00:22:38,580 --> 00:22:39,413
if we save this.

695
00:22:39,413 --> 00:22:41,014
So if we go over here, we
start clicking on things.

696
00:22:41,014 --> 00:22:42,937
You'll notice if I
actually can find a block

697
00:22:42,937 --> 00:22:44,760
where there's a bunch of zeros,

698
00:22:44,760 --> 00:22:47,097
everything seems to be working
just like it did before.

699
00:22:47,097 --> 00:22:48,630
So to do a quick recap,

700
00:22:48,630 --> 00:22:51,120
we essentially focused
on the bottom up approach

701
00:22:51,120 --> 00:22:51,990
of doing TypeScript,

702
00:22:51,990 --> 00:22:53,730
which is really great
when you're working on

703
00:22:53,730 --> 00:22:55,560
really simple functions
where you kind of know

704
00:22:55,560 --> 00:22:56,910
the inputs and outputs.

705
00:22:56,910 --> 00:22:58,890
We also notice we ran
into quite a few problems

706
00:22:58,890 --> 00:23:00,600
where we had a function, for example,

707
00:23:00,600 --> 00:23:03,480
inside of here we had this
like reveal tile function,

708
00:23:03,480 --> 00:23:05,400
whereas was passing in some
properties and we weren't really

709
00:23:05,400 --> 00:23:07,200
sure what those properties were.

710
00:23:07,200 --> 00:23:09,690
So we had to move upwards
through the stack to figure out

711
00:23:09,690 --> 00:23:10,740
what those were.

712
00:23:10,740 --> 00:23:12,720
This is one downside to this approach

713
00:23:12,720 --> 00:23:14,437
and one benefit to the top down approach.

714
00:23:14,437 --> 00:23:17,070
'Cause in the top down
approach you always know

715
00:23:17,070 --> 00:23:19,222
what values are being
passed into the functions

716
00:23:19,222 --> 00:23:20,460
that you're calling.

717
00:23:20,460 --> 00:23:21,990
But at the very least,
it's very easy for you

718
00:23:21,990 --> 00:23:24,068
to see what's being passed
into all of your functions.

719
00:23:24,068 --> 00:23:26,700
You just don't have the
return values for you.

720
00:23:26,700 --> 00:23:28,980
So for example, if I were
to go to create board here,

721
00:23:28,980 --> 00:23:31,500
I don't know what the return
value of position matches

722
00:23:31,500 --> 00:23:33,210
if I'm doing a top down approach,

723
00:23:33,210 --> 00:23:35,630
but I do know what gets
passed into that function.

724
00:23:35,630 --> 00:23:37,830
So it can be really great if
you're trying to make sure

725
00:23:37,830 --> 00:23:39,210
that you try to know what's being passed

726
00:23:39,210 --> 00:23:40,043
into all your functions

727
00:23:40,043 --> 00:23:41,310
and you can't just look at the code

728
00:23:41,310 --> 00:23:43,590
and know by just reading it.

729
00:23:43,590 --> 00:23:45,150
Sometimes your code's
not very well written

730
00:23:45,150 --> 00:23:46,260
and it's hard to know.

731
00:23:46,260 --> 00:23:47,790
Most of this code was pretty well written

732
00:23:47,790 --> 00:23:49,050
and had good naming,

733
00:23:49,050 --> 00:23:50,670
so it was kind of easy to guess the type

734
00:23:50,670 --> 00:23:52,620
even without knowing for
a hundred percent sure

735
00:23:52,620 --> 00:23:53,850
what the type was.

736
00:23:53,850 --> 00:23:55,260
Also, I was just looking at the code

737
00:23:55,260 --> 00:23:57,098
and I realized there's one
thing I forgot to move over

738
00:23:57,098 --> 00:24:00,149
and that is inside of that test folder,

739
00:24:00,149 --> 00:24:02,070
if we look inside this source,

740
00:24:02,070 --> 00:24:04,830
there is this vite-ent.d.ts.

741
00:24:04,830 --> 00:24:06,870
We should make sure we include
that in our source folder

742
00:24:06,870 --> 00:24:09,090
as well if we wanna make sure
we have all of our typings

743
00:24:09,090 --> 00:24:10,440
for vite as well.

744
00:24:10,440 --> 00:24:11,640
Also, if we look in our script,

745
00:24:11,640 --> 00:24:13,020
we do have one warning in here

746
00:24:13,020 --> 00:24:15,150
and that's because we're
importing this tile statuses

747
00:24:15,150 --> 00:24:16,020
but never using it,

748
00:24:16,020 --> 00:24:17,700
which means we can remove that import

749
00:24:17,700 --> 00:24:19,710
and inside of here we can
actually probably remove

750
00:24:19,710 --> 00:24:22,440
the export on that tile statuses as well.

751
00:24:22,440 --> 00:24:23,840
Let's get rid of that there.