Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

TypeScript interface doesn't show its properties in VS Code hover widget or on ctrl-k-i

When I create any interface in VS Code, there is no preview of any methods within the interface. When I use a type declaration, it works as expected.

interface SomeInterface {
    someMethod: string
}

let test: SomeInterface = {
    
};

example of interface popup not showing any methods

example of type popup correctly showing methods

I am aware of (and agree with) the behavior described here, however, this does not seem to work for me.

I've tried creating a JSDoc description above the method (did not display the description or the method).

Current workarounds:

  • hold Alt to preview full declaration (this is not ideal because it does not work with the Ctrl-k-i hotkey that displays the popup without having to use the mouse).
  • Ctrl-Space when constructing object to activate IntelliSense suggestions.
  • use peek to jump to the interface declaration.
like image 294
Jacob Zwang Avatar asked Mar 17 '26 06:03

Jacob Zwang


1 Answers

VS Code now has a expandable hovers feature with "zoom in/out" capability, where the user can request a "zoom in" for the hover to provide something like more granular info / verbosity. See this maintainer comment. That has now been implemented by Pull Request Adding the possibility to enrich hovers with additional data #210472. Now the builtin TypeScript extension needs to make use of the feature. It now has in VS Code 1.96 with the typescript.experimental.expandableHover setting. See also TS PR #61492.

See also the related setting js/ts.hover.maximumLength.

Old answer

You can get the properties listing (structural view as opposed to nominal view) if you hold ctrl/cmd while hovering over the interface name with your mouse. Note that it will only show properties defined on the interface and not including properties defined on interfaces that said interface extends. If you actually want to get the properties listing without holding ctrl/cmd, then read on...

This is a known "issue". VS Code's TypeScript support is built directly upon TypeScript itself. See the suggestion issue ticket on the TypeScript GitHub repo: Intellisense should show internals of an interface declaration on hover #38040. Here's what you can do in the meantime:

  • Give that issue ticket a thumbs up to show support for it, and subscribe to it to get notified about discussion and progress.
  • Participate constructively in the open design discussion. There's still open design discussion on what should happen for non trivial cases such as interface extension (source). Read about the existing discussion on design decisions and try to contribute to it constructively (that includes giving rationale for your suggestions). But please, don't make noisy comments like "+1" / "bump".
  • You can go an extra mile and contribute a Pull Request drafting implementation of the feature.

For your reference / learning purposes, I found that issue ticket by googling "github vscode issues hover typescript interface show properties".

Another related issue ticket: Be able to configure what quick info IntelliSense shows on hover (e.g. whether to expand) #56010.

like image 95
starball Avatar answered Mar 18 '26 22:03

starball



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!