1
00:00:00,120 --> 00:00:00,953
- Now the final thing

2
00:00:00,953 --> 00:00:02,910
that we really need to
understand about TypeScript

3
00:00:02,910 --> 00:00:05,010
before we can actually start
writing TypeScript code,

4
00:00:05,010 --> 00:00:06,540
which is going to be a lot of fun,

5
00:00:06,540 --> 00:00:09,120
is how this TS config file works.

6
00:00:09,120 --> 00:00:11,070
This is the exact same
code from the last video

7
00:00:11,070 --> 00:00:12,270
where I set up a Vite project.

8
00:00:12,270 --> 00:00:14,370
So I just had the boiler
plate vite config.

9
00:00:14,370 --> 00:00:15,600
If you're watching this video later,

10
00:00:15,600 --> 00:00:17,610
you may see that your
config is slightly different

11
00:00:17,610 --> 00:00:19,020
or if you're using a different bundler,

12
00:00:19,020 --> 00:00:21,300
again your config may
be slightly different,

13
00:00:21,300 --> 00:00:23,310
but it probably has a
lot of the same options.

14
00:00:23,310 --> 00:00:25,260
I'm gonna go over some of
the most common options

15
00:00:25,260 --> 00:00:26,130
you're going to see

16
00:00:26,130 --> 00:00:28,380
as well as how you can learn
about all the different options

17
00:00:28,380 --> 00:00:30,030
and configurations out there.

18
00:00:30,030 --> 00:00:31,260
So the main things that
you're gonna see are

19
00:00:31,260 --> 00:00:33,150
inside this compiler option section.

20
00:00:33,150 --> 00:00:33,983
As you can see

21
00:00:33,983 --> 00:00:35,760
this is pretty much the
bulk of all of our code.

22
00:00:35,760 --> 00:00:36,840
The only thing not inside here

23
00:00:36,840 --> 00:00:37,980
is this include section

24
00:00:37,980 --> 00:00:40,020
which just tells you what
files you want to include.

25
00:00:40,020 --> 00:00:40,860
In our case, we're saying

26
00:00:40,860 --> 00:00:42,000
everything in the source folder

27
00:00:42,000 --> 00:00:43,560
is what we should include

28
00:00:43,560 --> 00:00:44,790
inside the compiler options,

29
00:00:44,790 --> 00:00:46,260
the target is what you want to

30
00:00:46,260 --> 00:00:48,270
actually emit your JavaScript as.

31
00:00:48,270 --> 00:00:50,790
In our case, we're
targeting 2020 JavaScript,

32
00:00:50,790 --> 00:00:52,500
because at this point most browsers

33
00:00:52,500 --> 00:00:54,900
support this level of JavaScript.

34
00:00:54,900 --> 00:00:56,580
If you wanted to target
different environments,

35
00:00:56,580 --> 00:00:59,010
for example, you wanted to
maybe target a node environment

36
00:00:59,010 --> 00:01:00,000
or some other environment,

37
00:01:00,000 --> 00:01:01,470
you have different options inside of here,

38
00:01:01,470 --> 00:01:04,110
but 2020 is going to be
a good option for you.

39
00:01:04,110 --> 00:01:05,130
Now the module section,

40
00:01:05,130 --> 00:01:06,300
this is another really common piece

41
00:01:06,300 --> 00:01:07,260
of code you're gonna see.

42
00:01:07,260 --> 00:01:08,730
This determines if you
want to use something

43
00:01:08,730 --> 00:01:09,750
like ES modules,

44
00:01:09,750 --> 00:01:10,860
which is the browser way

45
00:01:10,860 --> 00:01:13,380
of handling modules with
import export syntax.

46
00:01:13,380 --> 00:01:15,390
Or if you wanted to use
something like common modules

47
00:01:15,390 --> 00:01:17,580
which is the more NodeJS
way of doing things

48
00:01:17,580 --> 00:01:19,020
even though NodeJS is moving more

49
00:01:19,020 --> 00:01:21,180
towards the import export statement.

50
00:01:21,180 --> 00:01:22,890
So if you wanted to do common modules

51
00:01:22,890 --> 00:01:25,320
you could use CommonJS inside
of here, or if you wanted

52
00:01:25,320 --> 00:01:26,310
you could use ESNext

53
00:01:26,310 --> 00:01:28,950
or something else to do
browser-based modules.

54
00:01:28,950 --> 00:01:30,990
Now the next thing you can
see here is this lib section.

55
00:01:30,990 --> 00:01:32,640
This is essentially
all the different files

56
00:01:32,640 --> 00:01:33,473
we want to include.

57
00:01:33,473 --> 00:01:35,070
So in our case, we're working in a DOM

58
00:01:35,070 --> 00:01:36,780
so we want to use this DOM library,

59
00:01:36,780 --> 00:01:39,420
that's essentially all this
code is saying inside of here.

60
00:01:39,420 --> 00:01:40,500
Now this bundler mode,

61
00:01:40,500 --> 00:01:41,333
you don't really need to worry

