Add full type hover popup to VS Code commands

Several issues have been opened for this problem, but they have been closed as a duplicate of an issue which barely mentions the problem, let alone addresses it: microsoft/vscode#64566

The closed issues are:

The problem is simple. The three dots means you can't copy and paste definitions like you used to be able to. This is an absolutely essential feature because TypeScript isn't even close to being used everywhere, and the intellisense of Javascript files inside TypeScript files is way worse than inside Javascript files. This basically means the easiest way to create a d.ts file is to copy the type definition in the hover inside Javascript and then paste it into a d.ts file so TypeScript files can use it. It also helps me debug overloads and unions when things are going awry.

Even just a command that would popup the hover with the full definition instead of the abbreviated definition would be incredibly useful. Currently the shortcut is Ctrl+k, Ctrl+i for the abbreviated definition, so I take it there is a command behind it that can be typed into the command list (ctrl+shift+p). So even just adding the command for people to manually add a shortcut for would be really useful.

I can work around it, but I spend hours more time per week because of it.

Arlen Beiler (@Arlen22)

Arlen Beiler (@Arlen22) This is what microsoft/vscode#64566 is about: being able to expand the error to see more detail.Even in JS there are types that are too large to display (or infinite), so it is not possible to just always expand the ... eagerly.

Can you provide sample code that shows when the ... gets in the way

An infinite recursion should simply be marked as infinite (same color as never) indicating that some level of recursion is involved, I suppose, and the user could then end the recursive reference in some way in order to get a complete type output.

Normally the types I work with are not too large to display. If they are I can usually break them apart into smaller chunks in one way or another, either by making minor edits to the Javascript or by handwriting a Record, or stuff like that.

It's just that the ... prevents this from working at all, especially since I don't really know whether all ... are referring to the exact same type or what that type is. And then someone mentioned | ... and 4 more ... | in a string union, which obviously completely breaks copy and paste.

Can you provide some specific code examples?

Array<{ 
  "server_id": number; "server_uri": string; "itemType": string; "key": string; 
  "title": string; "summary": string; "thumbnail": string; "videocover": string; 
  "url": { "H264": string[]; "location": string; }; 
} | { "itemType": string; ... 7 more ...; "url"?: undefined; }>.shift(): {
    "server_id": number;
    "server_uri": string;
    "itemType": string;
    "key": string;
    "title": string;
    "summary": string;
    "thumbnail": string;
    "videocover": string;
    "url": {
        "H264": string[];
        "location": string;
    };
} | {
    "itemType": string;
    ... 7 more ...;
    "url"?: undefined;
}

ceTouchableFeedback<{
    onPress: () => void;
    object_id: number;
    name: "header" | "italic" | "bold" | "underline" | "repeat" | "link" | "search" | "image" 
| "key" | "code" | "map" | "table" | "th" | "circle" | ... 771 more ... | "snowflake-o";
    style: {
        ...;
    };
}>(options: TouchableFeedbackOptions<...>, ...children: any[]): any (+1 overload)

The name field is obvious and useless and I would just remove the contents or change them to a named reference, but the generic inside options: TouchableFeedbackOptions gives me no information, and I critically need to know what the exact properties are being brought in.

Moving upstream to get more feedback from the TS Team

This is same request I had in the diagnostics issue.

Use case I had is that I often found myself seeing a type in the hover tip, and copying it out. It never worked after the changes.

I actually don't understand why the hover tip needs to be abbreviated with three dots. It has a scrollbar. It's perfect abbreviation itself, you can expand it by scrolling! Even if the three dots were expandable by clicking, it would be worse UI in terms of usability, scrolling is easier way to "expand" the view.

P.S. Recursive types are an outlier, I don't mind having dots for them (since it can be infinite). I think in general VSCode should try to show as much as possible of the type, and user can scroll if they wish to see more of the type.

Can we somehow make this a VS Code setting? I guess this is in Typescript now, so whatever the equivalent would be here.

And now this evening I am diagnosing type problems and it is not showing me a second type that I know is different than the first one that it is showing me. It’s a union on the values of an object and it is only expanding the first type in the union.

Just as a heads up, there's a noErrorTruncation option which you can set to true, which I believe gives you the behavior you're looking for.

