18

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?

Improve this question
7
  • I'm not sure I fully understand. Where canvasProps comes from? Is it an object you declared, or is it declared by 3rd party? Commented Jun 22, 2020 at 7:19
  • it's object declared inside my 'main' react component, and then this object is used as my context value object (that all the child components using). the thing is, I need to define a context using React.createContext outside the main component so all the other children will be able to import it, so I need to predefine the types of each var in this object. Commented Jun 22, 2020 at 7:24
  • If I understand you correctly, what about make the context structure as interface? so, first, you'll be typesafe when you change the context and second, consume that type in the children. Commented Jun 22, 2020 at 7:51
  • 1
    Here is a tiny project for a reference - github.com/godon019/typescript-react-useContext-example/tree/… Commented Jun 22, 2020 at 7:53
  • 1
    Agreed. I tried to dig into vscode codebase to find where exactly this tooltip content been calculated but seems it's out vscode itself (but probably it's just me). This is how far I went: github.com/moshfeu/vscode/blob/…. Anyway, it smells like a feature request, or a question on Github, at least. Commented Jun 22, 2020 at 10:26

3 Answers 3

Reset to default
40

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:

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

wait a couple seconds, it's fairly quick.

=========================EDIT====================
https://github.com/microsoft/TypeScript/pull/61662

Brend new PR that should fix that issue.

Improve this answer
Sign up to request clarification or add additional context in comments.

9 Comments

Hey, I believe that this is how it would on a windows machine or maybe linux machine, is that right? I'm trying to achieve the same thing on macOS, but I can't seem to find this defaultMaximumTruncationLength option. Do you have any idea where I should be able to find this option on macOS?
Hi there, Well I'm sorry to report that this has been done on a mac at the time of posting. I couldn't say if they changed it or not :/
As of June 2024, this has moved to the file "typescript.js" on line 16207. Change the line var defaultMaximumTruncationLength = 160;.
I just tried and it didn't change.
so stupid we need to hack the system like barbarians just to see the entire type
|
4

Hm. The top (at the time of this writing) answer claims that "noErrorTruncation": true (put in the compilerOptions of your tsconfig.json) doesn't work, but at least for a simple example I tried, it really does make a difference:

const canvasProps = {
   aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa1: 1,
   aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa2: 2,
   aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa3: 3,
   aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa4: 4,
   aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa5: 5,
   aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa6: 6,
   aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa7: 7,
   aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa8: 8,
   aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa9: 9,
}

With "noErrorTruncation": true, the VS Code hover info shows the full type, but without it, it only shows

const canvasProps: {
    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa1: number;
    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa2: number;
    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa3: number;
    ... 5 more ...;
    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa9: number;
}

In any case, you'll probably be interested in the following issue tickets:

You can give them a thumbs up to show support for them and subscribe to them to get notified about discussions and progress. But please don't make a "me too" comment. "me too" comments generally come off as annoying to repo maintainers because they clutter up discussion and don't contribute anything of significant value.

Another workaround someone suggested at https://github.com/microsoft/TypeScript/issues/35601#issuecomment-921752554 is to edit tsserver itself to increase the threshold before it starts truncating. There's a line in tsserver.js that does ts.defaultMaximumTruncationLength = that sets the threshold. You can edit that file. For the TypeScript that comes with VS Code (if you don't use the typescript.tsdk VS Code setting), that's somewhere like in /resources/app/extensions/node_modules/typescript/lib/tsserver.js of the VS Code installation. If you use typescript.tsdk, then you'd edit the typescript installed in your workspace folder's node_modules. This is probably flaky though. VS Code might issue a corruption warning if you edit its files, and if you reinstall / update your node_modules typescript, then you'll need to make that modification again.

For your reference and learning purposes, the above issue tickets were found by googling "github vscode issues typescript hover info type more".

Improve this answer

Comments

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.

Improve this answer

3 Comments

This is really cool. It would be awesome if there was an option to have this functionality inside the tooltip though.
this extension works so poorly it's annoying. It doesn't show if properties are readonly, it often doesn't even show the type when it is supposed to. I can't believe there is no solution to see the entire type in typescript
useless, cant even copy the typed out literals

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.