Set certain properties within the nested object to be optional

Question

Set certain properties within the nested object to be optional

Within a TypeScript project, there exists a type definition that looks like this:

type Bar = {
  x: string;
  y: string;
  data: {
    z: string;
    w: string;
  };
};

This type is imported and widely used throughout the project, making it impossible for me to make any changes to it.

I am interested in creating a function that accepts a Bar as its parameter, with x and data.z being optional since I can provide default values for these fields within the context of this function:

function performAction(bar: {
  x?: string;
  y: string;
  data: {
    z?: string;
    w: string;
  };
}): void {
  // carry out necessary actions
}

The actual type is much more complex and undergoes updates occasionally, therefore directly copying its definition to add optional properties is not a feasible solution.

Here are some methods I have attempted:

Bar & { x?: string; data: { z?: string } }

This approach does not work as it combines the Bar type with the specified optional properties. Essentially, this results in just the original Bar type due to the required properties taking precedence.

Exclude<Bar, { x?: string; data: { z?: string } }>

This method fails as Bar is not a type union, and Exclude can only eliminate types from unions. It cannot remove individual properties from a type defined by a literal like in this case.

Partial<Bar>

This makes all properties of Bar optional, which is not desired in my situation.

Omit<Bar, 'x'> & { x?: string }

Omit successfully removes x from Bar, allowing me to include x back as an optional property. However, addressing the nested z within data proves to be a challenge.

What would be the most effective approach to tackle this issue?

typescript

Answer 1

Answer №1

You have the ability to create a type based on Foo for the doSomething parameter, all without altering Foo. TypeScript's type system is structural, meaning it focuses on the shape of types rather than their names or identities. This allows you to make Foo compatible with your new type, enabling you to pass arguments of type Foo to doSomething, while also being able to pass arguments of your custom type.

One approach to defining the new type involves extracting necessary information from Foo and adjusting properties like a and metadata.c:

type SpecialFoo = Omit<Foo, "a" | "metadata"> & {
    a?: Foo["a"];
    metadata: Omit<Foo["metadata"], "c"> & {
        c?: Foo["metadata"]["c"];
    };
};

Subsequently, doSomething can accept instances of this new type:

function doSomething(foo: SpecialFoo): void {
    // perform actions
    console.log(foo);
}

The following examples demonstrate valid usage:

// Valid
doSomething({ b: "b", metadata: { d: "d" } });
// Valid
doSomething({ a: "a", b: "b", metadata: { c: "c", d: "d" } });

On the contrary, providing incorrect values for a and c lead to errors, enforcing data integrity:

// Error expected due to incorrect type for `a`
doSomething({ a: 42, b: "b", metadata: { d: "d" } });
// Error expected due to incorrect type for `c`
doSomething({ b: "b", metadata: { c: 42, d: "d" } });

Code Playground link

Answer 2

You have the ability to create a type based on Foo for the doSomething parameter, all without altering Foo. TypeScript's type system is structural, meaning it focuses on the shape of types rather than their names or identities. This allows you to make Foo compatible with your new type, enabling you to pass arguments of type Foo to doSomething, while also being able to pass arguments of your custom type.

One approach to defining the new type involves extracting necessary information from Foo and adjusting properties like a and metadata.c:

type SpecialFoo = Omit<Foo, "a" | "metadata"> & {
    a?: Foo["a"];
    metadata: Omit<Foo["metadata"], "c"> & {
        c?: Foo["metadata"]["c"];
    };
};

Subsequently, doSomething can accept instances of this new type:

function doSomething(foo: SpecialFoo): void {
    // perform actions
    console.log(foo);
}

The following examples demonstrate valid usage:

// Valid
doSomething({ b: "b", metadata: { d: "d" } });
// Valid
doSomething({ a: "a", b: "b", metadata: { c: "c", d: "d" } });

On the contrary, providing incorrect values for a and c lead to errors, enforcing data integrity:

// Error expected due to incorrect type for `a`
doSomething({ a: 42, b: "b", metadata: { d: "d" } });
// Error expected due to incorrect type for `c`
doSomething({ b: "b", metadata: { c: 42, d: "d" } });

Code Playground link

Answer 3

Answer №2

We have the option to utilize the MergeDeep utility type provided by type-fest:

This utility allows for merging two objects or arrays/tuples recursively into a new type.

Although not explicitly stated in the documentation, the optional flags denoted by ? in the source types are also retained.

In specific scenarios, such as when building optional nested properties within a complex object, this simplifies the process:

type Bar = {
    a?: string;
    metadata: {
        c?: string;
    }
};

type SpecialFoo = MergeDeep<Foo, Bar>;
//   ^? { b: string; a?: string | undefined; metadata: { d: string; c?: string | undefined; }; }

