Creating a specialized Typescript deep partial type for specific attributes

Question

Creating a specialized Typescript deep partial type for specific attributes

I have a challenge in writing a utility type that takes an object as a generic parameter and a union of strings to recursively make specific properties optional. While it may sound simple, I encountered an issue that I need assistance with. Here is the utility type I tried:

export type DeepPartial<Type, Property> = Type extends Array<infer ArrayType>
  ? Array<DeepPartial<ArrayType, Property>>
  : Type extends Record<string, unknown>
    ? {
    [Key in Extract<keyof Type, Property>]?: DeepPartial<Type[Key], Property>;
  } & {
  [Key in Exclude<keyof Type, Property>]: DeepPartial<Type[Key], Property>;
  }
    : Type;

This works well, except for one scenario. If the passed type already has optional properties, it requires those properties to exist in the created type (with a possible value of undefined), when they should actually not be required. For example:

type Test = {
  a: boolean,
  b: {
    a: 1,
    b: {
      c?: string;
    };
  },
  c?: string;
};

The variable defined below has an invalid type (when it shouldn't):

const d: DeepPartial<Test, 'a'> = {b: {b: {}}};

In order for it to work correctly, I need to explicitly provide an object with optional properties set to undefined:

const d: DeepPartial<Test, 'a'> = {b: {b: {c: undefined}}, c: undefined};

You can view this on TS Playground here: TS Playground Link

typescript typescript-generics

Answer 1

Answer №1

There may be alternative approaches to address this issue, but the following is the solution that I have come up with:

Handy Utilities

Prettify - serves as a utility for enhancing type readability:

type Prettify<T> = T extends infer R
  ? {
      [K in keyof R]: R[K];
    }
  : never;

UnionToIntersection - transforms union types into intersection. Reference:

type UnionToIntersection<U> = (
  U extends any ? (k: U) => void : never
) extends (k: infer I) => void
  ? I
  : never;

Solution

Your implementation is nearly complete except for the final & part. In your current setup, it's not possible to check for the ? identifier. Thus, we will need to adjust the recursion logic. Firstly, let's deduce a type for the remaining keys not present in Property:

Exclude<keyof Type, Property> extends infer Rest extends string.

Next, we must distribute the individual members of the union within Rest to handle the remaining keys individually. If this is not done, properties could become unexpectedly optional if some are optional and others are not. The distribution of Rest should follow this condition:

Rest extends Rest ? ... : never

If the condition holds true, the code snippet will execute for each member of the Rest union separately.

To determine if a property is optional or required, we can compare the part being tested against its required version by utilizing the following method:

Pick<Type, Rest> extends Required<Pick<Type, Rest>> ? true : false

If the condition is met, then the property is considered required; otherwise, it is optional:

Pick<Type, Rest> extends Required<Pick<Type, Rest>>
    ? { [Key in Rest]: DeepPartial<Type[Key], Property> }
    : { [Key in Rest]?: DeepPartial<Type[Key], Property> }
: never

By distributing the Rest, all these pieces will combine into a union result; however, they should ideally form a single object. Utilizing UnionToIntersection, we can merge them into one coherent object and wrap the entire DeepPartial in Prettify for better presentation.

Complete code:

type DeepPartial<Type, Property> = Prettify<
  Type extends Array<infer ArrayType>
    ? Array<DeepPartial<ArrayType, Property>>
    : Type extends Record<string, unknown>
    ? {
        [Key in Extract<keyof Type, Property>]?: DeepPartial<
          Type[Key],
          Property
        >;
      } & UnionToIntersection<
        Exclude<keyof Type, Property> extends infer Rest extends string
          ? Rest extends Rest
            ? Pick<Type, Rest> extends Required<Pick<Type, Rest>>
              ? { [Key in Rest]: DeepPartial<Type[Key], Property> }
              : { [Key in Rest]?: DeepPartial<Type[Key], Property> }
            : never
          : never
      >
    : Type
>;

playground

Answer 2

There may be alternative approaches to address this issue, but the following is the solution that I have come up with:

Handy Utilities

Prettify - serves as a utility for enhancing type readability:

type Prettify<T> = T extends infer R
  ? {
      [K in keyof R]: R[K];
    }
  : never;

UnionToIntersection - transforms union types into intersection. Reference:

type UnionToIntersection<U> = (
  U extends any ? (k: U) => void : never
) extends (k: infer I) => void
  ? I
  : never;

Solution

Your implementation is nearly complete except for the final & part. In your current setup, it's not possible to check for the ? identifier. Thus, we will need to adjust the recursion logic. Firstly, let's deduce a type for the remaining keys not present in Property:

Exclude<keyof Type, Property> extends infer Rest extends string.

Next, we must distribute the individual members of the union within Rest to handle the remaining keys individually. If this is not done, properties could become unexpectedly optional if some are optional and others are not. The distribution of Rest should follow this condition:

Rest extends Rest ? ... : never

If the condition holds true, the code snippet will execute for each member of the Rest union separately.

To determine if a property is optional or required, we can compare the part being tested against its required version by utilizing the following method:

Pick<Type, Rest> extends Required<Pick<Type, Rest>> ? true : false

If the condition is met, then the property is considered required; otherwise, it is optional:

Pick<Type, Rest> extends Required<Pick<Type, Rest>>
    ? { [Key in Rest]: DeepPartial<Type[Key], Property> }
    : { [Key in Rest]?: DeepPartial<Type[Key], Property> }
: never

By distributing the Rest, all these pieces will combine into a union result; however, they should ideally form a single object. Utilizing UnionToIntersection, we can merge them into one coherent object and wrap the entire DeepPartial in Prettify for better presentation.

Complete code:

type DeepPartial<Type, Property> = Prettify<
  Type extends Array<infer ArrayType>
    ? Array<DeepPartial<ArrayType, Property>>
    : Type extends Record<string, unknown>
    ? {
        [Key in Extract<keyof Type, Property>]?: DeepPartial<
          Type[Key],
          Property
        >;
      } & UnionToIntersection<
        Exclude<keyof Type, Property> extends infer Rest extends string
          ? Rest extends Rest
            ? Pick<Type, Rest> extends Required<Pick<Type, Rest>>
              ? { [Key in Rest]: DeepPartial<Type[Key], Property> }
              : { [Key in Rest]?: DeepPartial<Type[Key], Property> }
            : never
          : never
      >
    : Type
>;

playground

Creating a specialized Typescript deep partial type for specific attributes

Answer №1

Similar questions

What is the best way to assign JSON data to a Class variable within Angular?

"Exploring the world of Typescript declarations and the CommonJS module

Attempting to populate an array with .map that commences with a designated number in Angular using Typescript

A guide to successfully transferring data array values from a Parent Component to a Child Component using APIs in Angular

What is causing the transpiler to not be triggered by the code change?

Trouble with Angular 7: Form field not displaying touched status

Creating trendy designs with styled components: A guide to styling functional components as children within styled parent components

Transmit information between components through a form

Guide to incorporating external code in InversifyJS without direct control

Error encountered in Angular 7.2.0: Attempting to assign a value of type 'string' to a variable of type 'RunGuardsAndResolvers' is not allowed

Dealing with an unspecified parameter can be tricky - here's how you

The comparison of Booleans in Typescript sometimes produces inaccurate results

Issue with the code: Only arrays and iterable objects are permitted in Angular 7

enhancing the types of parameters in a function declaration without relying on generics

What is the best way to reload a React/TypeScript page after submitting a POST request?

Display an image in an Angular application using a secure URL

React Component not displaying properly when used inside a map iteration

The expected function is being executed, yet none of the inner functions are invoked

DotLottie file loading issues

What strategies can I implement to streamline the use of these functions instead of creating a separate one for each textfield