Now that we have typescript installed on our system. If you're using a Mac and you're using the SublimeText text editor, the next step is to build in a great plugin that's actually created by Microsoft directly to give us a lot more power in how we use it and how we can build typescript programs. You'll find that this is really helpful early on when you're learning the typescript language, but you'll find this astronomically more helpful when you get into angular 2 development. So keep in mind, we're not just doing this for right now but this is also going to extend into when we start building in Angular 2 type applications.

TypeScript Documentation

So I'm here on the Microsoft home page specifically the page for the typescript sublime plug in and include a link to this in the show notes.

And if I come down this page has a lot of very helpful information such as how you can install the system along with some keyboard shortcuts that you can use. Now keep in mind these are not sublime specific. These are actually specific to the plug in. So until you've installed this plug in or if you're using a different text editor these ones will not work. Scrolling down. This is one of my favorite things are these screen shots and they have some great animations here showing the system in kind of in play and showing some of the cool things that it does including some very helpful information from a debugging perspective. And as we go through the course we'll experiment more with how this looks and how we can use it more when we test it out.

I'm just going to show you how it can do some really nice syntax an error highlighting and also part of the reason why you think this is really important to integrate is if you're new to typescript and especially if you're new to JavaScript a lot of times I've seen that students have spent a lot of time, and they waste a lot of time on very simple easy to find bugs if they're not using a tool to help streamline the work that they're doing. But what this will do is it'll help fix any little typos that you might have or it will give you an idea of the issue and say hey you know it looks like you're building this in such and such way, and it should be built this other way that kind of thing you know just kind of streamlining your whole process now.

The easiest way to perform this installation is to use package control now package control is something that is built on top of the Sublime Text Editor and you can access this specific page by going to packagecontrol.io/installation. And this is going to give you a direct page on how you can install this on your system. Now I already have this installed. However if you don't I'm still going to follow through and show you how you can use it. If you already have package control installed you can fast forward or not pay attention right now because we're going to be able to after it's installed we'll go in and install a plug in.

So the way that we do this is first we have to know which version of sublime we're using. So in order to find that out you can open up Sublime Text come up here and click on change log. And what this is going to bring up is the channel change log with all of the different changes and updates to the software.

You don't really have to care about most of these. However. This number right here where it says Build 3126. If you have builds in the 3000s. That means you're using Sublime Text 3 If you're using ones that have build's in the 2000s. That means you're using sublime text 2. That's easiest way to find out if you have downloaded sublime in the past year or so you're most likely using Sublime Text 3.

So to install this it's pretty easy you simply come and grab all of this code and copy it.

And then switch back here.

So inside of here you can go to View and then show console and inside of this you can paste in all of the values.

So here I can come and I'm going to get rid of this just so it's nice and clean and I can paste this in and all of this code from package control, when you hit return it will run and what this is going to do is sublime actually has a terminal's running in the background that usually you don't see unless you actually say you want to view the console but it shows all the different things that you're doing in the system especially related to how you're working with the text editor. So whenever you want to install something this is a great place to do it.

So after you hit return then you'll quit the application started back up and you'll be good to go with installing a package. So now that you have that done. Come over to the typescript sublime plug in page and it's pretty easy to find this. If you come down to installation it says if using package control for Sublime Text simply install the typescript package. If you've never installed a package before that's really not very helpful information. So you can follow along with how to do it and I already have it installed on my system because I've built several typescript programs and applications before. However it's going to look pretty similar with the way you're going to do it.

So to do this are going to switch back to the application and hit command + shift + P and this is going to bring up your command palette in sublime. Now hit escape to close it down if you don't want it. But the other way we can do it is by going to Tools and then clicking on command Palate going to bring the same thing up.

Now. If you just start typing in typescript this isn't going to do anything. The only reason I have all of these access points is because I already have it installed, but instead what you can do is type in package control install and now this is going to open up a window you can see it says on the bottom left hand side it's loading repositories and now this is loading the full library of the various packages associated with Sublime Text or old ones it has in its library.

So from here all you have to do is start typing in typescript. Now my system because I already have typescript installed is not going to show it. So what I'm going to have is going to be a little bit different than what you have. But. If you're following along just about typescript and it you're going to see one that just says typescript by itself and once you find it make sure it's the one that's highlighted. And so I can also follow along with this one and I'll pick out this typescript completion one and I'll hit return, and then on the bottom left hand side you'll see that it gave a little bit of feedback saying that that was installed.

So how do you know if it's working or not. It is actually a very easy way to tell. I have this hello world typescript code right here and as you can see this is the same one from one of our previous videos. This all works and we know that this is good code. Now what happens if I were to change one of these so instead the string data type. What if I said strings. Now notice right here we have this little underline underneath and it's a gives you little squiggly line. What that’s saying is that strings is not the right code to have right there, and if you want even more information look down on the bottom left hand side. You can see where it says cannot find named strings and even says the location of it. If I hit delete.
Now the line goes away. Everything is good to go. Same thing if I change a reserved word and say it was misspelling it instead. Thus you can see cannot find the word thus. So this is a really helpful kind of thing to have so you can have some instant feedback on if the code you're writing is actually the valid typescript. Now this won't actually write your program for you obviously you don't have to put everything in. You have to have systems that work together and communicate properly and you have to have the right logic in the programs. However what this is going to do is it's more just going to give you some quick feedback to ensure that you're following with the correct syntax which when you're learning a new language is actually really important.

So this is a tool that I think is very helpful. I found it incredibly beneficial when I was learning and teaching myself typescript so I hope that it's the same for you. So now that you have this installed, we're ready to start building, and learning how to use the typescript language.