Install & Run TypeScript

[00:00:00]
>> Anjana Vakil: TypeScript and all of its many use cases One of them that we mentioned briefly is that we can use TypeScript as a type checker And in fact, we can make use of TypeScript and get a lot of help from TypeScript even before we start writing any TypeScript Huh So TypeScript, as we said, it's a superset of JavaScript, meaning JavaScript is valid TypeScript, and so we can use TypeScript as a tool to help us fix JavaScript

[00:00:42]
And that's what we're going to be doing in our first exercise And there's also some great material on the TypeScript documentation site and in the TypeScript playground that you can check out on your own time to explore more of this functionality of how you can use TypeScript as a way to improve your JavaScript without writing a single .ts file All right, so in the course repository, the TypeScript First Steps, we have a bunch of sections and a little exercise directory, so if you move in a terminal into the 1-JavaScript/exercise directory, you will be in the right place for doing this exercise

[00:01:39]
So I've got the repository open here, and I am in the root directory, TypeScript First Steps, and I'm just going to run that command to cd into 1-JavaScript/exercise Cool And so the files that we should have in that are a file called checkme.js, which is what we're going to be working with, and a readme which has the instructions that we're going to go through together

[00:02:08]
So we don't need to read that right now, but if you were working through this on your own time or don't have time to do the exercises right now, you can find the walkthrough there Let's look at this checkme.js file and just try to get a sense of what's going on here This is a very complex JavaScript that is declaring a variable language with some facts and figures about when JavaScript was created and whatnot, and then we're console logging some stuff

[00:02:43]
Perhaps you're noticing already some issues in this file And there are some comments that are sort of intended to help guide you a little bit to notice what is a bit fishy about this file But for right now we're just looking at it, we're not running it yet Now what we're going to do, use TypeScript to see if there are any issues in this file JavaScript won't tell us if there's a problem until we're actually running the code in the browser and we get an undefined where we meant to give them a name, let's say

[00:03:27]
And that's what we're hoping to avoid by using TypeScript to check our JavaScript So how do we use TypeScript to check our JavaScript Well, first of all, we need TypeScript So what we're going to do right now is install TypeScript globally for ourselves so that we can use the command that is the TypeScript compiler, tsc That's what's going to run the TypeScript compiler that we're going to use for all kinds of stuff throughout the course

[00:04:03]
So if you're using npm or whatever your package manager is of choice, if you're using npm, you can install TypeScript globally with this command: npm install -g TypeScript, or that's shorthand for npm install global TypeScript And then just to make sure that it got installed properly, you can run the command tsc after you've installed it You can run the command tsc and pass in the flag version that is just going to output the version number of the version of the TypeScript compiler that you've got now

[00:04:46]
So let's do that I'm going to, in my exercise directory, although the global command doesn't really care where I am, going to npm install -g TypeScript Ah, it didn't install it because I already had it You might have already had it too Fair enough Let's just double check that it's working If I enter tsc --version, I should see version, some version number, and hopefully yours isn't super far away from that

[00:05:14]
If you've just run npm install -g TypeScript, now we have yet to use any TypeScript Just making sure we got it Now we're going to actually start leveraging the power of TypeScript What we're going to do is just type in this magic spell that we don't understand yet perhaps We're going to call tsc, the command tsc TypeScript compiler, and pass in a couple of flags and then the name of the file we want to type check

[00:05:54]
So we're going to talk about what these flags mean, but for now we're just going to run this on our checkme.js file with the flags --checkJs and --noEmit So if I run this now, ah, did y'all get something like this Some errors, some scary red squiggles Yeah, got scary red squiggles Excellent, because that's what we want We want TypeScript to complain about stuff that will create JavaScript problems before we are actually running the JavaScript code and feeling those problems

[00:06:45]
So what do we notice in the output of this command here Shout it out or type it in chat What do you notice What do you see What jumps out at you Other than squiggles Errors have specific identifiers Errors have identifiers, yep So they have little kind of numbers for each individual error What other information can I get about where these problems are, for example

[00:07:14]
Line information on the left, exactly We have line numbers here, and we even have character, like which character on that line is where the problem is But we probably aren't going to need to read those manually all that much because of these helpful squiggles and things And we're going to gradually evolve how those squiggles show up for us and where they show up for us as we go

[00:07:45]
And anything else jumping out at anybody Like that at the end it tells you which files, and so when you're in a huge code base, you know Exactly So it tells us, actually on each error line it's going to tell me which file I'm in, which right now is pretty obvious because we only ran it on one file, but in a huge code base, exactly, it's going to be very helpful to know how many files have problems, what those files are, which files have the most problems, etc

[00:08:15]
We're going to be dealing with that later But yeah, so we've already got some information here about some problems that otherwise would have just been runtime JavaScript errors, meaning JavaScript would output the type error maybe, or maybe not, or just coerce it to an empty string or who knows, as it's actually running the code in, let's say, the browser But here, because we're running TypeScript as a type checker on our JavaScript file at development time, at the time I write the code, we can actually already sort of see into the future of what problems would not work in, what code would not work in JavaScript and what problems that might create for our intended functionality

[00:09:15]
Like, for example, if I'm trying to log the language.name, but I type console.go, it's probably not going to work in JavaScript, but JavaScript doesn't care because it will just be like, oh, I just, undefined is not a function I don't know what glow is, but I know that it's undefined, and I know it's not a function Anywho, so we're starting to build already our skill at reading TypeScript error messages, which is, in my opinion, sort of 99% of working with TypeScript is understanding error messages.