Extending Configs

[00:00:00]
>> Anjana Vakil: Earlier I had renamed main.js to be main.ts However, as you might have noticed, if you also did that as I had, we run into a small problem because of how this codebase is set up, namely in our main sort of index.html which references the main.js script We have a link to the main.js module, and so if you found some unexpected results after you renamed this module to .ts, go ahead and just rename it right back

[00:00:45]
There of course are other ways that we can deal with that Like for example, since we're using Vite, Vite is very clever and so Vite can do stuff What it's actually doing under the hood is rewriting all of our JavaScript for us and making it all, bundling it all up and like packaging it all up if we want it to actually ship to production and stuff like that

[00:01:08]
So Vite can do a ton of fancy TypeScript fanciness, including like deal with these .ts files and whatnot But for our purposes for right now, this main.js is not really the source of our headaches here, so we can just leave it .js for now, but just suffice it to say, if you did want to make everything in this repository TypeScript, you totally can It just involves renaming more things than just the files themselves

[00:01:37]
OK, so that's one thing And we also had a great question about the tsconfig And what happens with our tsc show config command versus what is in our tsconfig Could somebody, did anybody remember what I was still getting the no inputs because I hadn't changed it over to the .ts yet, so that was, yeah, OK, so the fix for that exactly So if you were running tsc show config, and we established that it's not case sensitive

[00:02:23]
If you were running tsc show config and not getting output like this, but instead getting output from the compiler, like, I don't have any files to look at, that would probably, that would be what would happen if we had only .js files in the repository, and we had not turned on the check js option, which by default is set to false So if we wanted to check js we can add that to our tsconfig here, as we saw

[00:02:59]
And then we would get inputs, but what we want to be doing is renaming these three files, events, forms, and header At least And if you would like for extra credit to go through and make sure this is a 100% TypeScript code base, have at it I know you can do it It just might involve a little bit of iteration on these error messages One other question we had is like what is going on with these tsconfig extensions and how does this really work exactly

[00:03:30]
I don't know if you Yeah, no, my question was, so above files in the output when we were on that, where I was thinking that it was just the default settings, but where is all of this stuff, yeah, all of that coming from Excellent question And so the thing is, we're asking tsc to show us the config that it is using in its brain that doesn't exist to decide which files to look at, decide which options to use, etc

[00:04:07]
Etc And most of this stuff is not in my tsconfig.json And in fact, as we saw before, I could actually take everything except this extends out So where are all of these options coming from Are they defaults Are they something else Excellent question So, this is what the amazingness of these base configurations does is it allows us to kind of inherit options from these base configs in much the same way that we could inherit properties from a class or an object if you're used to doing object oriented programming that might be a helpful way to think about it, but one thing we can do is to tweak which bases we're extending and look at how the output of show config changes

[00:05:03]
So here we're actually extending multiple bases at once, but let's narrow it down a little bit and so first we will just, I'm just going to comment out the Vite React and just extend the base config that's recommended Which is generally recommended So now if I run show config I can see that I have not quite as many options here And not all of these are the default settings

[00:05:41]
So when we ran tsc init and we generated the original tsconfig.json that had a bunch of options, there were many things that were commented out that were just sort of tsconfig's way of nudging us towards certain options we might want to enable Now in these base configs, they have turned on a lot of these flags, so things like no implicit any and check js is false, and strict is true, and things like that

[00:06:12]
So some of these line up with the defaults of the compiler, like check js being false by default And others like strict being true or no implicit any are adding on to that, and that's coming from our recommended here Now, let's see what happens if we extend nothing Uh, not a lot We get the one option that we enabled here And the files that are TypeScript, cause this is just now kind of a hyper minimal config that's not going to work very well for us

[00:06:58]
So if we turn back on, let's say the Vite React base and run it again Now we can see what we're getting that's coming from that base config And we can also, because all of these config bases, so here we've got other things that we didn't have from the recommended We've got like this lib, we'll talk, we can talk a little bit about that later We've got a variety of other things verbatim, module, syntax, no emit, blah blah, JSX, blah blah blah

[00:07:31]
And so this can be a kind of quick way to like sanity check OK, what exactly did tsc understand my config to be And so if we want to see like, OK, now that I'm extending multiple bases, we're going to get kind of a mash up of all of those settings and I can see exactly which things are true, which things are false, which files and which settings tsc is looking at

[00:08:04]
So especially if we're extending multiple bases Or extending a config that we didn't write ourselves, like maybe in a big project or in a big organization This show config can be like a quick way to sanity check, am I telling tsc to do what I think I'm telling it to do But because all of these are packages, and as we saw it, we can find them all in that basis, tsconfig basis repo, we can also look for like, let's say if I search for npm tsconfig

[00:08:50]
Vite React That will point me to the npm page, and there I'll have links to how I run this, and we can actually see here this is the tsconfig.json that that package is giving me as the baseline, which I then can override in my own tsconfig so we can look also at recommended Tsconfig recommended, oh, well, yeah, thank you do go for understanding what I mean

[00:09:23]
And so here we can see it's a much simpler one So that's why we had a much shorter output when we ran show config with only this base extended So these are some great questions about like what is actually happening under the hood here We went through it very fast, but feel free to poke around and look at all the other different bases, explore bases that you think might be relevant for your project, etc

[00:09:53]
And if you are extending many, you probably want to, at least at some point, take a look at what the kind of final config is that tsc understands what you can do with this show config command, quick and easily.