Instructor: So this is now how we can
manage multiple files with TypeScript.
Now, one word about having multiple files,
when you work with multiple files as we're doing it here,
you can also import them into each other with modules,
which you might know from vanilla JavaScript,
there we have modules as well, it is something
I'll cover in a dedicated section of this course though,
so for now, we just have two files
which are not imported into each other,
but which are instead imported into index.html.
Now with that out of the way though,
we know that we can manage this as a project
and that we can compile multiple files here.
Now let's have a look at the tsconfig.json file
because this is a crucial file for managing this project,
it essentially tells TypeScript
how it should compile these files.
Now, before we dive into the compilerOptions where we,
as the name suggests,
can configure how the compiler behaves,
let's scroll down to the place
before the closing curly brace
but after this nested closing curly brace,
and let's see some of the options
we can add here which don't effect the compiler
or the compilation step behavior,
but instead how the compiler works with this project,
because there for example, you can set a exclude option.
Now if you add exclude here, that will be an array,
and what you can enter here are paths to files
which should not be included in compilation
when you run TSC on the entire project.
So for example, here we could say
we want to exclude analytics.ts from compilation,
and of course, this doesn't make much sense here,
but just to show how this works.
If we do that and we now rerun tsc,
and I first of all delete analytics.js
so that we can see if it is recreated,
if we now run tsc or tsc in watch mode,
you see no analytics.js file is created,
and the reason for that is that we're excluding that file.
Now of course for this file,
this doesn't make a lot of sense
because I typically want to include it,
but if you had a file that for some reason
shouldn't be compiled, you can exclude it like this.
You can also work with wildcards,
and for example, if you had a file
that's named analytics.dev.ts
and you don't really wanna compile that,
you could say all files that end dev.ts
should not be compiled, and you can do that
by also adding an asterisk here,
which is a wildcard basically,
and now TypeScript will ignore any files
that have .dev.ts included.
You could also add asterisk, asterisk, slash here,
and that would mean any file with that pattern
in any folder will be ignored.
So these are things you can set up here,
the only thing I want to set up here,
and that is a setting that you will often find,
is that I want to exclude node_modules,
and the idea here is that I don't want to compile
any TypeScript files I might have inside of node_modules.
Now, node_modules is that folder
that holds all the dependencies
we install here in package.json
and the dependencies of these dependencies,
and therefore, these are third-party libraries
we're importing, which we don't wanna touch,
and if any of these libraries
should ship some TypeScript code,
then we certainly don't want to compile it,
it will just slow down our compilation process,
and in the worst case, it might even break our project.
So therefore, it's quite common
to exclude node_modules here, though I will say,
if you don't specify the exclude option at all,
node_modules is automatically excluded as a default setting,
so you don't really need to add this option here,
this would be the default, I just want to show
that exclude exists and how you could use it
if the only thing you want to exclude is node_modules,
you don't have to add the exclude key at all.
If you do add it though, you should set node_modules
because otherwise, it will not exclude that.
Now besides exclude, we also have include,
and include allows you to do the opposite,
it allows you to specifically tell TypeScript
which files you wanna include in the compilation process,
and anything that's not listed here will not compiled,
so if I point at app.ts here, you'll see if I rerun tsc,
we also will get no analytics.ts file,
or no analytics.js file I should say.
Why?
Because analytics.js is not included in include,
and as I said, if we do set the include key,
then we really have to include
everything we want to compile.
So of course here, we could then also add analytics.ts here,
and with that addition, we would start and compile it,
as you see now, we have the analytics.js file,
or as an alternative, we specify a whole folder here
which typically holds the files we want to compile.
Exclude by the way, if set alongst include
will filter down include,
so if we exclude some sub-folder of a folder
that is part of include,
then that excluded sub-folder will be excluded,
so basically we compile include minus exclude.
Now of course here, I don't want to set include,
I want to compile all TypeScript files,
and therefore I don't have to worry about that,
excluding node_modules is all I need,
and as I explained, theoretically
I don't even need to add that
because that would be excluded by default.
Now you also have a files option,
this allows you to point at the individual files,
so it's a bit like include with the difference that here
you can't specify whole folders which you want to include,
instead you really just specify
the individual files you want to compile,
that might be a option for smaller projects
where you know you will only work with free files,
and for some reason you got
a couple of other TypeScript files
which you don't want to touch though,
then you can set the list of files like this.
In reality, you might not need
that setting that often though.
And therefore, that's it with the basic compilation
or project management options here.
Now of course, there is way more we can specify though,
way more we can specify about the compiler itself
and how it behaves during the compilation step.