Web Class: An Introduction to TypeScript

Web Class: An Introduction to TypeScript

You can access the full course here: TypeScript for Beginners

Transcript 1

Hi everybody, my name is Bryce Airs and I’ll be taking you through TypeScript today. So, TypeScript is a super set of JavaScript meaning that JavaScript is valid TypeScript, however TypeScript is not valid JavaScript.

So TypeScript has to be transpiled into JavaScript in order for it to be compatible and run on various browsers. But it does some very important things for us and it gives us type safety as well as gives us Intellisense, meaning, as you can kind of see here, as you start typing it automatically will bring up and try to autocomplete what it is you’re typing which can be very beneficial. Helps prevent a lot of typos and errors and such. So, let’s go ahead to get started, let’s go over to Node.js.org and here you will see two different downloads you can get. I’m on a Mac, if you’re on Windows it probably says Windows there or Linux. But go ahead and select the one that says LTS, long term support, this is going to be, not the most recent, but it’s the most stable.

So go ahead and click on that to download, that will download to your computer, then once it’s downloaded just double click to install. Then, from there, you need to install TypeScript. So after you install Node you should have NPM available, which NPM is a Node Packet Manager. So from here you could download this, but we’ll actually go to the quick start. Excuse me, not the quick start. Here you can see if you’re launching it using TypeScript with various things. On a future video tutorial I’ll be using Angular and Angular CLI specifically which will automatically transpile your TypeScript into JavaScript.

Let’s go to the documentation here, actually download. So if you click on the download link, and this is over at typescriptlang.org then click on the download link and you’ll see this NPM install. So you can take this, oops, there we go. And control c, or command c on Mac, and we come over to our terminal and you can paste that in. And that will go ahead and install TypeScript. So now if you type which tsc, if you’re on Windows it’s probably a different command, to figure out where it’s located. But great, so it shows we have it installed. So now we can run this TSC command, now we’ll go ahead and transpile our code for us, which is super handy. So next we need an editor.

So the editor I recommend is Visual Studio Code. It has great support for TypeScript, there’s a big button here, download for Mac. Probably says download for Windows, or Linux, et cetera.

So go ahead and click that, download it, and then once it’s downloaded double click to install and go through the install commands. So in the next video we’ll actually go ahead and create some files and get started.

Transcript 2

Hey, everybody, welcome back; in our last video, we got Typescript installed, node, with node npm installed, and we also installed the editor, we haven’t launched any of it yet, so let’s go ahead and create our first file, here, so we can actually open up our editor, say code dot, and if that didn’t open up for you, you can manually open up the editor, and you go up here, and you go File > Open, so here, we’ll see Open Editors, these will be files that we currently have open, which we don’t have any.

This is for searching, this is for source control, this is Debugging, and then here, we have Extensions, go ahead and type in typescript, and you’ll see one called TypeScript Hero; this is one I recommend, click the Install button, it will probably ask you to restart, you just click the button, and it will restart for you.

Perfect, so if we go back over here, we can click the New File button, or we can right click and say New File, and we’ll say main.ts for typescript, make this a little bigger, so you can see, and from here, we can start working on our project, so to get started, I’m going to type in export, and we normally don’t have to do this, this is just because we can get some weird errors, since we won’t actually be exporting or anything, we’ll just be doing all our commands in this one file.

So, the first thing we want to talk about is, normally, in javascript, when we declare a variable, we say var a equals 10, but we’re typically not going to use var if we can help it; what we want to use is let, and const, so let is just like var, except to the way it’s scoped, so let kind of helps you in some of those gotcha cases, it’ll actually scope it to the curly braces, so it’s block scoped, rather than var, is function scoped, so only when it’s in a function is it actually scoped.

So, that’s kind of one of the big problems with using var in JavaScript, is it all of a sudden gets hoisted and becomes globally scoped; const, on the other hand, you can’t re-declare it, so then, if I tried to say, c equals nine, it’s going to not like that, because, cannot assign c because it is constant, or a read only property, so that’s kind of one of the big perks, there.

Some of the other variables we have, we declare, are, we can say, number, so we don’t actually have to do an assignment, like in javascript, you actually do an assignment; here in typescript, we can actually just say this is equal to something, and it’s going to be of type, number, so later, when we got to declare, we say d equals hello, it’s not going to like that, because hello is not assignable to type number.

