1
00:00:00,210 --> 00:00:03,180
- Now this project, instead
of writing out your own code,

2
00:00:03,180 --> 00:00:05,130
we're gonna be taking an existing project

3
00:00:05,130 --> 00:00:06,660
that's written in JavaScript.

4
00:00:06,660 --> 00:00:09,030
As you can see, it's a
Minesweeper game over here.

5
00:00:09,030 --> 00:00:11,310
If you left click, it's
going to reveal a tile,

6
00:00:11,310 --> 00:00:13,560
while right clicking it will
mark it in this yellow color

7
00:00:13,560 --> 00:00:15,180
to represent a mine.

8
00:00:15,180 --> 00:00:18,030
So a pretty simple
Minesweeper implementation.

9
00:00:18,030 --> 00:00:19,590
And what we're gonna do
is we're gonna convert it

10
00:00:19,590 --> 00:00:21,540
from JavaScript to TypeScript.

11
00:00:21,540 --> 00:00:23,310
I'm gonna be talking about
a lot of different things

12
00:00:23,310 --> 00:00:24,930
you should focus on when you're converting

13
00:00:24,930 --> 00:00:27,300
from JavaScript to TypeScript.

14
00:00:27,300 --> 00:00:28,440
Now in this introduction video,

15
00:00:28,440 --> 00:00:29,940
before I let you loose on this project,

16
00:00:29,940 --> 00:00:31,200
I'll mention two different ways

17
00:00:31,200 --> 00:00:32,280
that you can convert something

18
00:00:32,280 --> 00:00:34,260
from JavaScript to TypeScript.

19
00:00:34,260 --> 00:00:35,670
The first way that you convert something

20
00:00:35,670 --> 00:00:38,820
from JavaScript to TypeScript
is with the top-down approach.

21
00:00:38,820 --> 00:00:40,920
This is really great if
you're only converting parts

22
00:00:40,920 --> 00:00:43,500
of your application over
to TypeScript at a time.

23
00:00:43,500 --> 00:00:45,930
Like, maybe you want to convert
the most important parts

24
00:00:45,930 --> 00:00:47,760
of your application to TypeScript first,

25
00:00:47,760 --> 00:00:48,593
and you're gonna leave some

26
00:00:48,593 --> 00:00:50,460
of the less important parts 'til later.

27
00:00:50,460 --> 00:00:52,350
So a top-down approach
means you're going to focus

28
00:00:52,350 --> 00:00:54,060
on the top level, such as a feature,

29
00:00:54,060 --> 00:00:56,280
like I'm gonna be focusing on checkout,

30
00:00:56,280 --> 00:00:58,350
and you're gonna change
everything in your checkout code

31
00:00:58,350 --> 00:00:59,850
to make it work in TypeScript.

32
00:00:59,850 --> 00:01:01,770
And then you're just
going to trickle that down

33
00:01:01,770 --> 00:01:03,450
until you get all of the
code all the way down

34
00:01:03,450 --> 00:01:05,160
to the smallest functions that are used

35
00:01:05,160 --> 00:01:08,370
in that checkout code, all
typed with everything you need.

36
00:01:08,370 --> 00:01:10,110
So you're working from
the top level feature

37
00:01:10,110 --> 00:01:12,330
and going down, adding types to all

38
00:01:12,330 --> 00:01:15,000
of the different smaller
things that that depends on.

39
00:01:15,000 --> 00:01:17,400
The other approach is
the bottom-up approach

40
00:01:17,400 --> 00:01:19,350
where you're focusing
on the smallest pieces

41
00:01:19,350 --> 00:01:20,370
of your entire code base,

42
00:01:20,370 --> 00:01:23,160
so like individual functions
that have very few things

43
00:01:23,160 --> 00:01:24,270
that depend on them.

44
00:01:24,270 --> 00:01:25,950
In this particular
example, if I scroll down

45
00:01:25,950 --> 00:01:27,030
to the bottom of the file,

46
00:01:27,030 --> 00:01:28,410
you can see there are
certain functions here

47
00:01:28,410 --> 00:01:30,840
that have no dependencies,
and they're very simple.

48
00:01:30,840 --> 00:01:31,680
So you would be starting

49
00:01:31,680 --> 00:01:33,720
with these particular functions first

50
00:01:33,720 --> 00:01:35,310
and working your way up,

51
00:01:35,310 --> 00:01:37,350
adding more and more types as you go.

52
00:01:37,350 --> 00:01:38,880
Now there's pros and cons to both.

53
00:01:38,880 --> 00:01:40,920
The pro of the top-down approach

54
00:01:40,920 --> 00:01:43,200
is that you're able to
get one particular part

