Compiler Targets

[00:00:00]
>> Anjana Vakil: So at this point, we need to start talking about the many JavaScripts And if anybody's seen Everything Everywhere All at Once, you understand why I needed to include this gif, and if you haven't, please go see it It's great, but just like Michelle Yeoh's character experiences an infinity of possible universes and possible different incarnations, so too has JavaScript experienced, maybe not an infinity, but a whole bunch of incarnations in the 30 years that it has been around

[00:00:39]
So looking at our .js, we already saw some interesting things, right Like these vars And some stuff like object defining property exports module, blah blah, and so on and so forth What I'd like y'all to do now is just type a magical spell in which is running the same command, but instead of the flags that we used before, we're going to use this flag target

[00:01:10]
And then afterwards we're going to type ES 2020 So back in my command line, I'm just going to run tsc target ES 2020 type me .ts And we're going to keep an eye on this file, this JavaScript file that's emitted Emitted that's English, right Okay Something happened What do we notice Let's, here I can, okay, well, let's try, we ran it with strict before, but let's just see what happens if we just take these flags out, okay

[00:02:04]
Changes all the vars Ah, so if I run it without the target ES 2020, we get a bunch of vars and stuff, and if I'm just going to run it again, target ES 2020 They're all consts now Also that stuff about yes, export, blah blah, that's not there anymore The code looks a little bit more like we're used to seeing usually these days So the syntax of the output JavaScript looks very different

[00:02:36]
It has different keywords, it has different features that we can use And what we're doing here is we are telling TypeScript exactly what version of JavaScript we want to target with our output files, and this is, we call it a target because we're starting at our source code and we're ending up at our target, and also because we have in mind, this code is going to run somewhere eventually

[00:03:16]
Hopefully, maybe And the question is, where is that code going to run Does it need to run on like super old browsers Do I know that it's only ever going to be run on my super overpowered, top of the line latest ES next, newest, hottest browser on my dev machine Is it going to be something that I want to run like pretty much wherever JavaScript can run

[00:03:51]
And that's where the target flag lets us specify exactly which version of the many JavaScripts, or to use its official name, the many ECMAScripts, ES 2020 for example, is a moderately widely supported one, but even better support we could get by using ES6, which was, or alternately referred to as ES 2015 That was, I believe the year where they switched the naming convention

[00:04:29]
And that is going to basically the syntax features, things like arrow functions that got introduced with that version Those are going to run in most browsers, but maybe not some old school 1995 Netscape Navigator or something that I just really, really want this JavaScript code to work on And so actually by default, TypeScript goes low with its version, its target version

[00:04:59]
So the default is ES5 and I think you might be able to go down to ES4 We can, well, I'll show you how to find out soon But we can also go all the way forward into the absolute latest, hottest, most newest fangled JavaScript, which in shorthand, we can use a target name called ES Next, which essentially is shorthand for like whatever the latest fanciness is

[00:05:28]
However, that means that then the output JavaScript code is going to contain syntax and features that are specific possibly to that new version, and it's not going to work if I try to run it in Netscape Navigator from 1995 So we need to think about not just the moment I write the code Like, is it going to show up in my IDE Am I going to get the type hints I want

[00:05:56]
But also writing TypeScript, it's great because of all the type info, but running TypeScript, as of now, it's not quite yet a thing, so what we're actually running when we run TypeScript is the output JavaScript And that means that we need that JavaScript to work in whatever environment we are intending this code to run in So that's where the target is like super important

[00:06:31]
Now there are other options that we can use to fine tune, as we said, kind of what tsc does and what it emits So for example, any guesses what this flag removeComments does If we look at our output JavaScript, there's all my super helpful, please do this because I said so comments And if we run tsc removeComments type me .ts Sure enough, it removes the comments

[00:07:11]
So a lot of the TypeScript flags like this are sensibly named, checkJs removeComments Some others are more obscure, and we're going to talk later about how we can figure out what does this thing do So we are starting to collect a bunch of flags here And each of these flags represents a different option or a different setting that we can tell TypeScript to pay attention to to affect what it reads in and what it writes out and various other stuff along the way, including, for example, how it finds types in our codebase, how it learns about the dependencies in our project, all of that good stuff

[00:08:04]
The thing is, with all these commands, we're going to start needing a bigger command line Like, that's a lot of flags to type out Am I right So far I've just been asking y'all to do a few at a time, but you wanna see something scary If we run tsc, and I believe the flag help And I expand this Oh, there's so many more Oh, man Look at all these options

[00:08:38]
Whoa So what we've been collecting here is just a tip of the iceberg of all of the possible TypeScript options And as the tsc help command help suggests, we can learn more about them on the documentation site So in the handbook, there's a whole bunch of information about all the various CLI flags and options that you can use But again, this is even scarier from the command line perspective, like, how are we supposed to be running this at the command line without losing our minds as developers