So it’s a really nice feature of typescript, kind of catching all those cases where we don’t want to reassign something to the wrong type, so change this back to a, here, we can also say string, and also, of the type of boolean, and then we also have the type, any, so this is very useful in cases where you have some api you’re calling, that you may or may not be getting back certain property; you may have some weird cases, you’re not sure what the type is going to be, could be a string, could be a number, could be boolean.

So, you want to use any, in that case, but if you use any, you’re not going to get some of the helpers that you normally get, or the intel sense, excuse me, static type checking that you normally get; there’s also a cool feature of strings, which I will show you now, let’s say b equals, and we use back ticks, and this is for string interpellation, and we can say ‘Hello World’ from a multiline!

We can save that, so this is perfect, and then, in here, what we can do, is we can actually transpile that code, so we can say tsc, or typescript, say target, we’ll say ECMAScript 2016, and let’s say dot slash, we’ll say main dot ts, that’s the file we want to transpile, and we could actually use the dash dash watch property, here, so that’ll just go ahead and run, and I’ll watch for any file changes, so we come back over here, we’ll see we have another file, called main js, and you’ll see it’s transpiling to ECMAScript 2016.

We could also do, so you want target 2015, and I’ll watch for changes, say this is a number, and we save, and you’ll see it’s saved here, let’s see, that doesn’t look right; we’ll just leave this off, here, I want to give it a target, there we go, because in ES2016, you can actually use let and const, so this is actually reverting back to ES5, where it’s actually using vars, which is really nice, so you can see here, it automatically is throwing in the new lines for us, so that’s some really, really, cool features that we wouldn’t normally get.

Transcript 3

So in our last video, we learned how to declare simple types, like boolean, number, NE.

Let’s go ahead and get rid of that for now. And let’s work on some more advanced types here. So we can say let string array. And you’ll make that a type. Let’s say string array. You can use capital S, lower case s. But this is declare an array of strings. So string array could equal hello world. Oop. And there again, we caught a type-o. Perfect. So you can see there, works great. We could also do call a generic array. And it’d be type array of string. So this is syntactically the same as this guy up here. Only difference, you can’t have a lowercase here. So this has to be uppercase, and the type is declared here. So then you could say generic array equals, and we could say, say hey and hello.

So these are pretty much both the same. So we come back here and run that. Oops. Then we can see our code is declared with vars. Everything’s looking good. So the next thing we’re gonna look at is a Tuple. So, a Tuple’s just like an array, essentially, in this case. But it happens to have different types. So these work great when the type is all string, or all number, or all boolean. But what if you had mix-match of types? Which would be what a Tuple could be good for. So, in this case, we could say let myTuple equal, oops, not equal, we’re declaring a type here, not setting it to a value. And we could say number boolean. Great.

And now we could say myTuple equals and if we say this, it’s gonna get an error. Hover over, ’cause it’s not assigned a type number and boolean. Okay, so let’s fix it. Say this is a three. It’s still gonna be an error, because this needs to be a boolean, which is a true or false. And we do that, and we see it resolves. Perfect. So one last type here I wanna show you is enum. And we’ll say colors. And we’ll declare some colors. We’ll say red, blue, green, whoops. And now we can say let color equal, uh, let color be of type colors. So we haven’t actually declared a variable, we’re just setting an enum.

So this type’s a little different from the Tuple since the Tuple’s basically an array. And then we can say let color, oop, say color equals colors dot red. Which would be, basically, a zero. So we say zero, it would be the same thing. So if you hover over, in the enum, if you don’t assign properties, the default is going to be setting it to its numerical place in the Tuple. But we could say red, blue, green to give them default properties. Now we see we have a problem, ’cause this is expecting a string called red. So that doesn’t even work anymore. So you’d have to go colors dot red. Now you see, now that fixes our problem.

So that works when they’re defaults, and they’re default to numbers. But once you start assigning them to values, that’s when you have some issues. So this may not be that helpful, but imagine if you had the word gray. And people misspell this all the time. They could put grey or gray. Just wanna make sure we use gray. So now if we went colors dot and we get type ahead, type gray, everything works great if we type gray with an e, that’s gonna be wrong. Perfect.

Then we go console dot log. And we can say color. And we come over here, we’ll compile it. And then we’ll say node. Main dot js. So we wanna run the js file. And we get the color gray. Perfect.

Interested in continuing? Check out the full TypeScript for Beginners course, which is part of our Full-Stack Web Development Mini-Degree.