- Now the final thing
that we really need to understand about TypeScript
before we can actually start writing TypeScript code,
which is going to be a lot of fun,
is how this TS config file works.
This is the exact same code from the last video
where I set up a Vite project.
So I just had the boiler plate vite config.
If you're watching this video later,
you may see that your config is slightly different
or if you're using a different bundler,
again your config may be slightly different,
but it probably has a lot of the same options.
I'm gonna go over some of the most common options
you're going to see
as well as how you can learn about all the different options
and configurations out there.
So the main things that you're gonna see are
inside this compiler option section.
As you can see
this is pretty much the bulk of all of our code.
The only thing not inside here
is this include section
which just tells you what files you want to include.
In our case, we're saying
everything in the source folder
is what we should include
inside the compiler options,
the target is what you want to
actually emit your JavaScript as.
In our case, we're targeting 2020 JavaScript,
because at this point most browsers
support this level of JavaScript.
If you wanted to target different environments,
for example, you wanted to maybe target a node environment
or some other environment,
you have different options inside of here,
but 2020 is going to be a good option for you.
Now the module section,
this is another really common piece
of code you're gonna see.
This determines if you want to use something
like ES modules,
which is the browser way
of handling modules with import export syntax.
Or if you wanted to use something like common modules
which is the more NodeJS way of doing things
even though NodeJS is moving more
towards the import export statement.
So if you wanted to do common modules
you could use CommonJS inside of here, or if you wanted
you could use ESNext
or something else to do browser-based modules.
Now the next thing you can see here is this lib section.
This is essentially all the different files
we want to include.
So in our case, we're working in a DOM
so we want to use this DOM library,
that's essentially all this code is saying inside of here.
Now this bundler mode,
you don't really need to worry
about this kind of section.
It's kind of just handling how your bundling works.
Not super important to know how to write code with it
but this linting section is really important.
As you can see here,
we have strict set to true.
I recommend in every single TypeScript project
you ever do,
you set strict equal to true.
The main reason for that
is this is going to enable the most
common rules that you want to have following
and they are going to be the rules
that make your code a little bit stricter than you have
to make sure that things are going to be working.
Otherwise, you can have different things
like the any variables
where you don't actually define what your functions are
and things like that.
It's just going to make sure you fix
and detect a lot of bugs in your code
that you wouldn't actually be able to detect
without this being set to true.
So really every project should have this set to true.
Then there's some other options.
For example, this is saying any unused variables
will throw an error.
Same thing with unused parameters and so on.
You can make this tweaked as much as you want.
And now if you want to learn more
about the different config options out there,
'cause you can obviously add
and remove different configs.
I'm gonna leave a link to this exact page right here,
which is on the TypeScript documentation
and this includes every single one
of the TS config options.
In our case, the strict option is the most important one
as I mentioned.
As you can see,
what this does is essentially take
all of these options on the right here
and it enables them as true
so you can't pass along like anys and so on,
which is really important.
You can take this as far as you want
by adding in more strict things
and less strict things.
It's entirely up to you.
Now also, it's sometimes difficult to know what properties
and different configurations you may want.
There's a really great GitHub repository.
I'll also link this into the description.
This is the TS config basis,
and essentially this just gives you
a bunch of different bases for your TS configs
for different types of setups.
For example, they have a recommended setup here
and what you could do is you could extend that
or you can just open up the config file
and look at it
and just take whatever code you want.
So you can say, you know what?
Okay, this is what they're doing.
I'm gonna maybe add some of these different things in,
like strict is true in this,
as you can see.
There's a bunch of different setups for
if you're using like Bun,
Create REACT App, Cypress
and they also, if we scroll down a little further,
have all the different Node versions
you could ever want inside of here,
as well as things like remix, REACT,
super strict version, Svelte and so on.
If you're working on a project
in some type of framework or language
or something like that,
going to this site is gonna be a great way of saying,
"Okay if I'm working in Svelte,
what are the different configuration options I want?"
And you can see inside of here
there's certain things that are gonna be really
good for Svelte,
and it's kind of mentioned them in comments,
what they are.
And again, if you want
you can just extend this or you can copy
and paste the very different things
that you want
just to kind of see what other people are using.
For the most part though,
if you're using some type of bundler
that automatically sets up this TS config for you,
you're probably not gonna have to make many,
if any changes at all.
For pretty much the entirety of this course,
I'm gonna be using the default configs
that I'm getting from Vite
and I'm not gonna be changing any of them,
unless I'm specifically demonstrating
something about that config option.
These defaults are gonna be really great
as long as you just make sure strict is set to true.
That's gonna get you 99% of the way there.
Also, a really nice thing about these config files,
if you're using Visual Studio Code,
it'll actually pick up
on whatever your config file is,
and that's how you actually get the errors
inside of your editor.
So if I were to create a function,
doesn't matter what it is,
and I just try to give it a variable, for example,
you can see I'm getting errors inside of here
from the actual config file I have.
For example, if I set true to false
and set no unused parameters to false,
you now see that my errors in here completely go away.
So VS code is picking up on that
and showing my errors based
on what my config file is,
which is really nice and handy.