Transcript:
Alright! Hello everybody! So, I wanted to show you how to install TypeScript on Linux. Before we get started, a word of caution. Every Linux distribution is a little bit different, in theory everything I show you here should work across most distributions, but it’s possible that yours might do something a little different. For reference, I’m using Ubuntu 18.04.1 LTS release for this video.
One thing I want to point out before I get started is that most Linux distributions have some sort of package management system that you may be able to use to install TypeScript. For example, Ubuntu offers the node-typescript package, which you can install via apt.
The problem is that these package managers often contain old versions of TypeScript, and TypeScript releases quite frequently, so today I’m going to be showing you how to install TypeScript directly from the source so you can be running the latest and greatest version.
So, to get started we’re going to open up whatever your favorite browser is, or whatever browser you have installed. Here I’m going to be using Firefox.
We are going to head over to https://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’ll 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 well.
Download it.
Alright, it has finished downloading, so let’s open a Terminal and extract the files and get started.
Here I’ve opened the default Terminal that comes with Ubuntu. We’re going to do:
cd Downloads
to get to our downloads folder.
We’re then going to type:
tar xvf node-v10.15.1-linux-x64.tar.xz
Hit enter. It’ll print out the files it unzipped and then we should be able to see the new folder.
Next we need to add Node.js to our PATH. We can do this by typing:
export PATH=~/Downloads/node-v10.15.1-linux-x64/bin:$PATH
Now that Node.js is on our PATH, we can test if Node.js is installed properly by typing:
node
and hitting 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 Terminal prompt.
In order to use Node.js and TypeScript in future Terminal sessions, we’ll need to put that PATH line at the end of your .bashrc or .bash_profile file, or whatever profile file your shell of choice uses if you’re not on bash. To do that I’m going to open up Ubuntu’s default text editor.
We’ll hit open, and navigate to our home directory. Note that you’ll need to ensure that hidden files are showing. I can do that here by pressing CTRL+H. I’ll open .bashrc, copy that line from before, paste it to the bottom, and then save the file. And then, hey presto, any subsequent Terminals we open will have Node.js available to us.
So, all that out of the way, let’s install TypeScript! In order 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.
How do we use npm to install it? Well, here in this Terminal we’re going to type:
npm install --global typescript
And hit enter.
Note that if you’ve installed Node.js and npm from your package manager, you may need to prefix the previous command with sudo to run it with root priviledges
And you’ll see here it says added one package from one contributor in 1 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 go back to the Terminal and run:
npm uninstall --global typescript
to get rid of what we just installed.
And we’ll then run a command similar to what we did before:
npm install --global typescript@3.3.3
When you add that @ sign and then the version number, it’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’re going to call it “test” and we’re just going to see if TypeScript is working.
Let’s open up “test”.
We’re going navigate our Terminal to this new folder as well. You can do this by typing:
cd ~/Desktop/test
Once you’ve done that we’re going to create a file named main.ts. All TypeScript files end in .ts.
You can do this by entering the comand:
touch main.ts
You’ll see the file appears in the folder.
Now let’s put something in this main.ts file for TypeScript to compile. So, we’re going to open up the default text editor that comes with Ubuntu. If you have a particular text editor that you prefer, feel free to use it.
I’m going to go to Open and find main.ts in the folder on my Desktop.
And then we’ll put in the simplest possible “Hello, World!” program and save it.
console.log("Hello, World!");
Now in order for TypeScript to compile our “Hello, World!” program it needs a configuration file.
We can create the default one by going back to our Terminal and running:
tsc --init
When 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.
And to get TypeScript to compile our main.ts file, just run:
tsc
and hit enter. It will find all the TypeScript files in this folder and compile them. You see we now have a main.js file.
We’ll run that main.js file through Node.js:
node main.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.
There is one other thing I wanted to show you: You can have TypeScript watch for changes, rather than having to rerun it each time you change something. So, what we’re going to do is do is go back to our Terminal and enter:
tsc --watch
See it gives us a little message “starting compilation in watch mode”.
And then I’m going to go back to our file and say “Hello World! Again!” and I’m going to save it. And you see that flashed a bit. It said “file change detected”, “0 errors”.
We’re going to open up another Terminal and do the same:
cd ~/Desktop/test"
that we did before.
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! That’s it! 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 https://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!