Migrating from JavaScript to TypeScript

[00:00:00]
>> Anjana Vakil: We've been talking about syntax and adding type annotations to all the things, variables and function parameters, function return types We talked about reusing types with type aliases and combining types together with stuff like the pipe operator to make union types, talked about array and object types So we've got a lot of syntax in our tool belt now

[00:00:29]
Time to put it to work So, in our second exercise, which you will find in the two annotations slash exercise directory, we are going to start moving from writing JavaScript to actually writing TypeScript So, for this one we're going to CD into that directory And where were we here OK, so we're in the root directory I'm going to move into the two annotations exercise directory, and in there, we will find a file called type.js

[00:01:19]
And you can take a moment to look at it and see what's going on And essentially what we've got here is kind of an excerpt That is, imagine this is sort of code that is part of a wider app where we're building some kind of event directory Spoiler alert, we're going to look at an app like that later But for now we've just got this script and we've got some event data, we've got some functions here

[00:01:54]
And we've got some comments, just human readable comments that are not actual type information that are going to hopefully point you in the right direction And we have a very simple test suite, which is really just a couple of comparisons, but essentially, if we run this file, it's a JavaScript file, so we can run it with Node We will start to get a sense of what's going on here

[00:02:23]
So let's try running this with Node.js And who boy, yes, well We've got cannot read properties of undefined, so we must be doing something right OK, so we have some problems Houston, luckily not, you know, problems in outer space where no one can hear you scream at TypeScript compiler, but we are going to need to start actually writing TypeScript to fix these problems

[00:02:59]
How do we do that So first of all, we're going to rename our file.js to .ts You can do that at the command line, you can do it in your finder in your code IDE, whatever, but for now We're going to just rename it And so now I no longer have a .js I have a .ts with exactly the same stuff in it Now, as we said before, this is valid TypeScript because all of JavaScript is valid TypeScript because TypeScript is a superset of JavaScript

[00:03:44]
So congratulations, your first TypeScript file exists Now we can no longer rely on being able to run a .ts file the same way and with the same tools that we're always used to running .js files Now, as I think somebody mentioned in a question earlier, newer versions of Node can run .ts files, but the support isn't totally there yet, and for now, and again, not knowing everybody's version of Node, etc

[00:04:22]
For now, we're going to use a little utility called TSX Not to be confused with the extension .tsx which would indicate a TypeScript like React JSX version or analog TSX is for TypeScript execute, and it's just another little program that we can run like tsc, which is TypeScript compiler, but this one is just a utility that allows us to actually run a .ts file as if it were a JavaScript file

[00:04:58]
So this is a utility that you might run into in more real world TypeScript projects, especially if they're not using the cutting, bleeding edge, latest Node version, whatever, which, you know, we again, don't want to always rely on So, we need to install this tool, which we can do with our good old friend, global npm install So I'm going to in whatever directory do npm install -g TSX

[00:05:37]
And now, hopefully, I have a TSX command line And if I just run it with nothing, it's essentially dropping me into Node So, OK, there's some Node going on under the hood here I'm just going to Control C, Control C, and we can again, we can just check that this works with like a TSX version, and then it's going to tell me what version of TSX and the version of Node it's running on

[00:06:01]
So what's going on here under the hood is a little bit out of the scope of this, but suffice it to say we need to do some extra stuff to allow something like Node to run TypeScript files in the way that it's used to running JavaScript files, and newer versions of Node are going to have that built in, but utility tools like TSX can also give us that

[00:06:27]
So, now that we have TSX installed, we can run it on our TypeScript file So we can do that with the command TSX type me .ts Oh good Another cannot read properties of undefined, but it ran It tried, it tried to run our code And the cool thing is that similar to workflows you might be used to in JavaScript where you will kind of watch a file for edits

[00:07:00]
We can do that with TSX too, so we can run the command with the watch flag And instead of exiting with this very verbose error message, if I run it with the watch flag, it will still give me all that error message, but it'll say, waiting for file changes before we're starting And if I say, do something else, up here and save, we'll notice it automatically rerun

[00:07:30]
And hopefully, since the first line of the code wasn't problematic, we can see that my changes are actually getting picked up here So this is a helpful tool sometimes when you're just like, you want to quickly iterate on a file and you don't want to have to go and run it through all of these manual steps over and over again OK, I'm going to take out my very unhelpful console log here, and if I save it again, it just goes back to the output that we had before, there's no high