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 NPRM to install typescript as a global module.
We're also going to install a second module called T.S.A..
T.S.A. 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 set up 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 Dastgir and I'll get TypeScript and TSD node like so.
All right, so 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 I can run the compiler by running TSC Dash
dash help like so.
So we installed a package called TypeScript.
It gives us access to a command called TSC, which is sought 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 help messages appear on the screen like so if you
see any air that means that you're NPM installation probably has a little issue and you'll need to do
a little bit of troubleshooting.
OK, so that's pretty much it for the actual typescript set up 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 it one time.
So I'm going to go through the installation process here really quickly.
Well, 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 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.
All you have to do is go through the installation process.
It's just a couple of clicks.
Now that we've got the 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 this 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 set up 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
set up steps right here.
The first thing I'm going to do is set up code in my path variable.
And what this essentially does is allow me to launch my code editor 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 command pallet.
And then once here, I'm going to search for ad path, actually, not ad path, I think it's install
path.
There we go.
So install a code command in path we have 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 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 formatter.
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.
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.
Well, then, look for extension's.
And then on the left hand side, I'll search for prettier.
And it's going to be the first one right here by SBN Peterson, so I'll 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 format's 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 you, I'm looking for preferences or civic 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 we'll see 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 cannot use either single quotes or double quotes safely with typescript.
I just prefer single quotes.
So to 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 sudden 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 two like so.
All right, so last thing, I'm going to set my theme to be civilized light specials, going to change
the coloring of my editor a little bit.
So to do so, I'm going to go back over once again.
I'll look for theme.
I'll find color theme right here, right now, the default is dark, and I'm going to change it to solar
rays light instead.
And that's it.
OK, now one last 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 going to deselect 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 going to start writing some code in the next video.