How to view full type definition on hover in VSCode, TypeScript?

Question

Hovering over a variable or function in VSCode is really helpful by showing its type. However, there are certain use-cases where I would like to see the full type definition of a variable and not just the type alias.

For example: UseState with full type will allow me to see the full type of the variable campaign:

.

But I would really like to extrapolate that type definition and export it so other components can use it too. So when I change things to this: and hover over the variable it only shows the type alias. How can I get TypeScript or VSCode to emit the full type definition for a type alias? Thanks!

Answer 1

Unfortunately, I don't think what you want is possible.

The hover function of VSCode is only meant to give you a quick type information about the value, not the full type. In fact, I believe this feature is powered by TypeScript directly so VSCode has no control over what is displayed...

One final note is that the size of what is displayed is limited (probably for performance reason) so even in case where the type definition is displayed, it sometime simply truncate it if it's too long.

Answer 2

Right click and click go to Type Definition should always take you to the typescript type.

Answer 3

Test this:

const [campaigns,setCampigns]= useState<{ [K in keyof campaigns]: campaigns[K]}>()

Not optimal but you can do so anyway.

Answer 4

You can try the option Peek Definition Alt + F12 maybe could be helpful in this case.

Answer 5

Go to keyboard shortcuts and add a shortcut to "Add Peek Definition". This works for Typescript, and Golang struct. In my case I am using alt+command+P.

I will highlight the variable and press the keyboard shortcuts, and the type definition shows up like in screenshot.

Answer 6

To get type definitions, you need to set shortcut to Peek type definition command. By default, it has no value.

First, you need to go to Keyboard shortcuts with Ctrl+k Ctrl+s or via UI.

Then type in the search bar Peek Type Definition . You'll see a corresponding command.

Double click on it and press preferred shortcut.