Installing TypeScript on a Mac
This guide walks through how to install the TypeScript programming language on a Mac computer by leveraging NPM.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license

Now it's time for the moment of truth if you are on a Mac and you have homebrew installed and you have node in NPM installed then you are ready to go. So come up to typescriptlang.org, and this is the official typescript Website by Microsoft. And you can scroll down and it actually is very easy to install. And on the Web site it's a great resource for being able to learn more about the typescript language be able to see how you can integrate it in with development environments and various text editors we're going to specifically integrate it in with Sublime Text for the Mac so that we can see all of the great tools like syntax highlighting and code completion that it offers so we'll be doing that in the next lesson. But before we get there we first have to create our typescript system so let's come here. And I'm going to install typescript by copying this code.

sudo npm install –g typescript

The -g flag is it's an option in the node package manager that says I want you to make this library available globally. So the G stands for Global and then the name of the package and in this case it's going to be typescript. So I'm going to switch over to the terminal and I'm going to paste this in. At the very front of it type in sudo because I've had some issues when I didn’t use sudo on this. so you may need to do that as well. So hit return and this is going to go out and grab typescript for me. Typescript is on the system now, to test this out, we can actually play around with this a little bit even before we get into the language and the syntax so I'm going to go into the code, and I'm pretty sure I have this in devcamp tutorials rails angular. I’ll switch into the project that I'm working on right now for the rails Angular 2. So inside of this I have a full set of files.

large

Let me open this one up and sublime. And I'm going to use the TS which stands for typescript and I'm going to open this up and you can see this is some basic typescript code. So you don't really have to worry about this we're going to get into each one of these and especially in the angular application. But for right now you can simply know that this is some typescript code. Now it doesn't really matter what it does for right now I just want you to focus on the fact that this is kind of the syntax we have some things are specific only to typescript. Now to make sure that this actually works in that our install of typescript worked.
I'm going to copy this file over because if you notice when I did ls I have a typescript version but I also have a JavaScript version and this is because I was able to convert this typescript file into JavaScript so I wanted to do that but I don't want to cheat and have a file that I already created. So let me actually just copy the typescript file that I have right now and I'm going to copy and just call helloworld.ts And I'm going to open this up just so if you're following along you can see all of this code. And if you would like you can pause the video and type all of this in. It's not because you're going to be running it or anything like that because you don't have angular installed or anything like that. But the more important thing is I want to just show you that this works when you're installing it or that our install worked properly.

So we have helloworld.ts we have a couple import statements which I'm actually going to get rid of these so if you're following along. Don't type those in. Just want to make it nice and easy for you. I have a class here and inside of the class I have an attribute and I have a method and will say hello typescript. Hit save. So if typescript worked and our install worked then this all this code should be able to be translated into JavaScript and the way that you do that is you type in tsc and then the name of the file. So in this case it's helloworld.ts

Now if I hit return this should take it and convert it into a JavaScript file. Now if I type in ls you can see that we now have this hello world JavaScript file which means that everything did work on our install which is good. And now if we look at the JavaScript file you can see that this is the code. Code got converted to JavaScript, notice because JavaScript doesn't have classes it actually converted our entire class into a variable and what's called a closure. So it took the entire class component, put it inside of a JavaScript variable function and then it put the parameters inside of it.

So this is part of the reason why typescript is so powerful because I'm not sure about you, but I don't want to spend all day writing code like this. This isn't very intuitive. It's definitely not the first thing that would come to my mind for writing a hello world application. However this makes a lot more sense. It’s a cleaner interface. You notice some of the things like the static data types and different things like that. We're going to get into all this syntax. So as long as you can run TSC and then pass in a typescript file like I did right there, and if that creates a JavaScript file means that you have typescript installed properly.
So great job on that, in the next guide we're going to walk through how to install some helpful libraries and some packages on Sublime Text to make your development process a little bit more intuitive. Whenever you're building typescript applications.