Integrated Development Environments Superpowers 13 exercises

Introspecting Variables and Declarations in TypeScript

One of the coolest features of the TS server is the ability to introspect variables and declarations in TypeScript.

In this example, we could hover over thing and see that it's of type number:

let thing = 123;

Being able to hover for information is extremely helpful for exam

Loading explainer


00:00 One of the coolest things that the TS server gives us is the ability to just introspect variables and declarations in TypeScript. So if we want to know what the type of, let's say, this thing here is, we can see that it's got this let thing number. And this is really, really good when we're investigating really complex pieces of code.

00:19 So for instance, we've got an object here and we can hover over that and we can see that it's let name string there. But if we, for instance, let's say we go const other object and we say, let's just spread in other thing into here. And we'll just say, let's put the other thing in here too.

00:36 We can now hover over this and it will give us a computed readout of all of the items that are in there. This is super duper useful. It also means, too, that we can, like, it depends on what you're hovering over. Let me just say thing here.

00:51 Like, if you've got a multiple dot notated item like this, then you can either hover over other objects here and you can see the whole object, or you can hover over just the thing here and it will tell you what that property is.

01:06 So you should really get used to this ability in TypeScript to just kind of floating around looking at what all of the types are, because it's going to give you really amazing metadata and help you understand what your code is doing.