visual-studio-code

How can I make VS Code show full TypeScript type definitions on mouse hover?

I'm converting a React project from using JSX to using 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.

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

So how can I get the full type definition without working hard?

Solution

  • 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

    EDIT 2024: Changed File location and line number

    As of June 2024, this has moved to the file "typescript.js" on line 16207. Change the line var defaultMaximumTruncationLength = 160;. – @Braden Wong

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

    And, around line 16210:

    var defaultMaximumTruncationLength = 800;

    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:

    wait a couple seconds, it's fairly quick.