Compiling TypeScript Files

[00:00:00]
>> Anjana Vakil: A little word about TSX The tool, TypeScript Execute, not TSX, the file extension It is a development tool to help us not have to turn TypeScript into JavaScript so we can run it in Node or in our test or whatever, so that we can quickly iterate on our TypeScript files And with that watch option, it just keeps running and it keeps letting us know, showing us the output of that file

[00:00:34]
The thing is, it's trying to help us really quickly iterate on that file, so it is not itself actually doing any type checking for us So tsc checked types for us The compiler checked the types TSX is basically running our code as if it was JavaScript in Node, but it's not doing the rigorous type checking that tsc does

[00:01:05]
So you're probably thinking now, "Well, what the crap, Anjana You lied You said that we were using TypeScript to check our types Like, wasn't that the whole point?" And so, but here's where we are starting to get into some of the limitations of TypeScript And one thing is that because TypeScript has all of this information, it's looking not only at our code but at how JavaScript's array filter method works

[00:01:38]
It has a ton of info It's got a lot of cognitive overhead if we think about it that way And so sometimes it can get pretty slow So if we want to quickly iterate on editing a .ts file without having to convert it to JavaScript so we can run it to see what its output is, and we just want to make sure that our tests are passing and that we're getting the correct output and we don't really want to have every single squiggle all of the time, TSX is going to help us out with that, and it's going to save us time by not running the compiler every time, like running the type checker every time we update things

[00:02:24]
So we still want to check our code And what we can do now, we don't need the checkJs anymore because we got a .ts file So if we go back to our terminal, OK, we've got our test passing, OK, we're done with TSX Thank you Control-C, done Now, I still want to run my tsc command on this file to make sure everything checks out

[00:02:57]
Drum roll, please I honestly don't know what we're going to see right now Let's find out Nothing Which is the best thing you can possibly hear from tsc However, something did happen when I ran that command And if you ran it along with me, perhaps you noticed something happen Anybody notice anything going on here Any difference

[00:03:29]
Nothing at the command line Kicks out the JavaScript file Oh Wait, remember that type.js file that I renamed to type.ts and therefore shouldn't exist anymore What is it doing in here Well, let's look at what's happening This is not the code I wrote Did you write this code I didn't I honestly would never think to use a var or an empty string dot concat blah blah or whatever this is doing

[00:04:16]
Who wrote this code So any guesses where this came from Compiler The compiler So we mentioned several times that TypeScript compiles to JavaScript And when we run tsc by default, that is what it's going to do It's going to compile TypeScript to JavaScript And it's going to emit the JavaScript file corresponding to the input TypeScript file

[00:04:56]
And so if you remember, earlier when we were doing our checkJs, we had another flag in here: noEmit And so let's say I really hate .js extensions and I never, since I have TSX now, I never want to run a .js file again in my life I can delete this guy again Yeah, go to the trash And if I run the same command, but with that noEmit flag, it does not emit

[00:05:34]
What a concept But that's not the default The default is that the TypeScript compiler doesn't just type check without compiling anything, it actually compiles to valid, if weird-looking JavaScript code And what we are going to start looking at now is the amazingness of the TypeScript compiler and all of its many permutations and options, because that's going to be a big part of our life with TypeScript going forward.