TypeScript Diagnostics Exercise

[00:00:00]
>> Steve Kinney: Uh, but let's talk about what I'm going to make you do in a second, if you can find a codebase that is near and dear to your heart, uh, which is some ways to figure out like what the issue might be, right? And like maybe you have a perfect codebase, and this will be a waste of your time. Except that you will at least then get the ego boost of knowing that you have a perfect codebase, no notes, you're killing it with TypeScript, everything is great.

[00:00:28]
Um, but try some of these out, uh, let's take 5 minutes, try some of these out, like just on one or more codebases that you suspect might be problematic, and you know the one we're thinking of, it's probably the one you work on every day. Uh, so yeah, find a codebase near and dear to your heart. Um, I will leave this on the screen for a second and then, uh, go ahead and like see, see if you could find anything particularly interesting or anything, any kind of interesting questions come up.

[00:01:03]
To be clear, like. If your CI/CD is currently passing and your VS Code works, are you going to find any like smoking gun immediately? No, but like, the idea here is to train up the like when that smoking gun happens, like what are some of the options in order to figure out stuff along the way. Um, so one of the interesting ones is like the extended diagnostics, which will tell you the memory usage, it will tell you how many files were involved, and if you start to see files where you're like, I'm not entirely sure why that's in here, right?

[00:01:34]
That's the kind of information that you're looking for. Now, again, like in most of these cases, unless you actually are like, oh, like this is actually found, I found the thing that has been slowing everything down, here we go, right, you won't see too much in here, but I still think it's worth like kind of take them for a spin. Uh, one thing to keep in mind is if you don't have the, like, if you don't have TypeScript installed as a global, you'll have to like preface them with like your package manager of choice, npx, pnpm dlx, bun x, whatever, right?

[00:02:12]
Um, but I can kind of grab one of these, in this case, um. See, and I don't follow my own instructions as I say them out loud. Uh, and so like this will go through and like examine kind of everything in this case, uh, where we see the number of files, the, you know, general, like these numbers all seem pretty good, but like, if you're like, it is slow, that's kind of hard to fix when the problem is just, it is slow, right?

[00:02:40]
Finding out what part of it is slow is probably a better use of your time. Uh, in this case as well. If it was like resolving the modules or something along those lines, or if you found something that like, hm, this doesn't make a lot of sense, like you're like, for instance, if you're like, we don't have any JavaScript in this project, which I don't in this case, uh, but you saw a whole bunch in there, right, that's useful information as well.

[00:03:06]
To kind of like pull in and triage and see, cause like, we all know what you were doing otherwise, which was copying and pasting stuff from Stack Overflow and just flipping settings based on what you read on a Reddit thread. I know what you're doing. Because I am you. Um, other ones, you know, obviously like listing the files only, right, of what files it's checking is good. Again, like, ideally, you're not going to get a bunch of surprises in here, but if you found out that you weren't, there's obviously a lot of output to look in a terminal, but if you started to find stuff that you're like, hey, this is jumping into some other project, or especially if you are in a monorepo in that case, and you're seeing stuff that like shouldn't have been pulled in.

[00:03:57]
That means some file kind of did that like accidental like dot dot slash dot dot slash dot dot, right? Uh, so you can begin to be like, your goal here is the reason we're doing a codebase that you know, is like, hopefully you should be able to find something, you know, not hopefully you shouldn't find anything, to be clear. But when you have the problem, hopefully if you see something, one of these things does not belong here, it is better than just like throwing stuff at the wall and hoping that your TypeScript problems go away.

[00:04:28]
Um. You know, the same as like the explained files will tell you why each file got pulled in. You can, you probably in all cases want to write that out to a text file, which I did earlier, so I'll kind of, we'll take a look at that. And it will kind of start to bring in, like, you'll see the errors, but you also start to look at like, OK, library reference, um, ES2015 core from this file, so on and so forth.

[00:04:55]
And it could be like, do you have like zombie dependencies? Like, is there something that you npm installed that's sitting in your package.json, that is being used exactly zero places in your codebase, right? Like you hope that like, you know, like some of the stuff gets shaken out, but like those are all, when you're trying to find the unique way things have slowed down for you, right, you can kind of look at like why, you know, what, what library referenced what, so on and so forth, right?

[00:05:24]
And I'll kind of go through every file and what happened there as well. Um. You know, generate trace, uh, like produces a Chrome compatible trace where we can like check which source files, expressions, variable declarations, like, um, when you're trying to figure out what is like the uniquely bad place as well. So we can grab that. Again, like, hopefully you don't find anything particularly compelling, but these are kind of practices for when you do.

[00:05:56]
This one's just angry about some stuff, but also I like pulled down a repo from my old job and just ran it, so like. I don't know what happens around there when I'm not working. Um, and so yeah, like, at this point there's not too much in the trace, but like, it is a useful set of tools to go through and see, right? Uh, and better than just like, it failed, and like copying and pasting, uh, lines of that into Google and Stack Overflow, or now we all know where you're pasting that stuff.

[00:06:23]
But like, having, you know, at least some sense of how to pull out this information rather than saying like, I don't know what the issue is, is incredibly disempowering as you kind of go through.