Inspect nested TypeScript interfaces & types in VSCode

Question

When using VSCode with TypeScript I find myself constantly hovering over functions or objects to inspect their type.

Often, the types and interfaces for these objects rely on multiple other interfaces and types. So hovering doesn't give much info.

To inspect the type I have to go manually into e.g. node modules to find the type declaration and inspect it there.

Is there a way to inspect nested types easily in VSCode?

Here is an example:

I'd love an easy way to inspect the interface that is React.FunctionComponent.

Answer 1

I don't know if this is what you are looking for exactly but :

Press the key ctrl to show details when hovering

Also, ctrl + left click will go to the interface declaration, so you could see the full details.

I don't think that there is enough space to display all the nested interfaces details using hovering anyway. Going to the declaration seems the most appropriate way to get your information.

Answer 2

Also, you could use ALT + F12 shortcut to trigger peeked editor.

For me personally, this is the most convenient way to peek into some component's info without changing the main context.

See more info in docs: https://code.visualstudio.com/docs/editor/editingevolved#_peek