Creating a TypeScript generic parameter that is optional if no value is provided

Question

Creating a TypeScript generic parameter that is optional if no value is provided

When working with an interface, I have the following:

interface HandlerEvent<T = void> {
  data: T   // This parameter should always be required
}

I want to make data a required field if a value is passed when calling the function, otherwise it should be optional.

const actionHandler = ({}: HandlerEvent):void => { }

actionHandler({})  // Fails because data is required. How can I eliminate this error without specifying data?
actionHandler({data: undefined })  // Seems unnecessary in my opinion

So, I aim to be able to call the function without providing parameters for the generic, without being prompted for data. However, if I do provide a value for T, then data should be mandatory. While I could use data?: T, I am looking for an alternative to manually checking the presence of data in the code. I initially thought that setting the default parameter (void in this case) might resolve the issue, but it still requires me to pass data.

Currently, I receive errors even when trying to call actionHandler() without needing data. Is there something I'm missing about passing arguments to the generic?

I've come across several discussions on this topic, but couldn't find a definitive solution - they seem to have been closed without a clear answer, unless I missed it buried in the comments.

Referencing How to pass optional parameters while omitting some other optional parameters?

I did discover a related article that involves wrapping the generic - but is there a simpler approach that I may have overlooked?

Play around with TypeScript in this TS Playground link

typescript

Answer 1

Answer №1

To make the data optional only when undefined can be assigned to T, you can utilize a conditional type:

type HandlerEvent<T = void> = undefined extends T ? { data?: T } : { data: T }

This will produce the desired behavior:

type H = HandlerEvent
// type H = { data?: void | undefined; }

const actionHandler = (x: HandlerEvent): void => { }
actionHandler({}); // acceptable
actionHandler({ data: undefined }) // acceptable

If you need to apply this logic to multiple properties, you can create an UndefinedToOptional<T> type function that handles object types by making any property optional if undefined is assignable to it.

The implementation of the type function may seem complex but it achieves the desired outcome:

type UndefinedToOptional<T> = { [K in keyof T]-?:
    (x: undefined extends T[K] ? { [P in K]?: T[K] } : { [P in K]: T[K] }) => void
}[keyof T] extends (x: infer I) => void ?
    I extends infer U ? { [K in keyof U]: U[K] } : never : never

Although not aesthetically pleasing, it effectively processes object types without index or call signatures:

type Test = UndefinedToOptional<
    { a: string, b: number | undefined, c: unknown, d: boolean, e: any }
>;
// type Test = { 
//   a: string; b?: number | undefined; c?: unknown; d: boolean; e?: any; 
// }

You can then define HandlerEvent using this type function like so:

type HandlerEvent<T = void> = UndefinedToOptional<{ data: T }>

This leads to the same result as before.

Explore code on TypeScript Playground

Answer 2

To make the data optional only when undefined can be assigned to T, you can utilize a conditional type:

type HandlerEvent<T = void> = undefined extends T ? { data?: T } : { data: T }

This will produce the desired behavior:

type H = HandlerEvent
// type H = { data?: void | undefined; }

const actionHandler = (x: HandlerEvent): void => { }
actionHandler({}); // acceptable
actionHandler({ data: undefined }) // acceptable

If you need to apply this logic to multiple properties, you can create an UndefinedToOptional<T> type function that handles object types by making any property optional if undefined is assignable to it.

The implementation of the type function may seem complex but it achieves the desired outcome:

type UndefinedToOptional<T> = { [K in keyof T]-?:
    (x: undefined extends T[K] ? { [P in K]?: T[K] } : { [P in K]: T[K] }) => void
}[keyof T] extends (x: infer I) => void ?
    I extends infer U ? { [K in keyof U]: U[K] } : never : never

Although not aesthetically pleasing, it effectively processes object types without index or call signatures:

type Test = UndefinedToOptional<
    { a: string, b: number | undefined, c: unknown, d: boolean, e: any }
>;
// type Test = { 
//   a: string; b?: number | undefined; c?: unknown; d: boolean; e?: any; 
// }

You can then define HandlerEvent using this type function like so:

type HandlerEvent<T = void> = UndefinedToOptional<{ data: T }>

This leads to the same result as before.

Explore code on TypeScript Playground

Creating a TypeScript generic parameter that is optional if no value is provided

Answer №1

Similar questions

Encountering an issue when trying to access a class's member variable within the "then" function of

experiencing an excessive amount of rerenders when trying to utilize the

Array behavior subjects are used to store multiple values and emit new

Validating patterns in Angular without using a form

When using Angular with mdbootstrap, the mdb-tabs directive will move to the end if the ngIf condition is true

Setting the root directory and output directory can be a bit tricky when dealing with source code scattered across multiple folders. Here's

issue with mongoose virtual populate (unable to retrieve populated field)

Custom options titled MUI Palette - The property 'primary' is not found in the 'TypeBackground' type

Exploring the possibilities of retrieving Cognitive data from Lambda events using Node.js and Typescript

TypeOrm throws an error: ColumnTypeUndefinedError - the column type for #name is unspecified and cannot be inferred

Delegating in Typescript/Angular2 without using an arrow function

A Unique Identifier in Kotlin

Creating a Responsive Canvas for PDF.JS Viewer

Using TypeScript to specify a limited set of required fields

What is the significance of utilizing an empty value `[]` for a typed array interface instead of using an empty `{}` for a typed object interface?

Angular: sending the user input to the component

Creating a duplicate form when a user clicks using JavaScript

Is it necessary for NestJS exception filters to handle event emitter errors?

Deciphering the significance of [index: string] in TypeScript

Using Typescript, develop a function within an entity to verify the value of a property