55
00:01:43,200 --> 00:01:45,120
of your application, like one feature,

56
00:01:45,120 --> 00:01:46,740
typed relatively quickly,

57
00:01:46,740 --> 00:01:49,170
since you're only focusing
on that one thing.

58
00:01:49,170 --> 00:01:52,380
The con to it is that it can
become a mess very quickly

59
00:01:52,380 --> 00:01:54,360
because, as you start to change one thing,

60
00:01:54,360 --> 00:01:57,030
it depends on 10 other things,
which you all need to change.

61
00:01:57,030 --> 00:01:59,730
And those 10 things all
depend on six other things.

62
00:01:59,730 --> 00:02:01,740
So now you have 60 different
things that you need to change,

63
00:02:01,740 --> 00:02:03,930
and it quickly spirals out of control.

64
00:02:03,930 --> 00:02:06,090
There's a lot of extra
things you need to change

65
00:02:06,090 --> 00:02:08,610
in the top-down approach, but
with the bottom up approach,

66
00:02:08,610 --> 00:02:09,960
everything is incredibly small.

67
00:02:09,960 --> 00:02:11,850
And as you start moving up to the things

68
00:02:11,850 --> 00:02:13,230
that depend on other things,

69
00:02:13,230 --> 00:02:15,360
you're gonna notice it's
much easier to type those

70
00:02:15,360 --> 00:02:17,010
because you've already
typed most of the things

71
00:02:17,010 --> 00:02:18,180
that they depend on.

72
00:02:18,180 --> 00:02:20,130
The other thing to note
before I let you loose

73
00:02:20,130 --> 00:02:22,800
on this project is if you're
taking a JavaScript project

74
00:02:22,800 --> 00:02:24,270
and converting it over to TypeScript,

75
00:02:24,270 --> 00:02:25,980
there's a few different things to look at.

76
00:02:25,980 --> 00:02:28,770
The first is going to be what
type of bundler situation

77
00:02:28,770 --> 00:02:29,640
do you have?

78
00:02:29,640 --> 00:02:30,810
In this particular project,

79
00:02:30,810 --> 00:02:32,850
we are using Vite as the bundler.

80
00:02:32,850 --> 00:02:34,740
So what I would do, in
this case, is I would go

81
00:02:34,740 --> 00:02:36,630
to the Vite documentation and look

82
00:02:36,630 --> 00:02:38,820
at how TypeScript works within Vite,

83
00:02:38,820 --> 00:02:41,310
'cause there may be specific
things you need to know.

84
00:02:41,310 --> 00:02:43,260
Another thing you can do
is to create a project

85
00:02:43,260 --> 00:02:45,840
from scratch using this
bundler, such as Vite,

86
00:02:45,840 --> 00:02:47,220
and they have a TypeScript option.

87
00:02:47,220 --> 00:02:50,340
So if your bundler has an
option for TypeScript built in,

88
00:02:50,340 --> 00:02:51,870
create a project from scratch,

89
00:02:51,870 --> 00:02:53,880
look at how they have their
code configured there,

90
00:02:53,880 --> 00:02:56,010
and you can use that
configuration directly

91
00:02:56,010 --> 00:02:57,270
into your code as well.

92
00:02:57,270 --> 00:02:58,500
So that's kind of like two different ways

93
00:02:58,500 --> 00:03:00,120
you can solve this problem.

94
00:03:00,120 --> 00:03:02,520
Now, if you're not using
a bundler in your project,

95
00:03:02,520 --> 00:03:04,560
what you pretty much need
to do is consider, okay,

96
00:03:04,560 --> 00:03:06,990
do I want to move all my
code over to a bundler?

97
00:03:06,990 --> 00:03:08,910
Which the answer is probably yes.

98
00:03:08,910 --> 00:03:10,170
Or do I wanna manually write

99
00:03:10,170 --> 00:03:12,300
all of my TypeScript code myself?

100
00:03:12,300 --> 00:03:14,010
You kind of have to look
at that case by case,

101
00:03:14,010 --> 00:03:15,990
but, generally, you're
using some type of bundler,

102
00:03:15,990 --> 00:03:18,000
and if you are, you can
look at the documentation

103
00:03:18,000 --> 00:03:20,910
to figure out how to implement
TypeScript into that bundler.

104
00:03:20,910 --> 00:03:22,950
So that's what I would
recommend doing on this project

105
00:03:22,950 --> 00:03:24,780
when you're trying to
implement this in Vite.

106
00:03:24,780 --> 00:03:26,310
Just look at how Vite does TypeScript

107
00:03:26,310 --> 00:03:28,660
and try to move that into
this project as well.