62
00:01:41,333 --> 00:01:42,390
about this kind of section.

63
00:01:42,390 --> 00:01:44,280
It's kind of just handling
how your bundling works.

64
00:01:44,280 --> 00:01:46,740
Not super important to know
how to write code with it

65
00:01:46,740 --> 00:01:48,960
but this linting section
is really important.

66
00:01:48,960 --> 00:01:49,793
As you can see here,

67
00:01:49,793 --> 00:01:51,240
we have strict set to true.

68
00:01:51,240 --> 00:01:53,280
I recommend in every
single TypeScript project

69
00:01:53,280 --> 00:01:54,113
you ever do,

70
00:01:54,113 --> 00:01:55,830
you set strict equal to true.

71
00:01:55,830 --> 00:01:56,663
The main reason for that

72
00:01:56,663 --> 00:01:57,990
is this is going to enable the most

73
00:01:57,990 --> 00:01:59,970
common rules that you
want to have following

74
00:01:59,970 --> 00:02:01,080
and they are going to be the rules

75
00:02:01,080 --> 00:02:03,420
that make your code a little
bit stricter than you have

76
00:02:03,420 --> 00:02:05,280
to make sure that things
are going to be working.

77
00:02:05,280 --> 00:02:06,780
Otherwise, you can have different things

78
00:02:06,780 --> 00:02:07,920
like the any variables

79
00:02:07,920 --> 00:02:09,480
where you don't actually
define what your functions are

80
00:02:09,480 --> 00:02:10,313
and things like that.

81
00:02:10,313 --> 00:02:11,460
It's just going to make sure you fix

82
00:02:11,460 --> 00:02:13,233
and detect a lot of bugs in your code

83
00:02:13,233 --> 00:02:14,970
that you wouldn't
actually be able to detect

84
00:02:14,970 --> 00:02:16,470
without this being set to true.

85
00:02:16,470 --> 00:02:19,020
So really every project
should have this set to true.

86
00:02:19,020 --> 00:02:19,980
Then there's some other options.

87
00:02:19,980 --> 00:02:22,140
For example, this is
saying any unused variables

88
00:02:22,140 --> 00:02:22,973
will throw an error.

89
00:02:22,973 --> 00:02:25,020
Same thing with unused
parameters and so on.

90
00:02:25,020 --> 00:02:27,810
You can make this tweaked
as much as you want.

91
00:02:27,810 --> 00:02:28,950
And now if you want to learn more

92
00:02:28,950 --> 00:02:30,720
about the different
config options out there,

93
00:02:30,720 --> 00:02:31,860
'cause you can obviously add

94
00:02:31,860 --> 00:02:33,630
and remove different configs.

95
00:02:33,630 --> 00:02:35,760
I'm gonna leave a link to
this exact page right here,

96
00:02:35,760 --> 00:02:37,590
which is on the TypeScript documentation

97
00:02:37,590 --> 00:02:39,360
and this includes every single one

98
00:02:39,360 --> 00:02:41,160
of the TS config options.

99
00:02:41,160 --> 00:02:43,680
In our case, the strict option
is the most important one

100
00:02:43,680 --> 00:02:44,520
as I mentioned.

101
00:02:44,520 --> 00:02:45,353
As you can see,

102
00:02:45,353 --> 00:02:46,320
what this does is essentially take

103
00:02:46,320 --> 00:02:47,790
all of these options on the right here

104
00:02:47,790 --> 00:02:49,230
and it enables them as true

105
00:02:49,230 --> 00:02:51,390
so you can't pass along
like anys and so on,

106
00:02:51,390 --> 00:02:52,830
which is really important.

107
00:02:52,830 --> 00:02:54,210
You can take this as far as you want

108
00:02:54,210 --> 00:02:55,710
by adding in more strict things

109
00:02:55,710 --> 00:02:56,580
and less strict things.

110
00:02:56,580 --> 00:02:58,110
It's entirely up to you.

111
00:02:58,110 --> 00:03:00,870
Now also, it's sometimes
difficult to know what properties

112
00:03:00,870 --> 00:03:02,970
and different configurations you may want.

113
00:03:02,970 --> 00:03:04,680
There's a really great GitHub repository.

114
00:03:04,680 --> 00:03:06,480
I'll also link this into the description.

115
00:03:06,480 --> 00:03:08,280
This is the TS config basis,

116
00:03:08,280 --> 00:03:09,480
and essentially this just gives you

117
00:03:09,480 --> 00:03:12,240
a bunch of different
bases for your TS configs

118
00:03:12,240 --> 00:03:13,530
for different types of setups.

119
00:03:13,530 --> 00:03:15,270
For example, they have
a recommended setup here

120
00:03:15,270 --> 00:03:16,830
and what you could do
is you could extend that

121
00:03:16,830 --> 00:03:18,630
or you can just open up the config file

122
00:03:18,630 --> 00:03:19,463
and look at it

123
00:03:19,463 --> 00:03:20,760
and just take whatever code you want.

