100

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 UseState with full type will allow me to see the full type of the variable campaign:

Hover with full def.

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: UseState with type alias and hover 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!

Improve this question
9
  • Have you tried right clicking and choosing go to definition? Commented Apr 24, 2020 at 17:45
  • 1
    Yeah, upon doing that it will sometimes send me to where I am using that variable, and sometimes it will show other places it is used. While useful, I regularly use generics and all type definition is lost after that if the editor will show me that part. Commented Apr 24, 2020 at 18:02
  • Did you try command/super + hover? Commented Apr 25, 2020 at 1:30
  • Yes. Command hover still only shows the type alias. Super?? Commented Apr 25, 2020 at 2:05
  • 1
    This answer has a type that can expand the type into a simpler object type, but it's a little verbose to spam Expand everywhere don't you think ;) Playground Commented Mar 9, 2022 at 13:59

16 Answers 16

Reset to default
25

There is a workaround for that useful for debugging. You have to create a type helper that wraps the type you want to expand:

type Prettify<T> = {
  [K in keyof T]: T[K];
} & {};

Example:

type TypeA = {
  name: string;
};

type TypeB = {
  level: number;
};

type TypeC = {
  loading: boolean;
} & (TypeA | TypeB);

// all properties expaned on hover 'obj'
const obj: Prettify<TypeC> = {
  name: 'david',
  level: 2,
  loading: false,
};

Result:

enter image description here

Credits to Matt Pocock. Source: @mattpocockuk twit

Also, there is a Github issue that wants that for IntelliSense.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

This helps with the specific question asked (see the properties behind a type alias), not with getting the output without truncation. If the list of properties is too long, it will still be truncated even with Prettify<..>.
16

How can I get TypeScript or VSCode to emit the full type definition for a type alias?

I don't believe this functionality is currently offered by VSCode, however I was able to find a little-known VSCode extension that does this: ts-type-expand. FWIW, I have no personal connection to this extension or it's creators. I found it recently, but so far it appears to work as advertised and it directly addresses this problem.

Screenshot of ts-type-expand extension

Improve this answer

5 Comments

Unfortunately the extension you listed seems to be dead. However, I've found this extension that is a complete lifesaver and does exactly what everyone here is looking for: marketplace.visualstudio.com/…
I'm actively using this extension as we speak...Dunno why you think it's dead @mrbinky3000? The one you found looks interesting too though.
I installed ts-type-command, restarted vscode, and it did nothing. I looked at the Github issues for the project and it seems that others have my same issue. One issue was "stopped working completely". If yours is working, don't upgrade :-)
Yup: github.com/d-kimuson/ts-type-expand/issues/353
I had a derived union of like 200 keys that were filtered from another object, none of the other answers solved this. This was helpful. Also the issue mention in the comments above was fixed, project is not dead.
12

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.

enter image description here

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

Double click on it and press preferred shortcut.

enter image description here

Improve this answer

3 Comments

Just as "Go to definition", this only works for manually written-out types.
@Nickolay, the context of this question specifically pertains to manually written-out types. Perhaps a more constructive response would have been more beneficial.
You're right, of course. My comment was for the benefit of those coming here from a search engine and not reading the question too carefully. In hindsight I should have edited the question instead.
11

Pressing CMD while you hover on Mac (probably CTRL on windows), you'll see the full type definition.

Improve this answer

Comments

11

Long term solution by @extremegf

in vscode

  1. Using Ctrl+P, Go to node_modules/typescript/lib/tsserver.js or node_modules/typescript/lib/typescript.js
  2. Find line var defaultMaximumTruncationLength = 160. If u can't find it, try in node_modules/typescript/lib/typescript.js
  3. Change it to 1000 or value of your choosing.
  4. Open Ctrl+Shift+P menu, select TypeScript: Select TypeScript Version...
  5. Ensure it's set to Use Workspace Version
  6. Full restart VSCode - reloading workspace is not enough.
  7. Verify that ... abbreviations are gone from type hints.

PS. cause noErrorTruncation in tsconfig didn't work for me. and changing tsserver.js of VScode's typescript is anoying every VSCode update

Before: with ... enter image description here

After: You can also drag the bottom border enter image description here

Improve this answer

2 Comments

I can confirm this works. We made it work for the whole team by adding this to .vscode/settings.json: ``` { ...rest of project settings.. "typescript.tsdk": "node_modules/typescript/lib" } ``` And running npx patch-package typescript to create a patch file with the increased hint length.
Great tip, see github.com/microsoft/TypeScript/issues/59035
7

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

enter image description here

Improve this answer

1 Comment

this is not the case when the type is not explicitly defined somewhere manually
5

Sometimes you can see more if you hold ctrl / cmd.

VS Code 1.96 added TypeScript usage of its relatively new expandable hover API as an opt-in feature, with the setting "typescript.experimental.expandableHover": true. You need to select TypeScript 5.8 as the TypeScript version for the workspace where you want to use this (use the TypeScript: Select TypeScript Version... command; more recent VS Code versions may require a later TypeScript version- check the expandable hover setting's description). Then you can use the "+" and "-" buttons on the hover to show more or less information.

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

Improve this answer

1 Comment

In VSCode 1.101, the description of that setting states it requires TypeScript 5.9+
4

This worked for me:

tsconfig.json

 "compilerOptions": {
        "noErrorTruncation": true
}
Improve this answer

Comments

3

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.

enter image description here

Improve this answer

Comments

2

If your project is on the bleeding edge of TypeScript >=5.8, you can give the new experimental VSCode feature "Expandable Hover" a try. It is designed to do exactly that, adding + and - buttons on the hover to expand the type.

Until then, https://marketplace.visualstudio.com/items?itemName=mxsdev.typescript-explorer can help exploring the types you are interested in. Discovered this in the actual VSCode issue for this.

Improve this answer

Comments

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.

Improve this answer

1 Comment

But I think Microsoft can add an option to expand the hover canvas. For example, in jsdocs, you can expand the canvas to see the whole documentation. Especially for the npm library "zod", where types are very long. #zod #type
1

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

Improve this answer

1 Comment

"No type definition found for name" ... not helpful
0

You can use this vscode extension to put a comment under the type to see its full definition:

https://marketplace.visualstudio.com/items?itemName=Orta.vscode-twoslash-queries

Improve this answer

Comments

0

this should be available by default on hover (assuming you have all the standard front end extensions installed)

if its NOT showing up, try reloading the VSC (it takes a second): press F1 -> type: reload ... you will see: Developer: Reload Window -> click it... it will reload and will be available

enter image description here

Improve this answer

Comments

-1

Test this :

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

Not optimal but you can do so anyway.

Improve this answer

1 Comment

Nope - tried all c/s/a+mouseover on Windows and the only offering is the alias, no insight into the types from which this alias derives.
-1

I added this to .vscode settings.json:

 "typescript.inlayHints.parameterTypes.enabled": true,

It shows me the type name with its properties:

enter image description here

If you want to see inline definitions for the parameters and the return of the functions, you can add these:

  "typescript.inlayHints.propertyDeclarationTypes.enabled": true,
  "typescript.inlayHints.variableTypes.enabled": true,

enter image description here

Improve this answer

1 Comment

can you elaborate on what language elements this applies to? I haven't tried this, and at a conceptual level, it surprises me that inlay hints configuration would change what's shown in hovers in general, unless you are talking about hovers/tooltips specifically of inlay hints.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.