This is extremely annoying when working with long types that are calculated and cannot be checked in source

For those who haven't seen this plugin:

Name: TypeScript Explorer
Id: mxsdev.typescript-explorer
Description: Full type information for variables, components, functions, and more in TypeScript projects!
Version: 0.4.2
Publisher: mxs

https://marketplace.visualstudio.com/items?itemName=mxsdev.typescript-explorer

For those who haven't seen this plugin:
https://marketplace.visualstudio.com/items?itemName=mxsdev.typescript-explorer

Thank you for sharing. Nextlevel useful ✍️

Long term solution by @extremegf

in vscode

Using Ctrl+P, Go to node_modules/typescript/lib/tsserver.js or node_modules/typescript/lib/typescript.js
Find line var defaultMaximumTruncationLength = 160
Change it to 1000 or value of your choosing.
Open Ctrl+Shift+P menu, select TypeScript: Select TypeScript Version...
Ensure it's set to Use Workspace Version
Full restart VSCode - reloading workspace is not enough.
Verify that "..." abbreviations are gone from type hints.

PS.

cause noErrorTruncation in tsconfig didn't work for me.
changing tsserver.js of VScode's typescript is anoying every VSCode update
the extension mentioned in other solution is not copy-pasteable

Before:
with ...

After:
You can also drag the bottom border

"noErrorTruncation": true Did not work correctly for me even though it's been proposed several times as a solution in other questions like this one.

A quick fix that actually does work would be... some kind of a more offensive solution ;p Start by opening /resources/app/extensions/node_modules/typescript/lib/tsserver.js and change ts.defaultMaximumTruncationLength = 160 at around line 13471 (so far) to something higher like ts.defaultMaximumTruncationLength = 800.

This will get you what you are waiting for. A nice 800 chars long max type definition on hover. You can of course custom this value as much as you want.

This might not be politically correct for you will need to do it again after every vs code update, but it works just fine and you'll finally get your full type on hover. Note that you'll need to restart your tsServer. To do so:

in vscode: ctrl + shift + P -> type "restart ts server" -> press enter. wait a couple seconds, it's fairly quick.

I'm useing typescript v5, I found that on tsc.js not tsserver.js.

+1

EDIT: I fixed it patching typescript.js instead (this is for v5.6.2):

