This course has been updated! We now recommend you take the TypeScript Fundamentals, v3 course.
Transcript from the "Flags" Lesson
[00:00:00]
>> Mike North: If you checked out the project, which is bitly/fem-ts, for TypeScript, we can open up the examples folder and go to a little sub-project in there called hello-ts. And we're going to learn about how to use the TypeScript compiler to turn TypeScript into JavaScript.
>> Mike North: So I'm just gonna open up, in hello-ts, we've got a source folder and then Index-ts within that folder.
[00:00:41] There's just only one file in that folder. What we've got here is some TypeScript code, and it's just two functions, and then a tiny little program that runs, that uses the above functions. First, we have a function that returns a promise that resolves after a set period of time.
[00:01:05] So you can think of this almost, it's the responsible equivalent of a sleep or await, right? When we pause execution and JavaScript is free to go and do other things while we're waiting and then it'll resume after a specified number of milliseconds. It's just wrapping set time out and then resolving the promise.
[00:01:26] The second function, it adds two numbers together, and we begin by waiting half a second before we return the result. So it's a really slow calculator basically that can only do addition of two numbers, not incredibly useful. I've chosen this because it includes some modern syntax that some browsers and JavaScript environments we may care about, they can't understand natively.
[00:01:55] So we're gonna look at different ways of compiling this so that we can get an output that will run where we need it to work. All right, I'm gonna open up my terminal here. So, and just to be clear, it's important you use Visual Studio Code for this workshop.
[00:02:13]
>> Mike North: It is the editor that is built kinda hand-in-hand with TypeScript, right next to the team that built TypeScript itself. So it's possible to set up other environments such that you get the kind of experience we're about to see. But it requires much more effort than what you'll see right here.
[00:02:36]
>> Mike North: All right, so the first thing I'm gonna do,
>> Mike North: I'm gonna go into examples/hello-ts, so I'm sort of working in the hello-ts folder,
>> Mike North: And I'm gonna see what's in the source folder only this one file. So I wanna use this command tsc, which is TypeScript compiler, src/index.ts.
[00:03:04]
>> Mike North: And what we have here is another file that's popped up, index.js.
>> Mike North: And if we look at these side-by-side, it's a lot of extra code. I mean, if we try to find our original code, it looks like it starts down here,
>> Mike North: And then more kind of explosion of complexity.
[00:03:33] What we're seeing here is ES3 JavaScript, the kind of JavaScript you would run in Internet Explorer 6. So we probably don't care about Internet Explorer 6, but this is the default. By default, you build JavaScript that can run basically anywhere. We can compile it again with a flag that will indicate that things don't need to be dumped down quite so much, target ES2015.
[00:04:10]
>> Mike North: Okay, well, I can see right away a lot of the code went away. Line 31 is where we end. And we still have a little overhead here like some help or code that's necessary for compatibility reasons. But now I'm seeing promise pop up. Promise is a part of ES6 or ES2015.
[00:04:33] I don't see that we have await. So it seems that async and await are not something that is available with this version of JavaScript. So we can go up to ES2017 and we should see await comeback, and in fact, it does. There is our async and our await.
[00:04:53] All that's really change if we look at add numbers, is this little extra bits of information which I'm sure you can assume that that means like a should be a number and b should be a number. That has disappeared because that's not part of JavaScript. But other than that, I mean we have closest makes no difference the same number of lines of code, right?
[00:05:17] Now, if we tried to run this, let's let's try to run this in Node, cuz there's nothing here that's necessarily browser specific in terms of like functions we're calling. So we could just run node src/index.js, and we'll get an error, and that error says unexpected token export. Has anyone here worked with Node before?
[00:05:42] What am I running into here?
>> Mike North: Can you spot a problem that would make Node potentially unhappy?
>> Mike North: Export, can we maybe look, how does Node.js export things?
>> Speaker 2: Module.exports.
>> Mike North: Module.exports, right, and this is because commonjs modules are used for Node. We import things with require, we export things with module that exports.
[00:06:11] So we can add another compiler flag here.
>> Mike North: Modules or module commonjs, and we should see this change, and in fact it does, exports.addnumbers. And now if we will try to run it, everything works, right? We wait for brief period of time and then we log out the result of the adding three and four together.
[00:06:37] So there a lot different flags you can use here. Here's another one of my favorites, --watch. And that will leave the TypeScript compiler watching the source files, so that if I were to change something, like let's say I add a string here, result is,
>> Mike North: And comma, and I'm gonna hit Save and you can see the file on the right kinda updated automatically.
[00:07:04] So it watches your source files and will incrementally update only what's changed. It's a nice, fast, incremental compilation. It doesn't do your whole app, just what's changed.