VS code how to show full typescript definition on mouse hover

Question

I'm converting React project from jsx to tsx files.

i need full preview of types of one constant:

const canvasProps = {
  setPorts,
  setBoxes,
  setLines,
  selected,
  setSelected,
  actionState,
  setActionState,
  ... // and more
};

on hover on canvasProps I get the preview:

const canvasProps: {
    setPorts: React.Dispatch<React.SetStateAction<{
        shape: string;
        id: string;
        name: string;
        port: portType;
        ref: any;
    }[]>>;
    setBoxes: React.Dispatch<React.SetStateAction<BoxType[]>>;
    ... 13 more ...;
    toggleFlowVisibility: (flow: any) => void;
}

I need to get the full type definition of this constant, which means see the extra 13 types.

(why I need this? I need to declare the properties of React.Context, which depends on functions that have not declared yet (inside a function component) )

so I do I get the full type definition without working hard?

Answer 1

Setting "noErrorTruncation": true, as proposed in the previous answer, does not work for this question as asked.

A quick fix that actually does work would be… a more offensive solution ;p

Start by opening

<Microsoft VS Code install folder>/resources/app/extensions/node_modules/typescript/lib/tsserver.js

And, around line 13471 (so far), change:

ts.defaultMaximumTruncationLength = 160

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 as much as you want.

This might not be maintainable as you will need to do it again after every Visual Studio 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 Visual Studio Code:

• Press ctrl + shift + P
• Type restart ts server
• Press enter.

wait a couple seconds, it's fairly quick.

Answer 2

Adding "noErrorTruncation": true to tsconfig.json has the side effect of expanding ... n more ... from the type preview in VSCode.

Answer 3

I have come across the same problem and found a very useful extension: https://marketplace.visualstudio.com/items?itemName=kimuson.ts-type-expand. This calculates and shows the full type definition on the explorer sidebar.

I am in no way associated with this extension.