The Prettify
helper is a utility type that takes an object type and makes the hover overlay more readable.
ts
type Prettify<T> = {[K in keyof T]: T[K];} & {};
It's known by various names - Id
, Compute
, Unwrap
- but each uses this same implementation.
It's also not globally available in TypeScript - you'll need to define it yourself using the code above.
Example
Let's imagine that you've got a type with multiple intersections:
typescript
type Intersected = {a: string;} & {b: number;} & {c: boolean;};
If you hover over Intersected
, you'll see the following:
typescript
/*** { a: string; } & { b: number; } & { c: boolean; }*/
This is a little ugly. But we can wrap it in Prettify
to make it more readable:
typescript
type Intersected = Prettify<{a: string;} & {b: number;} & {c: boolean;}>;/*** {* a: string;* b: number;* c: boolean;* }*/
Much better. This also works on more complex computations, as the Remix team discovered.
Why This Works
It's not clear why using a mapped type and intersecting it with {}
actually works. It's a quirk of the TypeScript compiler.
Oddly, intersecting it with unknown
also works:
typescript
type Prettify<T> = {[K in keyof T]: T[K];} & unknown;
Does this make it likely to break in the future? No - TypeScript has tests to ensure that this code won't break, so you can consider Prettify
safe to use.
Share this TypeScript Concept with your friends