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
Let's create a simple TypeScript project. For this video, you'll need to have node.js installed.
If you downloaded TypeScript locally, you don’t have the tsc command so you can't run tsc --version or tsc index.ts to compile into a js file.
To follow along, you’ll need to add npx before the commands that I enter, so npx tsc --version for example.
Resources
Related Course
Note
Instructor has the Error Lens extension installed. This causes the errors to be shown in line with the code. If you don’t install the extension you can view the errors by hovering over the red squiggle line.
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
Okay, so in the last few videos,
0:00
we've learned what TypeScript is and
the benefits of using it.
0:02
In this video, we're going to
create a simple TypeScript project,
0:07
something like a Hello World.
0:12
For this video, you'll need to have
Node.js installed on your machine,
0:13
it's pretty simple to set up.
0:18
Just head over to
the official Node.js website,
0:20
download the installer, and install it.
0:24
Before we continue, I just wanna spend
a few minutes going through my setup.
0:28
Whenever I screen share some code, there's
always somebody who wants to know what
0:32
theme I'm using, what font I'm using,
and what kind of terminal setup I have.
0:37
So let's run through that now.
0:42
For this course, I'm going to use
Visual Studio Code as my editor,
0:45
and I've got it set up with
the default dark theme.
0:50
I use a font called Fira code or Fira
code, and I have font ligatures turned on.
0:54
If you don't know what font ligatures are,
1:01
they basically make the code
a bit easier to read.
1:04
I'll show you right now.
1:08
If I open the command palette by pressing
shift+Cmd+P and typing settings,
1:10
I'm just gonna do a search for font and
scroll down here to the ligature section.
1:15
If I click on Edit in settings.json,
1:22
you'll see that font ligatures
here is set to true.
1:25
Let's open a new file and
just type a few things like triple equals,
1:29
double equals, and
equals with a greater than sign.
1:33
You'll see that these look a bit styled.
1:36
If I turn off the font ligatures or
change the true here to false and
1:39
safe, these go back to the way
that you'd expect them to look.
1:44
For this course,
I'm going to keep the ligatures on so
1:49
that it's easier to read the code,
all right?
1:52
But if you're not using
the same font as me, or
1:55
you're not using font ligatures,
please don't worry,
1:59
you can still watch and benefit from
this course without any of that.
2:03
For this course, I will be using
the terminal that comes with VS Code.
2:08
To get access to that, go up into few and
2:14
click on Terminal below Debug Console.
2:18
I use something called zsh or
2:22
zsh as my shell with
the theme called spaceship.
2:25
Again, if your terminal or
shell look different from mine,
2:30
don't worry about that.
2:35
What I'm gonna do now is run a command to
check the version of node that I have.
2:37
I'm gonna press node -v,
which will show you I'm using node 18.7.0,
2:42
which is the latest version of
node at the time of recording.
2:48
If you're watching this code
in the future and 18.7 is old,
2:53
then any LTS or long-term support
version of node should just be fine.
2:59
I won't talk about the extensions
I've installed in my VS Code,
3:05
because we won't be using most of them for
this course.
3:08
However, I will say that for
code formatting, I use Prettier,
3:11
which you'll see in the bottom
right-hand of the screen.
3:16
And for comments,
3:20
I use a plugin called Better Comments just
to give certain comments different colors.
3:21
But again, you don't need any of these
plugins installed on your machine
3:26
to benefit from this course.
3:31
Okay, so with that out of the way,
let's go ahead and create a new project.
3:33
You can follow along in whatever folder or
directory you want, but
3:38
I'm going to be using the project
file that comes with this course.
3:43
You can download it in
the download section below.
3:48
We're going to be working from a folder
called 3-setting-up-a-project-begin,
3:52
and you can find this in
the Getting Started folder.
3:58
You'll notice there's already
a folder called setting up a project.
4:02
And If for
some reason your project doesn't work, or
4:06
you want to get a sneak peek of
what the final code will look like,
4:10
you can go ahead and
look inside that folder.
4:14
Now, let's jump into the terminal and
change directory into that folder.
4:17
Since TypeScript isn't installed
out of the box on most machines,
4:29
we need to get it from an external source.
4:33
The most popular way to get TypeScript is
by using the node package manager or NPM.
4:36
NPM comes with Node.js, but
we need to initialize it in our project.
4:43
We can do that by simply
running npm init -y.
4:49
The y flag automatically says yes
to any question that will probably
4:54
get asked during the setup.
4:59
Now, you can see in my terminal,
there's some extra information.
5:01
It's got a version 1.0.0 in red and
a version 18.7.0 in green.
5:05
The version 1.0.0 is the version
of our package.json file and
5:12
version 18.7.0 is the version of node.
5:17
But again, if your terminal does not
have any of this extra information,
5:20
don't worry.
5:25
This is something specific to
the spaceship theme that I've
5:26
installed in my zsh terminal.
5:31
Now that we've just initialize
NPM in our project,
5:34
we should have a file called package.json.
5:38
Let's install the TypeScript compiler.
5:43
To do that simply run npm i for
install, -g for global, and typescript.
5:45
The -g flag means that typescript will
be installed globally on our machine,
5:53
which means any future projects
we create will have access to it.
5:59
If you don't want to install TypeScript
to globally, simply remove the -g flag.
6:03
Okay, let's make our
first TypeScript file.
6:09
In our folder,
let's create a file called index.ts.
6:13
As you can guess,
the .ts extension stands for TypeScript.
6:19
Let me hide this left navigation,
and bring down the terminal as well.
6:25
We're going to create
a const variable called name,
6:31
which will be of type string and
have a value of Lucas.
6:35
We'll create another const
variable called msg,
6:39
which will also be a string.
6:45
This would be a string literal
with the word, Hello, but
6:48
also the variable name in Italia.
6:53
Finally, we console.log(msg);.
6:56
Now, before I continue, this colon and
7:02
string text is called a type
annotation in TypeScript.
7:05
Of course, I'll tell you more
about this later in the course.
7:10
But for now,
let's just carry on writing this code.
7:12
Now, you might see an error like
the one we have on line one.
7:16
This says you cannot re-declare
the block script's variable called name.
7:20
And this error happens,
7:25
because there is already a variable
in this project's folder called name.
7:27
So TypeScript can compile
all the code inside a folder
7:32
into one JavaScript's file.
7:37
And this error is essentially saying,
if we were to do that,
7:39
we've got two variables in this
project with the exact same name.
7:43
So there's going to be a clash.
7:48
We can fix this by
exporting an empty object.
7:50
This tells TypeScript to
treat this file as a module.
7:56
This means that all the variables and
functions in this file have their
8:00
own scope, and they won't be exposed
to other files in this project folder.
8:06
There is actually a slightly
cleaner way to solve this issue,
8:11
which we'll talk about
later on in this course.
8:15
But for now,
we'll leave things as they are.
8:17
Okay, now that we've written some code,
let's compile and run this file.
8:21
I'm going to make the section
at the bottom a bit bigger.
8:27
And first ,let's check if our TypeScript
compiler has actually been installed.
8:30
I'm sure it has, but let's just check way.
8:36
To do that, we can write tsc for
TypeScript compiler, and do --version.
8:39
If you get a version number,
8:46
it means that the TypeScript
compiler has been installed.
8:48
Now, let's compile our index.ts
into a JavaScript file.
8:52
To do that, let's write tsc index.ts and
hit Enter, perfect.
8:57
To check if that's been compiled,
let's go into our file explorer,
9:03
and we'll see we have a new
file called index.js.
9:08
Let's run it.
9:11
And we can run node index.js,
and just like that,
9:13
we see it's console.log
Hello Lucas just as we expect.
9:17
Let's take a look at our
compiled JavaScript file.
9:21
Hang on, this looks a little weird.
9:30
This isn't how I'd expect
this file to compile.
9:33
Firstly, it's using
the var keyword instead of
9:36
the const keyword we used
in the TypeScript file.
9:40
Also, if you look at line 4, you'll
notice it's using the .concat method,
9:44
where we used string literals.
9:50
Now, this happens because by
default ,TypeScript compiles to
9:52
an older version of JavaScript.
9:57
This would be fine if we wanted to
run our JS code on older browsers,
9:59
but most modern browsers
can read modern JavaScript.
10:05
So in the next video, we're going
to go through ways we can configure
10:10
TypeScript to compile to a more
modern version of JavaScript.
10:14
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