In this video we're going to do a little bit of environment setup once we set up our local machine to
work with typescript will then begin working on our first project.
So let's get to it.
The first thing we'll do is to install the typescript compiler to install it.
We're going to use NPM.
If you're here in this course I'm going to assume that you've got a basic understanding of both node
and NPM.
So I'm going to assume in particular that you've already got node and NPM installed on your local system.
If you don't you'll want to do a quick google search on how to install node on your local machine.
Again I'm really assuming that you've got that knowledge ahead of time so we're going to use NPM to
install typescript as a global module.
We're also going to install a second module called T S node G US node is a little command line tool
that allows us to compile and execute typescript with one command at our terminal.
We're going to use it in the first half of this course just for running some typescript very quickly
without having to setup a full tooling installation kind of deal.
So let's get to it.
I'm going to open up my terminal once over here.
I'm going to run npm install dash G and I'll get TypeScript and T.S. dash node like so all right.
That's going to take just a moment or two to install rather quickly once it is installed.
I can then make sure that it is successfully installed and then I can run the compiler by running TSC
dash dash help.
Like so we installed a package called typescript it gives us access to a command called TSC which is
short for as you might guess typescript compiler.
This is what we're going to use to actually compile our typescript code into plain JavaScript So if
I run this command I should see a bunch of health messages appear on the screen like so if you see any
error that means that you're NPM installation probably has a little issue and you'll need to do a little
bit of troubleshooting okay.
That's pretty much it for the actual typescript setup.
Now we're going to walk through a little additional setup here for setting up visual studio code.
Now this is a code editor if you've already got visual studio code installed I encourage you to still
watch this video because I'm going to show you some settings that are important for you to have if you
want to use another code editor inside this course.
That's totally fine.
I've tried out many other code editors and personally I think that visual studio code is one of the
best ones out there for working with typescript.
So if you've never used it I would recommend at least try at one time so I to go through the installation
process here really quickly.
First go to that link inside of a new browser tab and I'll find the green download button on the left
hand side once I download the zip file.
I'll then open it up that's going to instruct extract it here's the visual studio code application.
And if you're on Mac all you have to do is drag and drop that into the Applications folder.
If you're on Windows you're going to instead see a little installer.
Well you have to do is go through the installation process.
It's just a couple clicks Now that we've got the US Code installed.
We're going to do just a couple steps of configuration.
So this is what we're going to go through.
I'm mostly showing you these configuration steps just you understand the exact settings that I'm running
locally.
Now just to be clear I just did a fresh installation of the U.S. Code Like I completely deleted my previous
installation.
So when I go through these settings you're going to see a fresh installation being set up here.
So I don't have any previous setup whatsoever.
All right.
So let's get to it.
The first thing I'm going to do is open up a visual studio code
and it's going to take just a moment.
This first time that it boots up to actually open.
So it's going to let it do its thing all right.
There we go.
All right.
So once I've got visual studio code open we're going to go through each of these different setup steps
right here.
It's the first thing I'm going to do is setup code in my path variable and what this essentially does
is allow me to launch my code Ed from the terminal which I'm going to be doing quite a bit throughout
this course.
So to do so I'm going to go over to the editor and I'll go up to view and then find a command pallet
and then once here I'm going to search for ADD path actually not add path a thing it's install path.
Yeah.
There we go.
So install a code command in path 0 if to do is click that.
And that's pretty much it.
We'll see a little notification down here if I now flip on over to my terminal I can open up a new window.
Make sure you open up a new window if you try to run this command in an existing window it's probably
going to fail.
And then once over here you can open up your code editor in any directory by running code and then dot
like so now as you'll see it'll pop up in my code editor right away all right.
So let's keep going through these installation steps.
The other ones are going to be pretty quick.
The next one is going to be to install the prettier extension prettier is a code for matter.
It's going to take a look at your code every time you save a file and automatically format it in some
fixed fashion.
So I usually use pretty or just have some very consistent looking code and I highly recommend you try
it out as well.
To install this extension I'll go back over to my editor.
I'll find a view I'll then look for extensions and then on the left hand side.
I'll search for prettier and it's going to be the first one right here.
Bye has been Peterson soul hit install and that's pretty much it.
Now we're going to do a little bit of configuration on prettier.
We're going to make sure first that it formats every file when we save it.
So to do so I'll go back over I'm going to again go to my view menu and I'm going to look for excuse
me not view I'm looking for preferences or Soviet code preferences settings.
There it is
and then once I've got the settings tab up right here I'll do a search for format on Save and I'll see
in a setting right here called format on save.
So we just have to check that and that's pretty much it.
Next up I'm going to configure prettier to use single quotes.
Now this is entirely personal.
If you want to use double quotes totally fine.
You can use either single quotes or double quotes safely with typescript.
I just prefer single quotes to the set up prettier to format my code in that fashion.
I'll go back over my settings page I'll look for single quotes and I'll scroll down just a little bit
right here and I'll see a setting called prettier single quotes and check it
all right.
Next one is I'm going to make sure that I use two spaces for indentation as opposed to tabs.
Again this is very personal you can go either way.
I personally like to use two spaces for indentation so to do so I'm going to delete the search term
up here and then scroll down on the default settings here just a little bit and I should see tab size
right here.
Now let's change it to 2 like so
all right.
So last thing I'm going to set my theme to be civilized light so much just going to change the coloring
of my editor a little bit.
So to do so I'm gonna go back over once again I'll look for theme I'll find a color theme right here
right now the default is dark and I'm going to change it to soulless eyes light instead and that's it
okay.
Now one less little thing I'm going to do here I am going to hide this bar on the left hand side I can
find that setting by looking up activity bar so workbench activity bar visible and I'm just gonna do
select that's that little bar on the side goes away all right.
So that's it.
That's all the configuration I do to my editor.
So if you went through these steps you now have an editor that set up identically to mine.
So now that we've got everything set up for our local environment let's take a quick pause right here
and we're gonna start writing some code in the next video.