124
00:03:20,760 --> 00:03:21,593
So you can say, you know what?

125
00:03:21,593 --> 00:03:22,770
Okay, this is what they're doing.

126
00:03:22,770 --> 00:03:24,570
I'm gonna maybe add some of
these different things in,

127
00:03:24,570 --> 00:03:25,740
like strict is true in this,

128
00:03:25,740 --> 00:03:26,910
as you can see.

129
00:03:26,910 --> 00:03:28,110
There's a bunch of different setups for

130
00:03:28,110 --> 00:03:29,010
if you're using like Bun,

131
00:03:29,010 --> 00:03:30,270
Create REACT App, Cypress

132
00:03:30,270 --> 00:03:31,860
and they also, if we scroll
down a little further,

133
00:03:31,860 --> 00:03:33,420
have all the different Node versions

134
00:03:33,420 --> 00:03:35,010
you could ever want inside of here,

135
00:03:35,010 --> 00:03:36,750
as well as things like remix, REACT,

136
00:03:36,750 --> 00:03:39,210
super strict version, Svelte and so on.

137
00:03:39,210 --> 00:03:40,350
If you're working on a project

138
00:03:40,350 --> 00:03:42,210
in some type of framework or language

139
00:03:42,210 --> 00:03:43,560
or something like that,

140
00:03:43,560 --> 00:03:45,187
going to this site is gonna
be a great way of saying,

141
00:03:45,187 --> 00:03:46,530
"Okay if I'm working in Svelte,

142
00:03:46,530 --> 00:03:48,360
what are the different
configuration options I want?"

143
00:03:48,360 --> 00:03:49,380
And you can see inside of here

144
00:03:49,380 --> 00:03:50,640
there's certain things
that are gonna be really

145
00:03:50,640 --> 00:03:51,473
good for Svelte,

146
00:03:51,473 --> 00:03:52,860
and it's kind of mentioned
them in comments,

147
00:03:52,860 --> 00:03:53,700
what they are.

148
00:03:53,700 --> 00:03:54,533
And again, if you want

149
00:03:54,533 --> 00:03:56,250
you can just extend this or you can copy

150
00:03:56,250 --> 00:03:57,510
and paste the very different things

151
00:03:57,510 --> 00:03:58,343
that you want

152
00:03:58,343 --> 00:04:00,450
just to kind of see what
other people are using.

153
00:04:00,450 --> 00:04:01,350
For the most part though,

154
00:04:01,350 --> 00:04:02,790
if you're using some type of bundler

155
00:04:02,790 --> 00:04:05,190
that automatically sets
up this TS config for you,

156
00:04:05,190 --> 00:04:06,870
you're probably not
gonna have to make many,

157
00:04:06,870 --> 00:04:08,430
if any changes at all.

158
00:04:08,430 --> 00:04:09,990
For pretty much the
entirety of this course,

159
00:04:09,990 --> 00:04:11,910
I'm gonna be using the default configs

160
00:04:11,910 --> 00:04:12,807
that I'm getting from Vite

161
00:04:12,807 --> 00:04:14,550
and I'm not gonna be changing any of them,

162
00:04:14,550 --> 00:04:16,110
unless I'm specifically demonstrating

163
00:04:16,110 --> 00:04:18,270
something about that config option.

164
00:04:18,270 --> 00:04:19,920
These defaults are gonna be really great

165
00:04:19,920 --> 00:04:21,960
as long as you just make
sure strict is set to true.

166
00:04:21,960 --> 00:04:24,600
That's gonna get you 99% of the way there.

167
00:04:24,600 --> 00:04:27,000
Also, a really nice thing
about these config files,

168
00:04:27,000 --> 00:04:28,800
if you're using Visual Studio Code,

169
00:04:28,800 --> 00:04:29,700
it'll actually pick up

170
00:04:29,700 --> 00:04:31,320
on whatever your config file is,

171
00:04:31,320 --> 00:04:32,910
and that's how you actually get the errors

172
00:04:32,910 --> 00:04:34,110
inside of your editor.

173
00:04:34,110 --> 00:04:35,520
So if I were to create a function,

174
00:04:35,520 --> 00:04:36,353
doesn't matter what it is,

175
00:04:36,353 --> 00:04:38,280
and I just try to give it
a variable, for example,

176
00:04:38,280 --> 00:04:40,050
you can see I'm getting
errors inside of here

177
00:04:40,050 --> 00:04:42,240
from the actual config file I have.

178
00:04:42,240 --> 00:04:44,400
For example, if I set true to false

179
00:04:44,400 --> 00:04:46,347
and set no unused parameters to false,

180
00:04:46,347 --> 00:04:48,660
you now see that my errors
in here completely go away.

181
00:04:48,660 --> 00:04:50,280
So VS code is picking up on that

182
00:04:50,280 --> 00:04:51,450
and showing my errors based

183
00:04:51,450 --> 00:04:52,830
on what my config file is,

184
00:04:52,830 --> 00:04:54,423
which is really nice and handy.