19

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:

enter image description here

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

Xen_mar
  • 8,330
  • 11
  • 51
  • 74
  • 1
    Does anybody know how to get properties for all inherited interfaces? Say, you have an interface inheriting 5 other interfaces, but no specified properties: `export interface A extends B,C,D,E,F{}`. How could you view the properties of ALL inherited interfaces in one given screen? Currently, I'm inspecting each interface manually to check the properties of each inherited interface. – G M Jul 18 '22 at 19:16
  • @GM Please vote for the issues describing this behaviour: [vscode/issues/157461](https://github.com/microsoft/vscode/issues/157461) and [TypeScript/issues/10752](https://github.com/microsoft/TypeScript/issues/10752). See also **[→Q1](/q/55269520 "interfaces IntelliSense") [→Q2](/q/61066520 "intellisense doesn't suggest interface") [→Q3](/q/61851075 "interfaces hover hints") [→Q4](/q/61132949 "documentation of types in interfaces") [→Q5](/q/66701574 "interface doesn't show methods")**. – cachius Sep 06 '22 at 15:56
  • See also: [How can I see the full expanded contract of a Typescript type?](https://stackoverflow.com/questions/57683303/how-can-i-see-the-full-expanded-contract-of-a-typescript-type) for how to see the _actual resolved_ type if you end up getting just an unusable mess of references to other complex types. – user56reinstatemonica8 Sep 01 '23 at 10:03

2 Answers2

15

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

enter image description here

Press the key ctrl to show details when hovering

enter image description here

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.

Alex
  • 14,104
  • 11
  • 54
  • 77
Orelsanpls
  • 22,456
  • 6
  • 42
  • 69
  • 6
    Hey Gregory! That's already amazing advice. Hovering and pressing CMD (on mac) should be listed everywhere in fat, fat letters for people using VSCode. I didn't know about this until know! – Xen_mar Jan 27 '20 at 09:15
  • 1
    If I right clicked in the past and clicked on "go to type definition" it never seem to work. But CMD+Left click or hover does the trick! – Xen_mar Jan 27 '20 at 09:16
  • 1
    Unfortunately this doesn't seem to work when hovering over a variable. E.g. hovering over `varX` in statement `const varX = somefunction()` where `function somefunction(): ComplexType {}` only shows `const varX: ComplexType` – Highmastdon Nov 16 '22 at 07:28
  • VSCode sucks, why isn't this fixed. I want the same behavior for interface as for type. – basickarl Jan 10 '23 at 13:46
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

Ilya B
  • 21
  • 2
  • Either the shortcuts have changed, or it's because I'm on linux, but here, they are: When you execute a Go to References search (via Shift+F12), or a Peek Definition (via Ctrl+Shift+F10), we embed the result inline: – bot19 May 03 '22 at 03:23