Composite TypeScript Project

[00:00:00]
>> So we're going to begin step two, and I call this step composite project. So TypeScript has a way of describing a build process that involves multiple sub parts of a project. where they can refer, like pieces of the project can refer to build outputs of other pieces.

[00:00:29]
Right so this saves us from having to build our lowest level chunk, and then go and like separately build the next chunk which includes the lowest level piece. You can build these things as independent parts and they're sort of stitched together like a quilt without having to sort of do a lot of redundant work.

[00:00:49]
So if you go to two notes, page number two, or about to begin now, it only makes sense to talk about this concept. If we have multiple packages within our workspace because without that there will be nothing for us to stitch together.We can't really demonstrate that.This is a beneficial idea until we have,you know,two things that can possibly refer to each other.So I'm going up here into my course files folder.I'm going to go to Folder number two in case you haven't figured it out, each one of these is for a particular step of the workshop.

[00:01:28]
We're going to grab this utils folder, and we're going to drag it into our packages folder. So now You could use like, CP to do this on the command line if you wanted to. But the important thing is we've got the packages, and then within that types and utils.

[00:01:50]
Now, what we could do is we could give it, you know, ts config Just like what you see here, the same kind of deal that we had for the types folder, but we're gonna run into a problem here and that is that we have a bunch of different independent sources of truth where If we wanna change the strictness settings of our compiler or if we want to change our language level, right, so right now we're set up to support node 10.

[00:02:26]
But let's say we don't care about node 10 anymore. We only run on node 12. So we can go to es 20 in 2019. We would have to do that in each package. Right? This is a lot of redundancy. And a central theme that you're going to see us align with today is, we want to have one central place where these settings live.

[00:02:49]
And then very thin configuration files on a per package basis that we can kind of forget about. So we're gonna set that up right now. So what we're gonna do next is we're going to to create a source of truth, right a meaningful configuration file that we can sort of extend from in each package.

[00:03:12]
So we'll have one place where these important settings will be defined, regardless of how many packages we have in our project. So what I'm gonna do is create a new Ts config, inside this packages folder. And I take this like the reason I put this here is, it, pertains to each of my packages, all right?

[00:03:34]
So it's a sibling of the packages. That kind of makes sense to me as a convention, and I'm gonna call this Ts config. settings. json. And I'm gonna begin by going to the the TS config for types, right, which contains all of these values and I'm just gonna copy this And paste it into this new file that I created.

[00:04:01]
Now, if you take in the TypeScript course, you know that this, this here and in fact, you'll see in the, the tooltip that this points to the location of source files so we don't need this. Each package will be responsible for saying, Look, this is where my source code is located.

[00:04:20]
Really what we wanna share is all of this stuff here. Let me change this back to 2018 so we don't have any problems. So this is this is normally not a complete Ts config, but it doesn't need to be. It's really just one place where we have all the knobs that we can turn So that we don't have to worry about them on a per project basis.

[00:04:42]
Next, we can go back to our types Ts config. And we're actually going to delete most of this. So we'll leave our out dir and our root dir and delete the rest. And up here. We can say extends that Ts config settings. JSON. And we need to add one more thing here real quick.

[00:05:10]
composite. True. We're dealing with composite projects and we need to say this is one of them. This is a piece that comes together with other pieces to form the quilt. So, by extending from this file here and we can Command click on it and VS code to make sure everything's wired up the way it should be and it is We're saying just borrow everything you find in that file and then here's a little thin layer to put on top of it.

[00:05:43]
Now let's compare this with the tsconfig that's already in the utils folder. All right, so this looks like it needs some updating. The good news is, I'm gonna copy and paste. There's nothing in this file that is specific To utils or two types, so we can have the same, you know, like, paste everywhere, really thin Ts config in all these different places, one last thing that we need here so let me show you where we're at just to prove that the build still works Should And it does.

[00:06:26]
Now, one new thing popped up and that's this Ts config dot build info. If we click on that we can see that it is just a JSON file that contains a bunch of things that have a version In a signature, so you can think of this as a place where we track the checksum like the MT five checksum of the file, as it stands right now.

[00:06:56]
And, when it was last built, so you can see that these are equal to each other. And that means everything is up to date. This is what lets us do things like, when we try to build a project, we just want to update whatever needs to be built.

[00:07:12]
We don't need to build this whole thing. So this is where we track all that information. And then, you can see that there's some other stuff in here. This includes things that are built into typescript itself. So here like es2017 language features, es2015 language features. And then down here you can see that, all right now we're referring to things in my source folder.

[00:07:39]
That's your whole project there. We're not gonna look inside these files anymore, but I just want you to understand that they hold information that is used when determining whether the current build is in sync with the current source code. And that I believe means that subsequent builds are really fast.

[00:08:03]
So look at this 1.91 seconds. That was for us to do our first build, since we turned composite true on, right. And now look, we've got 0.39 seconds for another build That's much faster some work with skipped some significant work.