diff --git a/lib/typescript.js b/lib/typescript.js
index 90f3266ee69f247b20bd892b1a975220489f094f..87f11795f1f298928cb9d9f26e13de51817a7656 100644
--- a/lib/typescript.js
+++ b/lib/typescript.js
@@ -16056,7 +16056,7 @@ function isInternalDeclaration(node, sourceFile) {
 // src/compiler/utilities.ts
 var resolvingEmptyArray = [];
 var externalHelpersModuleNameText = "tslib";
-var defaultMaximumTruncationLength = 160;
+var defaultMaximumTruncationLength = 1e6;
 var noTruncationMaximumTruncationLength = 1e6;
 function getDeclarationOfKind(symbol, kind) {
   const declarations = symbol.declarations;

Old post:

It used to work in TS 5.4, but now it doesn't (I tried every minor version back to 5.0.4). Even in 5.6, with the following patch, complex types are truncated:

diff --git a/lib/tsc.js b/lib/tsc.js
index 37e7f28602e6337b6216810d6a40e6701a99f0a5..6ac55bc88de4c3415cac5e218b2b4dad0a3adfc1 100644
--- a/lib/tsc.js
+++ b/lib/tsc.js
@@ -12463,7 +12463,7 @@ function isInternalDeclaration(node, sourceFile) {
 // src/compiler/utilities.ts
 var resolvingEmptyArray = [];
 var externalHelpersModuleNameText = "tslib";
-var defaultMaximumTruncationLength = 160;
+var defaultMaximumTruncationLength = 1e5;
 var noTruncationMaximumTruncationLength = 1e6;
 function getDeclarationOfKind(symbol, kind) {
   const declarations = symbol.declarations;

Results in:

ManagedRuntime<GuestClient | AuthenticatedClient | BaseURL | Session, never>.runPromise: <JWTPayload, _.InvalidJWT>(effect: Effect.Effect<JWTPayload, _.InvalidJWT, GuestClient | AuthenticatedClient | BaseURL | Session>, options?: {
    ...;
} | undefined) => Promise<...>

I suspect this is related to VS Code updates, even though I'm using the TypeScript workspace version.

Long term solution by @extremegf

in vscode

Using Ctrl+P, Go to node_modules/typescript/lib/tsserver.js or node_modules/typescript/lib/typescript.js

Find line var defaultMaximumTruncationLength = 160

Change it to 1000 or value of your choosing.

Open Ctrl+Shift+P menu, select TypeScript: Select TypeScript Version...

Ensure it's set to Use Workspace Version

Full restart VSCode - reloading workspace is not enough.

Verify that "..." abbreviations are gone from type hints.

PS.

cause noErrorTruncation in tsconfig didn't work for me.

changing tsserver.js of VScode's typescript is anoying every VSCode update

the extension mentioned in other solution is not copy-pasteable

Before: with ...

After: You can also drag the bottom border

Thanks, I was halfway making my extension for vs code, you saved me a lot of time.

Thanks, I was halfway making my extension for vs code, you saved me a lot of time.

I would still happily use your extension :)

Back to update my workaround :

If you have bun as your package manager you can use the bun patch command in order to
ensure that your modifications are re-applied after each bun install

Step 1: Run Bun Patch

bun patch typescript@5.8.0-dev.20241113

Step 2: Edit The Package

./patches/typescript@5.8.0-dev.20241113.patch

diff --git a/node_modules/typescript/.DS_Store b/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..f9f60d0a8f94f19a9f55d4bcbfeaf7866207ada5
Binary files /dev/null and b/.DS_Store differ
diff --git a/lib/typescript.js b/lib/typescript.js
index 4ed5056a2ff6648b59de5d2a871dab64e8c97a66..ccda9e88105bac6e5003210d98bb4c6cef867aa6 100644
--- a/lib/typescript.js
+++ b/lib/typescript.js
@@ -16116,7 +16116,7 @@ function isInternalDeclaration(node, sourceFile) {
 // src/compiler/utilities.ts
 var resolvingEmptyArray = [];
 var externalHelpersModuleNameText = "tslib";
-var defaultMaximumTruncationLength = 160;
+var defaultMaximumTruncationLength = 30000;
 var noTruncationMaximumTruncationLength = 1e6;
 function getDeclarationOfKind(symbol, kind) {
   const declarations = symbol.declarations;

Step 3: Commit The Patch

 bun patch --commit 'node_modules/typescript'

Troubleshooting

Prees Command Shift P

Search " Typescript Select "
*If you don't see this option open a typescript file to active typescript in vscode

Lastly restart the language server

Anybody else where changing js/ts.hover.maximumLength in vscode doesn't do anything, or at least not for this case?

Same here, but is due to Astro extension for me, see microsoft/vscode#259321

Navigation Menu

Repository navigation

Add full type hover popup to VS Code commands #35601

20 remaining items

Step 1: Run Bun Patch

Step 2: Edit The Package

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Add full type hover popup to VS Code commands #35601

Description

Activity

mjbvz commented on Dec 6, 2019

Arlen22 commented on Dec 7, 2019

mjbvz commented on Dec 7, 2019

Arlen22 commented on Dec 9, 2019

Arlen22 commented on Dec 9, 2019

mjbvz commented on Dec 10, 2019

Ciantic commented on Dec 23, 2019

Arlen22 commented on Dec 23, 2019

Arlen22 commented on Dec 25, 2019

DanielRosenwasser commented on Dec 30, 2019

20 remaining items

shwarcu commented on Feb 5, 2024

nikelborm commented on Feb 5, 2024

wysez commented on Feb 21, 2024

heysokam commented on May 1, 2024

vennson commented on Jul 1, 2024

kimhwanhoon commented on Jul 22, 2024

wertania commented on Aug 4, 2024

f15u commented on Sep 10, 2024

SinghChinmay commented on Sep 24, 2024

extremegf commented on Sep 25, 2024

pauldvu commented on Nov 15, 2024

Step 1: Run Bun Patch

Step 2: Edit The Package

mb21 commented on Sep 22, 2025

p-bakker commented on Nov 3, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions