Deep Partials In TypeScript

Sharing what we're hacking while building https://onelife.city

AI generated image for Mumbai

Partials in TypeScript are not deep. So if you had an interface FooBar like below:

interface FooBar {
    foo: string;
    bar: {
        bar1: string;
        bar2: string;
    }
}

then below code will result in a TypeScript error because TypeScript is expecting the missing child property bar2 on parent property bar:

const fooBar: Partial<FooBar> = {
    bar: {
        bar1: 'bar1'
    }
}

One way to solve this is to create a new type named DeepPartial like below:

type DeepPartial<T> = T extends object
  ? {
      [P in keyof T]?: DeepPartial<T[P]>;
    }
  : T;

and below code works now:

const fooBar: DeepPartial<FooBar> = {
    bar: {
        bar1: 'bar1'
    }
}