Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
In our last video, we created a super simple TypeScript project, but it didn’t compile the JavaScript we expected. In this video we'll talk about how to fix this by using a TypeScript configuration file.
Resources
TypeScript configuration file documentation
Note
All shortcuts mentioned in this course are for macOS operating systems. For Microsoft Windows systems, please use Control (Ctrl) instead of Command (Cmd), and use Alt instead of Option.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
In our last video, we created
a super simple TypeScript project.
0:00
But it didn't compile to
the JavaScript we expected.
0:05
In this video,
0:09
we'll talk about how we can fix that by
using a TypeScript configuration file.
0:10
We can use this file to configure
the TypeScript compiler to
0:16
our project-specific needs.
0:19
So if we want to target a specific
version of JavaScript, or
0:21
if you want to make sure that we have
a certain level of type strictness,
0:25
we can do all of that in
the configuration file.
0:29
First of all,
let's clear up some tabs we're not using.
0:33
So this Settings tab,
let's get rid of that, this one as well.
0:36
And also this Untitled that I was
using to do some testing of ligatures.
0:40
We don't need that anymore.
0:45
Now, in our terminal,
let's type the command tsc --init.
0:47
And what this command
has just done is create
0:55
a TypeScript configuration file
with these settings here set.
0:59
So it's got the target to es2016,
the module to commonjs,
1:04
strict to true, and so forth.
1:08
Let's actually go ahead and
look at that file now.
1:11
Let's go into our File Explorer and
click on the tsconfig.json.
1:14
Let's get rid of our File Explorer and
our terminal, as well.
1:19
So this file may seem overwhelming,
and it kind of is.
1:23
There are so many things you
can configure with TypeScript.
1:28
And it's helpful to see every
single possible option in a file,
1:31
with some helpful text on the right-hand
side to tell you what each option does.
1:36
There are also some really helpful
headings here, like Projects on line 5,
1:43
and Language and Environment on line 13.
1:47
Now, we won't go through every
single option in this file, I mean,
1:50
that could be a whole course unto itself.
1:55
But what we're going to do is
just talk about a few of them.
1:58
Maybe the ones you'll use mostly if you're
creating an actual TypeScript project.
2:02
First of all,
let's start with target on line 14.
2:07
The target determines what
version of JavaScript
2:11
the TypeScript code will compile to.
2:15
This is useful if you want to support
a specific version of Node.js for
2:18
the backend, which supports
an older version of JavaScript.
2:22
Or, you're targeting a browser,
like Internet Explorer,
2:26
that can only run an older
version of JavaScript.
2:30
For this project, however,
we want to use the latest
2:35
version of JavaScript that this
version of TypeScript supports.
2:38
To do that,
let's change es2016 on line 14 to esnext.
2:43
Let's scroll down to the next
uncommented line, and
2:51
that's here on line 28, with module.
2:55
A module is code that executes
in its own scope, and
2:59
doesn't know anything
about the global scope.
3:02
Remember in the last video,
we exported an empty object, and
3:06
that's a way of treating
a file as a module.
3:10
There is one other way to create a module,
3:13
which I will talk about
later on in this course.
3:15
Modules also make it
possible to import and
3:18
export bits of code from
different JavaScript files.
3:22
The value here is set to commonjs.
3:27
Now, I don't want to talk too
much about what commonjs is, but
3:30
basically it's a project created
by Mozilla that allows you to
3:34
have modules in JavaScript using
keywords like module.export
3:39
to export a module and
require to import a module.
3:44
If you've used Node.js before, you may
have seen this, but if you haven't,
3:48
don't worry.
3:52
Commonjs is a good setting to have
if your project is using an older
3:53
version of Node.js.
3:58
Nowadays, however, most modern browsers
and newer JavaScript runtimes support
4:01
something called ES modules, which allows
us to use keywords like import and export.
4:06
To take advantage of this,
4:12
we're going to change the module option
from commonjs to esnext, as well.
4:14
Make sure you're saving the configuration
file on each change you make.
4:21
Let's scroll down, again,
to find the next uncommented option.
4:25
And here it says on line 74,
esModuleInterop.
4:31
This option fixes a few issues
with importing modules from
4:35
projects that are not using ES modules.
4:39
I don't want to go into too much detail
about the exact problem this option
4:43
is solving, but it's related to
something called namespace import, which
4:48
is a way to import every single piece of
code that's marked with an export keyword.
4:54
This feature isn't really well-supported
for modules that are not ES modules.
5:00
So this esModuleInterop fixes that issue.
5:04
But for this course we're not going to
be mixing ES modules with commonjs.
5:09
So it's safe to change this true to false.
5:13
Next, let's talk about
the forceConsistentCasingInFileNames
5:17
option on line 76.
5:23
Despite having a really long name,
it's pretty self-explanatory.
5:25
This makes sure I'm importing a file
with the exact same casing as
5:29
the name I've given
that file on my system.
5:34
Let me actually show this
option to you with an example.
5:38
Let's save this file and go into our
index.ts that we had created up here.
5:42
We're going to import a file called
testfile, which doesn't exist but
5:49
we're going to create it.
5:52
Now let's open up our File Explorer and
6:01
create a new file called testFile.ts.
6:05
We're going to default exports an empty
object, sorry, export default instead.
6:10
And now if we close this and
go back to our index file,
6:17
you can see there's an error here
that says, there's already a file
6:20
in this project called testfile,
but the casing is different.
6:24
Here's a sneak peek of the error, and
you'll see the word casing down here.
6:29
If we go back into our configuration
file and make this flag false,
6:33
you'll see that the casing
error goes away.
6:39
In my opinion,
it's best to keep that option true, so
6:44
that you can import the correct file
name that's saved on your system.
6:48
So let's go back into the configuration
file and undo what we've just done.
6:54
Let's go back into our index.ts file and
comment that import out.
6:59
Notice that when I did import testfile,
7:04
I didn't have the TS extension, but
instead I had the JS extension.
7:07
This is something about ES modules.
7:13
If you haven't used it before,
it may feel a bit weird, but
7:16
that's just the way they work,
they expect JS files and not TS files.
7:20
Anyway, let's move on.
7:25
The next uncommented option is strict,
on line 79.
7:27
And what this does is, it allows
us to have stricter type checking,
7:33
which will help reduce
the amount of bugs in our code.
7:37
This strict on line 79 being true,
is the same as
7:41
setting line 81, line 82,
83, and 84 to true.
7:46
If we made this false,
we can kind of pick and
7:51
choose which strict rules
we want to be true.
7:54
Let's scroll down and
get to the final uncommented option
7:59
on line 101, which is skipLibCheck.
8:04
What this option does is,
8:07
it skips checking the types of
our type declaration files.
8:09
Now, we'll talk more about type
declaration files later on in this course,
8:14
but they're essentially a file,
specifically, for storing types.
8:19
Skipping these checks makes the overall
compilation time quicker, and
8:23
also makes sense if you don't
really care about taking
8:28
the types of other external files
that's a part of your project.
8:32
If you only care about checking the types
of the code that you've written, so
8:37
your source code,
then it makes sense to keep this true.
8:40
Okay, now that we've gone through all
the uncommented options in this file,
8:44
let's go ahead and compile our code
again to see if it makes a difference.
8:50
We'll go to View > Terminal, and
8:55
we can press up on our keyboard a few
times to run the last commands.
8:57
We want tsc index.ts,
that should compile to a JS file.
9:03
And let's have a look at that file here.
9:09
It looks exactly the same
as what we had last time.
9:12
This happens because the compilation
didn't take into consideration
9:15
the conflict file that we have.
9:19
You'll notice that this last command that
we ran is only running on a specific file,
9:22
and it's not looking outside of
that file for a configuration file.
9:28
To fix this, we can just run the tsc
command, which will look at all
9:33
the files in the folder for
a configuration file before compiling.
9:37
Now, if we hit Enter, you'll see our
index.js file looks a lot different.
9:43
It's using the const
keyword instead of var.
9:50
It's using string literals
instead of the concat method.
9:53
And it's using the export keyword,
instead of having a weird es module line,
9:57
which was what we have previously.
10:02
This is looking really good,
but we're not quite done.
10:05
Let's explore some more options
in our configuration file.
10:08
I'm going to close the file explorer on
the left, and close the terminal, as well.
10:12
Let's open the configuration file, and
10:16
we'll scroll up to an option
called isolatedModules.
10:19
You can press Cmd+F,
like I did, to search for
10:24
a specific module, or
you can scroll to line 72.
10:28
Let's uncomment this option.
10:32
So, in my experience, many TypeScript
projects I've worked on don't
10:35
tend to rely on the actual TypeScript
compiler to compile their code.
10:40
I know it sounds weird, but the TypeScript
compiler isn't the only thing that can
10:46
compile TypeScript to JavaScript.
10:51
There are plenty other open
source compilers out there,
10:53
some that are even faster than
the default TypeScript compiler.
10:57
And the reason that some of these
are faster is because the default
11:02
TypeScript compiler checks the types
in a file before compiling the code.
11:07
This actually makes sense,
but it can be time consuming.
11:13
And for larger projects, it's much
quicker to have one process that compiles
11:17
to JavaScript and
another process to check the types.
11:22
Now if you were to use another compiler,
11:26
what they tend to do is to work
through single files at a time.
11:30
So compile files, one by one.
11:35
And they don't tend to look
outside of that specific file
11:37
unless it's importing a module.
11:42
TypeScript, by default,
11:45
will look at all the other
project files before it compiles.
11:47
And this is why we had the issue
with our variable name called name.
11:52
If we get rid of this,
11:57
we have an issue that says there's already
a variable called name in this project.
11:58
And TypeScript knows this because it's
looking at all the files in this project.
12:02
By making this isolatedModules option
true, it forces each file to either be
12:08
a module itself by exporting a variable or
a function, or importing another module.
12:13
And this is the way those
other compilers work.
12:20
They're actually called chance pilots, but
12:24
I don't want to get into too much
detail about that in this course.
12:26
Let me show you a quick
example of how this works.
12:31
If we go into our index.ts file,
comment out the export object,
12:34
and create a function called logName.
12:39
We'll wrap all our code in this function.
12:44
And you'll see that there's
an error here that says,
12:48
this file cannot be compiled
under isolatedModules.
12:53
And the reason is because it's not
exporting anything or importing anything.
12:58
If we change this option to false,
you'll see that the error goes away.
13:04
But if I'm being honest, I kind of like
having files that are either modules or
13:10
importing other modules.
13:15
So I'm going to make this option true.
13:16
And to fix this error that we get,
I'm going to import our testfile.
13:21
Let's actually fix this
error by renaming this
13:26
testfile to have a capital T and
a lowercase f.
13:30
And that should fix our import error.
13:36
If for
some reason the error still persists for
13:39
you, you can open the Command
palette by pressing Cmd+Shift+P, and
13:42
reloading the window by searching for
reload.
13:47
Cool, so
if we were to open up our terminal now and
13:51
compile this file, You'll see that,
13:55
for some reason, our import does not
exist, but we have another export.
14:00
This is because TypeScript
automatically removes unused imports.
14:05
And because this file needs to be a
module, it does so by adding this export.
14:10
Let's change that.
14:16
I'm going to close our File Explorer,
open up our config,
14:18
bring our terminal down a tiny bit,
and search for
14:22
the flag called preserveValueImports,
which is just on line 69.
14:26
We're going to uncomment this line and
save the file.
14:32
This will keep all our imports,
even if we're not using them.
14:36
Now, let's bring the terminal up and
compile the code again.
14:41
If we look at our index.js file now,
we should see our import on line 1.
14:47
Now, let's run our index.js file
with Node to see what happens.
14:53
Okay, it looks like we have an issue.
15:00
It seems that Node.js does not
recognize this import keyword.
15:03
And this is because, by default,
Node uses commonjs for modules.
15:07
To use ES modules for our project, we need
to update that in our package.json file.
15:12
Let's go to that file by pressing Cmd+P,
and searching for package.json.
15:18
We'll open the package.json file
in our project-begin folder.
15:24
Let's scroll down towards the bottom and
15:29
create a new line called type,
and we'll make that, module.
15:32
Now, if we compile the code again,
we won't get that error anymore.
15:38
We also don't get the console
log of Hello Lucas.
15:44
And that's because we're
not running the function.
15:48
Now, I'm sure you know
exactly how to fix that.
15:50
But I'll just do it now,
in case you don't.
15:54
Cool, and now it prints,
Hello Lucas, in the terminal.
15:59
We've only just scratched the surface
of what options are available in our
16:03
TypeScript configuration file.
16:07
But what you've learned in this video
should be more than enough to get you
16:10
started with a simple TypeScript project.
16:14
In our next video, we'll talk about how
to use some basic types in TypeScript.
16:17
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up