11

When you hover over a type in VSCode it shows the type, but if you have a larger type it usually displays it as { a: string; ... 24 more ...; z: string }. Is it possible to get it to display the full type somehow?

Similarly, if you have an intersection of two types then sometimes it will just display it as Type1 & Type2 instead of displaying the full type, or if you use the Pick then it will display Pick<Type1, "a" | ... 23 more ... | "z">...

In all of these cases I think it would be useful to check my understanding of what typescript is doing to be able to see the full type sometimes and was wondering if there was a way to do that, whether through vscode or somehow through typescript's tools.

JSoet
  • 602
  • 5
  • 19
  • 3
    To prevent (some of) the tooptip truncation you can use the `"noErrorTruncation": true` compiler option. To expand mapped types you can use this trick: https://stackoverflow.com/questions/53993725/typescript-how-to-merge-the-representation-in-tooltip-of-this-intersection/53994079#53994079 – Titian Cernicova-Dragomir Jun 14 '19 at 09:54
  • 1
    I just posted a similar question here https://stackoverflow.com/questions/63044623/create-export-of-computed-types-in-file – ThomasReggi Jul 23 '20 at 00:20

1 Answers1

1

No, there isn't. However the latest release of TS does make this better than it was before. When I am troubleshooting types I use a few techniques to unravel complex types.

The biggest on is to create types for the properties you are trying to inspect. Then you can index in the object to inspect the types. Not ideal, but easy, and fast.

const object1 = { a1: 4, b1: "test", c1: true, d1: ["test", "test2"], e1: { ea1: "yes", eb1: 3, ec1: [4] } as const } as const;
const object2 = { a2: 4, b2: "test2", c2: false, d1: ["testw", "testw2"], e2: { ea2: "no", eb2: 5, ec2: [8] } as const } as const;
const object3 = { a3: 4, b3: "test", c3: true, d3: ["test", "test2"], e3: { ea3: "never", eb3: 3, ec3: [4] } as const } as const;
const object4 = { a4: 4, b4: "test2", c4: false, d4: ["testw", "testw2"], e4: { ea4: "maybe", eb4: 5, ec4: [8] } as const } as const;
type testComplexType = typeof object1 & typeof object2 & typeof object3 & typeof object4;

type whatTypeIsThis = testComplexType["e1"]["ea1"]; //yes
type whatTypeIsThis2 = testComplexType["e2"]["ea2"]; //no
type whatTypeIsThis3 = testComplexType["e3"]["ea3"]; //never
type whatTypeIsThis4 = testComplexType["e4"]["ea4"]; //maybe
Tim
  • 2,756
  • 1
  • 11
  • 17