Transcript:
Alright! Hello everybody! So, I wanted to show you how to install TypeScript. So, first things first we’re going to open up whatever your favorite browser is, or whatever browser you have installed.
We are going to head over to nodejs.org. Now, you’ll see a page like this. It’ll give you a couple of different download options and you can opt for either the LTS or the current release.
Either one of those works. I’m going to say go for the LTS version. That’s because that stands for long-term support, so this is the version that’s going to keep getting security updates and things like that. That’s probably the one you want to go with. If you want to be on the bleeding edge, and have the latest and greatest feel free to go with the other one, it will work just as well. For this video I’m going to go with 10.15.1.
Very likely if you’re watching this at any point in the future these version numbers are going to be different.
Node.js does a lot of releases so, it’s totally okay if you’re on a later version than I am. Everything should work just as we;ll.
Download it.
Antivirus just finished scanning it, and here it is it’s open.
You might need to go find it in your downloads folder and double-click on it. I just had it run when I download it.
We’re just going to click through here. We’re going to accept the license agreement. We’re going to accept the default install path.
We’re going to leave all these things on the defaults.
Install.
We get our security prompt here will say yes so that it can install.
Give that a few moments. Alright, and Node.js has been installed.
So, how can we verify that things are working here? Well, let’s go to the start menu there should be something called Node.js command prompt in there and Node.js itself in your start menu. You might have to search for it. Here it’s showing up under my recently added.
So if we go in here we have an Node.js command prompt. This looks very much like any other command prompt you may have seen. Just for comparison,
Let’s open up the other one. You can see normally for just a plain old command prompt we get the windows version information.
But here we’re actually getting the Node.js version information. So, we can tell that things are working already. The way you can test Node.js is type node and hit enter.
And this little angle bracket should appear.
And we can start entering JavaScript code here. So, two plus two is four. Let’s see, we could do a setTimeout.
So in 5 seconds that should display something.
There it is.
If you want to get out of here just hit CTRL+C.
Twice.
And then you’re back on the normal command prompt. So, let’s. install TypeScript.
So, alright so to install TypeScript we’re going to use something called npm. If you’re unfamiliar with npm that stands for the node package manager and that’s how lots of different Node.js based libraries and programs are distributed, TypeScript among them. So TypeScript is written in JavaScript and it is distributed
Via npm because it runs on Node.js. So, how do we use npm to install it? Well, here in this Node.js Command Prompt we’re going to type npm install –global typescript . Going to hit enter.
Give that a few moments to do its thing.
And you’ll see here it says added one package from one contributor in one second.
Now it’s very likely that you’ll see a different version number here. TypeScript also like Node.js releases fairly frequently. TypeScript is really good about backwards compatibility, so you shouldn’t have to worry about anything you see in this video or any later video being incompatible. If you wanted to be on the exact version that I am going to show you, though, what you can do is we’re going to do:
npm uninstall --global typescript
And similar to before we’re going to do:
npm install typescript@3.3.3
and so if you add that @ sign and then the version number, that’s going to guarantee that that’s the version you’re going to install rather than whatever the latest is which is the default.
There we go. We’ve got that working.
So now what I’m going to do is create a new folder on the desktop. We’going to call it “test” and we’re just going to see if TypeScript is working. It’s installed but is it actually working? We’re going to open up “test”.
We’re going to create a new file.
We’re going to call this main.ts. All TypeScript files end in .ts So, if you do what I did there and go to “New Text Document” it might not let you edit the file extension depending on what you’re doing, and you could end up with something that’s actually.ts.txt, which really isn’t what you want. The way you can check for this is you can go to this View tab that’s up here and make sure this “file name extensions” checkbox is checked.
You can see if I uncheck it the file extension goes away, and you can’t tell what it is. If I check it it tells me we’ve got main.ts which is what we want.
So we’re going to move our Command Prompt into this folder. How do you do that?
I’m going to click here to get the full path to this folder. Then type cd which stands for “change directory” and do a quote.
If you right click it’s going to paste what you just copied.
We’re going to do an end quote.
And here we are in that folder.
Now in order for TypeScript to compile something it needs a configuration file.
We can create the default one by running:
tsc --init
If we hit enter, it’s going to create that file for us. So, you can see this tsconfig.json file has been created. Don’t worry too much about that file I will be creating a video explaining exactly what it is.
Why we use it, how to use it, what the different options inside it mean for now all we need to know is that we need it there and now we have it.
Now before we go compiling anything with TypeScript we should probably put something in this main.ts file for TypeScript to compile. So, we’re going to open up notepad. Feel free to use any other text editor of your choice. That’s just all I’ve got on this particular machine at the moment.
And we’re going to go in, and I’m going to switch this over to “all files” so I can see my main.ts and we’re just going to write a super simple “Hello, world!” program.
There you go, there’s your “hello world”.
Hit CTRL+S to save it. Minimize that.
And then to get TypeScript to compile your files.
Just run tsc.
It will find all the TypeScript files in the folder and compile them. You see we now have a main.js file.
We run that made that main.js file through Node.js.
And see we’ve got “Hello, world!” Awesome! Exactly what we wanted.
So everything’s working. If you’re seeing the same thing, hey you’re good to go, you’ve got TypeScript installed.
One other thing I wanted to show you.
Was that you can have TypeScript, rather than having to rerun it each time you change something, you can have TypeScript watch for changes. So, what we’re going to do is do:
tsc --watch
We’re going to hit enter.
See it gives us a little message “starting compilation in watch mode”.
I’ll move this so you can see it, and then I’m going to say “Hello World! Again!” and I’m going to hit CTRL+S to save right now.
And you see that flashed a bit. It said “file change detected”, “0 errors”.
We’re going to open up another Node.js Command Prompt.
Do the same thing we did before so we can run this.
You can see if we run our main.js, hey it says hello world again just like we wanted.
One thing that’s really nice about this is that if you make a mistake, here I’m going to forget to have the closing parenthesis and semicolon, if we save this TypeScript is going to give us an error and say “hey! I expected a closing parenthesis here!”
So we can add that back in and save it and everything’s happy again.
Very cool, you’ve got TypeScript installed!
By the way if you’re interested in going deep into learning TypeScript I’ve got this TypeScript by Example course that I’m working on now. You can head on over to typescriptbyexample.com. Scroll down to the bottom, and you can put in your email address to be notified when the course is released. Also, stay tuned to this YouTube channel for future updates. Thank you so much for watching!