Playground Link

It might be appealing to represent the optional nested keys as a union of paths (e.g.

"a" | "metadata.c"

), rather than defining the Bar type as shown above. This approach eliminates the need to redefine the value types.

This becomes even more desirable considering that type-fest already includes useful utility types like PickDeep and Paths.

However, configuring only the final part of these paths as optional is not straightforward: simply using PartialDeep makes all intermediate keys optional, which may not be desired. In the example shared, the key metadata remains mandatory:

type SetOptionalDeep<T, PathUnion extends Paths<T>> =
    MergeDeep<T, PartialDeep<PickDeep<T, PathUnion>>>;

type SpecialFoo = SetOptionalDeep<Foo, "a" | "metadata.c">;
//   ^? { b: string; a?: string | undefined; metadata?: { d: string; c?: string | undefined } | undefined; }

function doSomething(foo: SpecialFoo): void {}

// Generating an error, as expected: the presence of "metadata" is required
doSomething({ b: "b" });

Playground Link

In cases like the one presented, where the key metadata is at the top level, we can easily make it mandatory again using SetRequired:

type SpecialFoo = SetRequired<SetOptionalDeep<Foo, "a" | "metadata.c">, "metadata">;
//   ^? { b: string; a?: string | undefined; metadata: { d: string; c?: string | undefined; }; }

// As intended, an error occurs since inclusion of "metadata" is compulsory
doSomething({ b: "b" });

Playground Link

Answer 4

We have the option to utilize the MergeDeep utility type provided by type-fest:

This utility allows for merging two objects or arrays/tuples recursively into a new type.

Although not explicitly stated in the documentation, the optional flags denoted by ? in the source types are also retained.

In specific scenarios, such as when building optional nested properties within a complex object, this simplifies the process:

type Bar = {
    a?: string;
    metadata: {
        c?: string;
    }
};

type SpecialFoo = MergeDeep<Foo, Bar>;
//   ^? { b: string; a?: string | undefined; metadata: { d: string; c?: string | undefined; }; }

Playground Link

It might be appealing to represent the optional nested keys as a union of paths (e.g.

"a" | "metadata.c"

), rather than defining the Bar type as shown above. This approach eliminates the need to redefine the value types.

This becomes even more desirable considering that type-fest already includes useful utility types like PickDeep and Paths.

However, configuring only the final part of these paths as optional is not straightforward: simply using PartialDeep makes all intermediate keys optional, which may not be desired. In the example shared, the key metadata remains mandatory:

type SetOptionalDeep<T, PathUnion extends Paths<T>> =
    MergeDeep<T, PartialDeep<PickDeep<T, PathUnion>>>;

type SpecialFoo = SetOptionalDeep<Foo, "a" | "metadata.c">;
//   ^? { b: string; a?: string | undefined; metadata?: { d: string; c?: string | undefined } | undefined; }

function doSomething(foo: SpecialFoo): void {}

// Generating an error, as expected: the presence of "metadata" is required
doSomething({ b: "b" });

Playground Link

In cases like the one presented, where the key metadata is at the top level, we can easily make it mandatory again using SetRequired:

type SpecialFoo = SetRequired<SetOptionalDeep<Foo, "a" | "metadata.c">, "metadata">;
//   ^? { b: string; a?: string | undefined; metadata: { d: string; c?: string | undefined; }; }

// As intended, an error occurs since inclusion of "metadata" is compulsory
doSomething({ b: "b" });

Playground Link

Set certain properties within the nested object to be optional

Answer №1

Answer №2

Similar questions

Angular's custom validator consistently returns a null value

Filter the angular accordion by passing a simple array value into the input

Steps for confirming a property setting on an interface

What is the best way to iterate through an array of arrays using a foreach loop to calculate the total number of specific properties?

Divide the code into individual components within Angular 2 projects

The error at core.js:4002 is a NullInjectorError with a StaticInjectorError in AppModule when trying to inject FilterService into Table

Launching Node Application

Issue with setting value using setState in TypeScript - what's the problem?

Converting JSON array to custom object array in TypeScript

Automatically compile files while performing an npm install or update

The module 'contentlayer/generated' or its type declarations are missing and cannot be located

Guidelines for implementing more rigorous type checks in TypeScript:

What is the best way to ensure type safety in a Promise using Typescript?

Is it possible to display Angular Material Slider after the label?

Is there a way to modify a suffix snippet and substitute the variable in VS Code?

Having trouble retrieving object property despite returning an object type - React with Typescript

What is the solution to the error message stating that the property 'pipe' is not found on the OperatorFunction type?

Patience is key: Techniques for waiting on service responses in Angular 2

What is the proper way to utilize a service within a parent component?

Typescript enables bidirectional control of Swiper