105

In VSCode, TypeScript shows really useful expansions of types I define. But there's a limit to what TS will show in IntelliSense. If a type is too long, then I'll see output like this:

enter image description here

Note the "11 more" near the end. Sometimes, for troubleshooting a difficult type definition, it's really helpful to see what's in that "N more" section.

Is there a way to get ahold of (for troubleshooting purposes during development) the fully-expanded type definition, without those "N more" messages to hide what's inside?

https://github.com/Microsoft/vscode/issues/6638 implies that this capability might not have been available (nor planned) as of Feb 2017, but I'm not sure I'm reading that issue correctly and regardless things may have changed in the meantime.

4 Answers 4

120

Try setting the noErrorTruncation option to true in tsconfig.json. Confusingly enough, this option affects truncation of types displayed on hover in at least some circumstances; see this issue. Be careful: if your type is really huge, VS Code may hang when you try to view it.

4
  • 3
    Unfortunately as mentioned in the issue linked this only seems to remove "..." in some cases and not all
    – Hugheth
    Commented Jul 16, 2020 at 7:52
  • 10
    @Hugheth This GitHub comment shows a workaround for those cases: github.com/microsoft/TypeScript/issues/… To quote: "For people using VS Code, a quick fix would be opening <Microsoft VS Code install folder>/resources/app/extensions/node_modules/typescript/lib/tsserver.js and change ts.defaultMaximumTruncationLength = 160 at around line 12797 to something higher like ts.defaultMaximumTruncationLength = 800." Commented Feb 20, 2021 at 18:49
  • 20
    for clarity, set the option as follows: { "compilerOptions": { "noErrorTruncation": true, } }
    – fairidox
    Commented Oct 21, 2022 at 19:26
  • 8
    the typescript-explorer extension is probably the better answer - github.com/Microsoft/TypeScript/issues/…
    – chrismarx
    Commented Oct 3, 2023 at 16:52
31

The accepted answer works for cases where the length of the type's description is 1600 characters or less.

To go beyond this hard limit, it's necessary to tweak the source code, as described in this fix posted on GitHub.

UPDATE: as of 2024-10-28, the location of the line to change is:

/Applications/Visual Studio Code.app/Contents/Resources/app/extensions/node_modules/typescript/lib/typescript.js

Where /Applications/Visual Studio Code.app is the default installation path on Mac—swap it out with where Visual Studio Code is installed on your system.

The line to change now looks like:

var defaultMaximumTruncationLength = 160;

and appears on line 16057.

Per @Denis-P, the new limit becomes 2X the value you set rather than 10X as before.

Once you've made the change, run command: >Developer: reload window for it to take effect.

3
  • 1
    FYI: when the change is made, you can just reload the VSCode window using (in MacOs) command + P and then > Developer: Reload Window Commented Jul 24, 2023 at 8:08
  • 1
    Now in 2024 (or maybe because I'm on Mac, but that's unlikely) the instructions were a bit different. The variable is now is located in <VS install dir>/Resources/app/extensions/node_modules/typescript/lib/typescript.js, and the string looks like var defaultMaximumTruncationLength = 160; (just search for that var name in that file). Also, 10 multiplier was changed to 2, so now the 160 length means 320 and not 1600 symbols (or bytes or whatever). I just set the variable value to 10000 - this was enough to fully expand all the obstructed type pop ups for me.
    – Denis P
    Commented Oct 28 at 17:17
  • 1
    Thanks @DenisP, I’ve updated the answer. Commented Oct 28 at 23:22
5

In the next line you can write:

type SubType = TransformArray['']

Put cursor inside the '' and VS-Code should display more helpful popover.

1
  • The popover will show an error message saying Property '' does not exist on type '{ reallyLongTypeHere: string; }'. This is unreadable as the type is all on one long line. But you can use Prettier to autoformat it at: prettier.io/playground Just prepend the type with some arbitrary type name like: type something = { reallyLongTypeHere: string; }'. You can also just do this inside vs code. Commented May 15 at 12:51
1

VS Code added an extension API for selecting verbosity levels in hovers (see #195394).

TypeScript's issue ticket for supporting this feature / integrating with this feature is in issue ticket Support Expandable Quick Info/Hover Verbosity #59029. That is to say- hold tight. Something that will address this problem builtin is coming. Feel free to contribute to the design discussion there (see the issue ticket description for open design questions, and read existing discussion), but please just use the thumbs up button instead of making comments like "+1" / "this would be great!".

My understanding is that that's going to be available as an experimental, opt-in feature in VS Code 1.96, with the setting "typescript.experimental.expandableHover": true.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.