Transcript from the "Compiling TypeScript with TSC" Lesson
[00:01:12] And if we navigate to that here, there are a bunch of packages here which we'll get into a couple others in this course and in later courses. But welcome-to-ts within the packages folder, that's what we're looking for. We're gonna spend a little bit of time here for now.
[00:01:28] So I want you to look at the folder structure here, we've got a couple different things that are interesting. Ignore this dist folder for now, the fact that it's grayed out means it's get ignored. So this is not something that's checked in. We've got a couple different files here, three.
[00:02:03] We've got a couple scripts we can run, which we'll look into later, and then here's the volta stuff we talked about earlier. And then we've got something called a tsconfig and an index.ts. So let's look at this tsconfig. So we're telling the TypeScript compiler a couple things here in this config file.
[00:02:31] We're saying, where do we want the output? What language level do we want as output? So this would be ES 2015 language level. This includes the promise constructor, classes, right? Before ES 2015, we didn't have classes. We'll mess with this, and we'll see what happens as we change the language level.
[00:02:57] Module resolution node, you don't have to worry about too much here, but just think of this as the conventional setting where things are in node modules. And it's the module module resolution you would expect if you weren't using TypeScript. And then here include, this is where we say what are we compiling, where is the source code?
[00:03:18] We're saying, everything in the source folder, compile everything in there. Let's take a look at this index.ts file. So this is a very relatively simple TypeScript program. I have chosen a couple features here that will illustrate the difference between language levels here. So there are a couple things in here that only work in ES 2015.
[00:03:45] There's async await, which only landed in ES 2017, and then I've thrown in a static private field, which only works in ES 2022. So what we hope to see here is that all of this kind of boils down to ES 2015. There's a way that it can do that.
[00:04:09] But let's look at what this program does. So up here, if we ignore the types aspect of things here, we take in an argument n, and we resolve a promise after n milliseconds. That's effectively what this means. Here, oops, I spotted a typo. We're adding two numbers, not three numbers.
[00:05:01] So we're adding 3 and 4 here and we're waiting for that result to come in, which will happen after this half a second. And once that wait is done, we're gonna console.log the result. All right, here's our dist folder, we've got an index.js file. Now if we look at this, there's a lot going on here.
[00:05:20] So we've got something up here that looks like an awaiter. We've got something here that's called classPrivateFieldGet. And now it's sort of starting to look like our original code, but with some of the type information stripped out. So now we're here, we looked at this output, right? It's a bunch of junk up here, junk like, we didn't write this.
[00:05:48] We don't understand it. We can run this code. Just pass it straight to node, oops. Unexpected token 'export', mm-hmm, that's interesting. Well, we can't run it like this, right, with this export here. We'd have to make this a CJS module for node to just take it as is.
[00:06:27] So we could go into our tsconfig and we could say, "module": "commonjs". And we can run this again, you have to build it again and then run it again. So there's the build. And here, I just tried to run it, and there's our number 7. So what we've seen here, if we look at this dist folder, look at that, exports.addNumbers = addNumbers.
[00:07:01] So this, we can see TypeScript is able to generate a variety of different module formats for us, CJS being one of them. Let's play with that tsconfig a little bit more. I'm gonna just pull it off to the side here so we can see it at the same time, and we can get rid of, I'll just pull this down a little bit.
[00:07:24] So let's change our language level. Let's bump this up to ES 2017. Let's build it again and then we'll run it. And what we expect to see, some of this junk will disappear. And it did, that awaiter thing up at the top disappeared, and an await keyword has started to become present in our code.
[00:08:14] And you could see what's happening is it's generating this _Foo_bar. That's to sort of make up for this, it's trying to pick a secret property that nobody will guess accidentally. And it's putting the value of 3 in there and then somewhere up here, it's probably getting the value out of that object.
[00:08:35] It's sort of a compatibility layer, right, for ES 2017. What if we bump this up to ES 2022, built and run it again? Sorry, I didn't run that last version, but trust me that it would output the number 7. We'll run this one, there's 7. And now look, we've lost almost all of the stuff that was up at the top of our output file here.
[00:09:30] It's less of a concern now, cuz we're sort of past the Internet Explorer days and we can rely on browsers supporting pretty modern things. But this is an example of TypeScript acting kind of Babel, if you've used that before, which is a way you can sort of adopt very modern language features even if your target runtime doesn't support it yet.
[00:09:51] So that's one of the things TypeScript is doing for us. It's also removing all of that type information. So let's go back to our tsconfig and add an option here called declaration. And we'll set that to True. And we can run TSC again, and let's run it. Program still works, a new file has appeared though.
[00:11:33] You're back to typed code, because you kind of layer these two things on top of each other. You have the code that runs and the types that describe it.