Add full type hover popup to VS Code commands

[Arlen22]

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:

• Show Hover: Disable three dots abbreviation (Ctrl+K Ctrl+I) vscode#66405
• Show full type in typescript type hover hint vscode#76480
• Show Hover: Disable three dots abbreviation (Ctrl+K Ctrl+I) vscode#66405

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.

[mjbvz]

@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

[Arlen22]

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.

[mjbvz]

Can you provide some specific code examples?

[Arlen22]

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;
}

[Arlen22]

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.

[mjbvz]

Moving upstream to get more feedback from the TS Team

[Ciantic]

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.

[Arlen22]

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

[Arlen22]

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.

[DanielRosenwasser]

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.

[Ciantic]

Ah, apparently it doesn't work always.

Btw, this is a duplicate of #26238

[Arlen22]

I desperately need this feature. Infer types from usage is giving me three dots when I use it if the original type has three dots. I also can't debug type problems because the three dots is not dependable and never guarantees that any particular type is actually repeated.

Since this is a TypeScript feature I can just build a custom TypeScript package, but I don't know where I would do that. Any ideas?

[devuxer]

@mjbvz

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.

What about a setting that just allows you to set a max tooltip length, and only apply ellipsis if tooltip length exceeds maximum? This would be a little bit like Terminal > Integrated: Scrollback.

[LoveriusB]

"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.

[Rechdan]

As @LoveriusB mentioned above, we can change the value of defaultMaximumTruncationLength, but it feels super wrong and a better option, maybe, would be to add that setting to tsconfig?

[tonyxiao]

Confirmed that this works really great #35601 (comment)

Combined with patch-package and it becomes automatic. Thanks for the awesome workaround until we get this in core.

[Arlen22]

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 [just search for the string] to something higher like ts.defaultMaximumTruncationLength = 800.

@RyanCavanaugh Can this be added as a config option of some kind so it can be changed in VS Code settings? I don't know the internals of the language server, but my end goal would be for it to be a setting in the Typescript section of VS code, however that works.

Also, it is very simple to avoid recursion. I don't know what the preferred way of doing it is but you could at least just substitute it with the never type or a keyword like root["path"]["to"]["first"]["reference"]. This could also be done for types which are repeated in multiple places in the same definition. Obviously those references could also be pulled out as separate type keywords so the definition would look like

type reference = { my: { recursive: { property: reference } } }; 

type root = { path: { to: { first: { reference: reference } } } };

or something of that nature. I'm not sure that's required, but it would also work.

[Arlen22]

Also going back to my OP, isn't there a way that Typescript files could make use of intellisense for Javascript files the same way other Javascript files can? Even just setting the import to const myJS = require("./myJS.js") as import("./myJS.js") would be helpful. I'm surprised this is still an issue. Unless I'm missing something.

[szulcus]

Any updates?

[AustinBernerEvercast]

+1

[toto1384]

+1 :))

[pauldvu]

Found myself going back and making the edit every so often so I made a bash snippet . For mac users just copy and paste into your terminal. Change the value to whatever you like.

:'
Mac OS | Visual Studio Code
Replace 1000 with any number
'
value='defaultMaximumTruncationLength = 1000'
sudo sed -i '' "s/defaultMaximumTruncationLength = 160/$value/" "/Applications/Visual Studio Code.app/Contents/Resources/app/extensions/node_modules/typescript/lib/tsserver.js"

For those of you using Visual Studio Code Insiders

:'
Mac OS | Visual Studio Code Insiders
Replace 1000 with any number
'
value='defaultMaximumTruncationLength = 1000'
sudo sed -i '' "s/defaultMaximumTruncationLength = 160/$value/" "/Applications/Visual Studio Code - Insiders.app/Contents/Resources/app/extensions/node_modules/typescript/lib/tsserver.js"

[fgarit-te]

+1 on this being a really useful feature. Right now I'm using the "Typescript Explorer" vscode extension but would hope this to be built in.

[nikelborm]

For those plusoners I just want to remind that you by doing that also sending emails to at least 20 people...

[extremegf]

The ts.defaultMaximumTruncationLength hack works great!

Steps to remove abbreviations from type hints:

1. Go to <workspace>/node_modules/typescript/lib/tsserver.js
2. Find line var defaultMaximumTruncationLength = 160
3. Change it to 160 * 2 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.

Hope it helps anyone looking for this.

[shwarcu]

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

[nikelborm]

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

[heysokam]

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

Thank you for sharing. Nextlevel useful ✍️

[vennson]

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
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.
• 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

[kimhwanhoon]

"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.

[wertania]

+1

[FedericoBiccheddu]

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.

[SinghChinmay]

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
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.
• 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.

[extremegf]

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

I would still happily use your extension :)