A super useful type helper in TypeScript by Matt Pocock from Twitter

readme.md

Use case

Suppose you have a type that has many intersections:

export type SimpleShape = {
  color: string;
} & {
  size: number;
} & {
  shape: "circle" | "square";
};

When you hover over the type SimpleShape with many intersections, it can be difficult to see the resolved type. It would be helpful if there was a way to prettify the display of these types.

With Prettify we can using:

type Shape = Prettify<SimpleShape>;
//   ^? type Shape = {
//        color: string;
//        size: number;
//        shape: "circle" | "square";
//      }

This is really helpful. Thank you, Matt!

Prettify.ts

/**
* A TypeScript type alias called `Prettify`.
* It takes a type as its argument and returns a new type that has the same properties as the original type, 
* but the properties are not intersected. This means that the new type is easier to read and understand.
*/
type Prettify<T> = {
	[K in keyof T]: T[K];
} & {};

This works for nested objects

type Prettify<T> = {
  // [K in keyof T]: T[K];
  [K in keyof T]: T[K] extends object ? Prettify<T[K]> : T[K];
  // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
} & unknown;

This works for nested objects这适用于嵌套对象

type Prettify<T> = {
  // [K in keyof T]: T[K];
  [K in keyof T]: T[K] extends object ? Prettify<T[K]> : T[K];
  // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
} & unknown;

doesn't work.

This will work, but I don't know if there will be any performance issues.

Ok, thanks. Deadlines for coursework submission are close. I am also a student; I can feel how you feel but don't worry https://domypaper.com/ is here for timely and efficient writing assistance. Their dedicated team of writers is ready to help you excel in your academic endeavors. If you are in this situation, then visit domypaper to find out more.

This works for nested objects

type Prettify<T> = {
  // [K in keyof T]: T[K];
  [K in keyof T]: T[K] extends object ? Prettify<T[K]> : T[K];
  // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
} & unknown;

This works for nested objects

type Prettify<T> = {
  // [K in keyof T]: T[K];
  [K in keyof T]: T[K] extends object ? Prettify<T[K]> : T[K];
  // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
} & unknown;

It does work for objects, but it will also break Classes, for example with this code:

export type Prettify<T> = {
  [K in keyof T]: T[K]
} & {}

you will get this:

but with this one:

export type Prettify<T> = {
  [K in keyof T]: T[K] extends object ? Prettify<T[K]> : T[K];
} & {}

you will get this:

It would be great if you could check if the T[K]'s type is Real object, if so then prettify it