TypeScript References Exercise

[00:00:00]
>> Steve Kinney: So here's what we're going to do. You can grab that Enterprise UI workshop one that we had earlier. I do not care, because I couldn't make the decision either way. You can grab just the repo from main and kind of use some of the TypeScript tools that we saw earlier on that page to kind of see, because right now there is no, there's no optimization whatsoever with the composite true and the references and stuff like that.

[00:00:32]
You can either start from main, or there is a branch, which I think is like 04-mono-repo, which is right after we installed Turborepo the other day, right? Because Turborepo is going to do some interesting things too, right? Because Turborepo is not going to run the type check on a given smaller piece. So whether you want to do it off of main, or whether you want to do it off the one that has the Turborepo, I think both are interesting, right?

[00:01:01]
And you might even want to do a little bit of science and compare and contrast, but our kind of goal is to begin to set up the composite true and the smaller packages and see how stuff gets a little bit simpler and then effectively start to change stuff along the lines as well. If you were like, I don't know which one to do, I'd do it off of main, but if you have Turborepo installed, you don't want to figure that all out, I think both are fine to do as well.

[00:01:31]
But give it a shot, and especially if you're just running TSC, the turbo rebuild's not going to stick in there anyway, so it doesn't really matter. Either one of those branches is fine. But grab it, we're going to look for the smaller pack, the smaller tsconfig.json files and we're going to see if we can kind of tweak it and optimize it a little bit. So in this case, I'm going to, rather than jump between a bunch of very confused files of all the same name in the sidebar with my font gigantic, it occurred to me that looking at the PR diff was probably an easier way to see the files in context with a much smaller file tree on the side, so we'll look at it here as well, because again, it is just setting up that configuration.

[00:02:24]
And so this is a PR that's open on the repo as well for most of the things we'll do today. I also have a PR open that kind of, you can kind of see just the diff super easily. And for this one where it was 645 files, all named tsconfig.json, I felt like it was the right thing to do for this particular case. So starting at the top, you heard Robert say before when he was kind of doing his little due diligence that turning files into an empty array saved a whole bunch of extra stuff.

[00:03:07]
A lot of times we're used to, like, when we set our tsconfigs like includes and excludes, right, which takes file globs and we'll go find everything that matches that, right? And even if it doesn't take a glob, you give a directory, it will go find everything, right? Now, the kind of tsconfig that we have at the root of the project, its main job is to kind of, you know, it could be the one that we extend in a lot of cases as well, which we have there too.

[00:03:35]
But it's not really supposed to be checking anything because all of the code is in the packages. We don't need each package checking, and then a mega one also checking, right? The more important part that we kind of just make sure we have tweaked across the packages, so this is packages/user, and as you can see, it is more of the same as we kind of go through, is, you know, because shared doesn't depend on anything, right?

[00:04:07]
So it has no references, it is kind of just, it has no dependencies, right? Like, it's only what it cares about, but we're saying it's its own unit. And we're going to say that we're going to have a declaration file that we can omit from this as well. However, I think dashboard will probably, yeah, dashboard has the most, because dashboard was that application shell that goes over everything, right?

[00:04:35]
And so, for each given one we're saying composite, so it's like, this is just, you know, part of a larger tapestry of my TypeScript config files, right? And if I'm checking dashboard, well then, yeah, I do need to pull in all of the packages that it requires, right? But as we go to something like shared, which has no dependencies of its own, right, then it's a smaller, more confined subset of just itself, right?

[00:05:04]
And then at the top level, we're making sure we don't check anything, right, so that the top level is now not getting like every other, because a lot of times I'll have maybe a scripts directory where it's like some build tools and stuff like that. You know, if I need to, I have a script, like find free port, so that I don't have two playwrights crashing against each other and stuff like that. So I kind of don't, I don't want it to be looking for anything there.

[00:05:33]
I want it to kind of just kind of be some of the metadata. And if we go into the repo itself, I believe we'll see a tsconfig, which you can see they're all inheriting from. So a lot of the options aren't set here, and this does something where it's like, we can set that once. The smaller packages all inherit from that. They kind of have their own settings, like if one of these again, was an Express server, it might then also include the Node types.

[00:06:03]
And if one was just a React section or what have you, it might just pull in, you know, it might have the configurations for how it's using JSX, right? And if one is solely working with, you know, DOM types, right, it'll have like DOM sets are true. So we have a base one of the standard configuration that we want in this case, and then the smaller pieces that are getting defined here as well. So nothing really particularly heady, but it is worth, and the reason that I kind of pull up this view, if you do have something where you've got more than one tsconfig file in your current project, it is worth staring at this kind of view and then mapping that to your own project and seeing, you know, because it's like the word, a lot of times, you hope that, you know, what does outer do and root dir, right?

[00:07:03]
You could probably take a lucky guess, right? What does composite do? Yeah, I mean, we know because we just talked about it for 20 minutes, but out of the box, it's not totally clear. So I think it's worth taking a look at a very kind of small setup and seeing how it works in this case as well.