Is it possible to display the full computed type of a typescript type/interface in VSCode (or elsewhere)

Question

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.

Answer 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