← Concepts

The `Prettify` Helper

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