Make specific attributes as non-compulsory in Typescript

Question

Make specific attributes as non-compulsory in Typescript

Seeking a solution that can achieve the following:

type MakeOptional<T, U> = /* ... */;

interface A {
  foo: string;
  bar: number;
  baz: Date;
}

type AWithOptionalFoo = MakeOptional<A, 'foo'>;
// desired output: { foo?: string | undefined; bar: number; baz: number; }

type AWithOptionalBarAndBaz = MakeOptional<A, 'foo' | 'baz'>;
// desired output: { foo?: string | undefined; bar: number; baz?: Date | undefined; }

This is my attempt so far...

type MakeOptional<T, U> = { [P in keyof T]: P extends U ? T[P] | undefined : T[P] }

...however, the properties are marked as T | undefined instead of having them appear as (optional)? T | undefined.

Any suggestions to improve this?

typescript

Answer 1

Answer №1

If you want to extract the non-optional keys in TypeScript, you can utilize the combination of Pick and Exclude types. Then, intersect this result with a mapped type that makes the remaining keys optional by including a union with undefined.

type MakeOptional<T, U extends keyof T> = Pick<T, Exclude<keyof T, U>> & {
    [K in U]?: T[K] | undefined;
}

If you prefer not to have the undefined union in the optional keys, you can simply use the partial modifier instead:

type MakeOptional<T, U extends keyof T> = Pick<T, Exclude<keyof T, U>> & Partial<Pick<T, U>>

With either approach above, you can define your types as follows:

declare const test1: AWithOptionalFoo;
test1.foo // string | undefined
test1.bar // number
test1.baz // Date

// Note: The type defined here actually references "foo" and "baz".
declare const test2: AWithOptionalBarAndBaz;
test2.foo // string | undefined
test2.bar // number
test2.baz // Date | undefined

Answer 2

If you want to extract the non-optional keys in TypeScript, you can utilize the combination of Pick and Exclude types. Then, intersect this result with a mapped type that makes the remaining keys optional by including a union with undefined.

type MakeOptional<T, U extends keyof T> = Pick<T, Exclude<keyof T, U>> & {
    [K in U]?: T[K] | undefined;
}

If you prefer not to have the undefined union in the optional keys, you can simply use the partial modifier instead:

type MakeOptional<T, U extends keyof T> = Pick<T, Exclude<keyof T, U>> & Partial<Pick<T, U>>

With either approach above, you can define your types as follows:

declare const test1: AWithOptionalFoo;
test1.foo // string | undefined
test1.bar // number
test1.baz // Date

// Note: The type defined here actually references "foo" and "baz".
declare const test2: AWithOptionalBarAndBaz;
test2.foo // string | undefined
test2.bar // number
test2.baz // Date | undefined

Make specific attributes as non-compulsory in Typescript

Answer №1

Similar questions

Visual Verification

Angular HTTP Patch method requires explicitly defined HTTP options as input parameters

Modules can cause issues with Angular routing functionality

Limit the type of parent to multiple children

The Vue API client fetches necessary information from the server and generates a .csv file with accurate headers and IDs. However, the data retrieved is incomplete

Error: Failed to execute close function in inappbrowser for Ionic application

What could be causing Typescript Intellisense to not display Object extensions?

The req.body parameter is consistently devoid of any content after being submitted

Understanding how to leverage styles.module.scss for implementing personalized styling within react-big-calendar

What is the method for assigning a value to an attribute in HTML?

Responsive Container MUI containing a grid

Finding the key type in an interface

Activate the mat-menu within a child component using the parent component

Please define the minimum and maximum `tsc` versions in your tsconfig.json file

Having T extend Record<string, any>, the keyof T does not return 'string' as a type

Customize your Joi message using the .or() method

Troubleshooting a NextJs/TS problem with importing ESM modules

What steps can I take to resolve a dependency update causing issues in my code?

Styling with react-jss based on intricate conditionals

Webpack does not support d3-tip in its current configuration