Integrated Development Environments Superpowers 13 exercises

Navigating Code with "Go to Definition"

Another really useful property of the TypeScript server is its ability to help you understand stuff across files.

The "Go to Definition" feature is incredibly helpful for navigating large codebases and is only possible with TypeScript.

By using Command + Click on a Mac, you can instantly jump to

Loading explainer


00:00 Another really useful property of the TS server is you can use it to understand stuff across files Here we're going to use something called a go to definition and it's so so useful for navigating big code bases and only Possible with typescript. So here what we can do is let's say we have a function here

00:20 We could just command click I'm on a Mac So the command click can work for me on this function and it takes me to the function definition You see that my cursor just went and just went up and if I come on click on here It's going to take me to the implementations of that function

00:36 So if I have my function here to my function Then if I come on click up here, then it opens up a little box up here Which is all of the references of that function and I can skip between them like this So here's my first one, which is the actual declaration then this one then this one now, this is

00:55 Pretty nice actually when you're working in like a massive file So let's say you have a thousand line file for some reason and you need to jump between all of the pieces Command-clicking on these things or even just right-clicking and go to definition or go to implementations or references Like this can solve a lot of problems, but it can also work across files, which is amazing

01:15 So on this little demo here We have import hi there from dummy imports and we can come on click on hi there to instantly go to Dummy imports we can come on click on this to instantly see all of the places that this is used

01:32 So there's one definition here and also a couple of definitions inside this file, too This is amazing for navigating stuff. It also works on global types, too So I can come on click on this property key for instance And boom I'm in now the global typings for TypeScript where this is declared

01:51 And if I close this and I just go back to the previous file It can also take you to very mysterious places like documents up here who's and scary stuff We've never seen before but these are the global typings for the DOM as well So this is great for when you're navigating into for instance

02:09 External libraries you want to sort of debug some types, but also just for getting around your own code base So you can either do this by command clicking on the function itself or by right-clicking go to definition go to implementations go to references I Encourage you to explore all of these possibilities in this menu too. So it's just amazing what you can do with TypeScript