How to Simplify Viewing Complex TypeScript Types?

Issue

When debugging TypeScript code, especially within libraries, I often encounter type definitions that seem labyrinthine to comprehend.

For example:

type SomeType = SomeTypeA | SomeTypeB | SomeTypeC;

type SomeTypeA = Omit<SomeTypeA1, 'type'> & SomeTypeA2 & { type: 'SomeTypeA' };

type SomeTypeB = Pick<SomeTypeB1, 'id' | 'label'> & Pick<SomeTypeB2, icon> & { type: 'SomeTypeB' };

// and many more and more definitions...

Is there a tool, function, VS Code extension, or library that simplifies understanding such types without delving into their intricate definitions?

I want to input a complex TypeScript type like SomeType and get a simplified version represented using basic primitive values. Resulting output such as:

interface SomeType {
  id: number;
  label: string;
  props: {
    num: number;
  };
  // ...and more simplified properties
}

Any guidance greatly appreciated.

Solution

Actually for this purpose, we are using this utility type, which does exactly this... but we use it only for debugging.

type Debug<T> = { [K in keyof T]: T[K] };

its used like:

type BetterType = Debug<SomeType>

Answered By - Wraithy