Using Autocomplete and Quick Fix to Import Variables
Manually importing variables can be time-consuming and tedious. Fortunately, TypeScript supports autocomplete for imports.
When you start typing a variable you want to import, TypeScript will provide matching suggestions. You can then select the desired variable from the list, and TypeScript will
Transcript
00:00 Okay, so the first solution is obviously just to kind of like manually write each of these out, which is no fun, really, there must be a way for TypeScript to help us out here. Well, what we can do is we can just if we go autocomplete on here, we will see that we have all of the possible autocompletes here.
00:17 And we can even just start typing here. And actually, this will be autocompleted and add an import automatically for that thing. So we can automatically do session expiration time and grab it there. Autocomplete here and grab the one in seconds.
00:31 Although it's really kind of annoying that it does this, it's sort of if you do it from the middle of the variable here, you notice that it actually kind of screws up the rest of this line here, which is annoying.
00:43 So if you want to do this in seconds like this, if I just remove that for a demo, then you actually need to take your cursor to the end of the variable, autocomplete there, and then you're ready to go. So bam and bam. So that was pretty fast, but that took quite a lot of effort, even just a lot of keystrokes here.
01:01 What if there was a way that you could just import everything all at once? Well, on my Mac, you can do command full stop, and that opens up a bunch of refactors here, a bunch of quick fixes. I'm on this session expiration time here, but I think for this one, I can actually be anywhere. Oh, no, I can't. I have to be on this variable here.
01:20 And I get add import from dummy import, add const to unresolved variable, add all missing imports. Huh? Let's try that.
01:30 Bam. All missing imports are now imported. You've got to be careful with this one, because if you have, let's say, this variable in another file, then it like exported from another file, then it might kind of like grab it from there instead. So you want to check what it's done afterwards. But for these, because I know that they're only coming from one spot, it's just beautiful.
01:49 So add all missing imports is really, really nice. And you should be checking this kind of like these little, if I just open up those errors back again, checking this little quick fixes menu, because there's often some really nice stuff here, even just like if you're using GitHub Copilot, fix using Copilot or explain using Copilot.
02:08 But add all missing imports. So good.
