This course has been updated! We now recommend you take the TypeScript Fundamentals, v3 course.
Transcript from the "Initializing" Lesson
[00:00:00]
>> Mike North: The last thing we're gonna do in this workshop is to give you an idea of how the TypeScript compiler sees your code. And we're gonna do this through taking a tour of a really quick and dirty documentation generator. That takes advantage of all of the information that compiler gathers as it parses and type checks your TypeScript source code.
[00:00:29] So let's look at in the notes section at number nine, Compiler API.
>> Mike North: So first, this is proof that I keep using isDefined over and over again. I just cannot seem to get by without it. We're going to import, this is called a wild card import. We're just sort of getting everything from TypeScript, from the TypeScript module.
[00:01:03] We could do import createProgram from TypeScript, and then we'd be able to use createProgram directly. All this does is it allows us to do ts.createProgram.
>> Mike North: There it is. And this is just because we need a whole bunch of different stuff, but it's a little nuanced. It's kinda TypeScript specific.
[00:01:36] You don't see wildcard imports in JavaScript.
>> Mike North: So the first thing we're gonna do, we're going to create a TypeScript program. And we're passing in two things. This first object here, options, it is equivalent conceptually to your ts.Config compiler options. So we've got target, we could have module and say ys.ModuleKind.CommonJS, whatever we want to put in there.
[00:02:08] These correspond to some of the command line flags we were looking at when we first played with TypeScript compiler and it's also what's in ts.Config. The second thing we must pass is rootNames. And so what I've done is using nodes path module, I've joined together an appropriate path that leads to the example we compiled in that first thing we did as we were poking around with how to turn TypeScript into JavaScript.
[00:02:37] So it's pointing to the ts file. The next thing we're gonna do is grab this program, and by the time we reach this line of code it will be compiled and type checked and ready to go. We're gonna get all of the source files and filter out those that are declaration files.
[00:03:03] And this is a good opportunity for me to kinda show you what all is brought in automatically to you program. So I'll comment that out temporarily, console.log(nonDeclFiles). Let's just call that files now since we're gonna skip the filtering and for the purposes of logging, I'm just gonna transform them, their objects, and I just want the path name.
[00:03:32] So I wanna run this code.
>> Mike North: So I didn't save. My bad. And we have a whole lot of different stuff. Someone has used TypeScript before. Can you tell me what these files are all about?
>> Speaker 1: There type definitions for various different libraries.
>> Mike North: For node, right? Anything that starts with @types, those are from the definitely typed, master repo of public type definitions.
[00:04:09] You could get to those by just clicking into stuff that I'm importing from the various node modules. At types node path, right, so these are all the different node modules. So let's keep looking around here. There's some more types nodes stuff, lots and lots of it.
>> Mike North: And just scanning for when things look a bit different.
[00:04:36] Here's mocha and chai, so I'm using those for testing. Okay, finally we have the original source file in hello-ts. Note that everything else has been a d.ts file. These are just declaration files that are being imported. And then underneath, because this is printed from the first things that are parsed all the way to the last things.
[00:05:03] Like, I lost my place, so here's the program. This is what I would consider my source code. Underneath that we've got esnext, right, these are actually declaration files that come with TypeScript itself. So that's where I can click on something like, what's a good example? Map, array.map. Part of the programming language, right?
[00:05:28] Well we find ourself in a declaration file, so he same mechanism that is used to consume library type information is used to consume the type information for everything we would consider JavaScript. Same goes with the dom API. And if we looked here, there are actually a couple different versions of these.
[00:05:53] Where, when we're saying, I want to target es17 or 2017 or 2016 or 2015, you just end up kind of picking a different file here. And a lot of the new one just stack on top of the old ones, cuz naturally, the language is additive as time foes on.
[00:06:11] So If we're gonna build the documentation engine we probably don't wanna document the whole JavaScript programming language. We're gonna end up touching on a lot of different things. And it sort of starts to get very big, very quickly. So as you touch the string, now they are all in string methods and those refer to arrays, and there are the array methods.
[00:06:33] Sort of unravels very quickly and becomes huge. So that is why I'm filtering through for only those things that are not declaration files. Only the ts files, not the d.ts files. And, thankfully, there is a property on there called isDeclarationFile. If I were to do the same thing now, console.log nonDeclFiles.map fileName, run it again.
[00:07:11] There we go, we're done to one. One source file, everything else is just extra type information that helps everything compile properly.