How to leverage generics in TypeScript to either omit a parameter in a function or make it optional

Question

How to leverage generics in TypeScript to either omit a parameter in a function or make it optional

How can I modify a function based on generics to omit or make optional the last parameter?

interface Requests {
     post: {
         data: {
             test: number
         }
     }
     patch: {
         data: {
            test?: number
         }
     }
     get: never
 }

const makeRequest = <Method extends keyof Requests>
   (method: Method, data: Requests[Method] extends {data: infer Data} ? Data : never)
 => { /* ... */ }

makeRequest('post', { test: 1 })  // this is correct as the second parameter is required

In the case of 'patch' method where the 'data' object has no required fields, it should be possible to not pass anything as the second parameter.

 makeRequest('patch', {})   
 makeRequest('patch')  // an error is thrown: Expected 2 arguments, but received 1

For methods like 'get' where the second parameter is irrelevant since there is no data structure defined, it should either be completely omitted or at least not require an empty object.

makeRequest('get') // error: Expected 2 arguments, but got 1

typescript typescript-typings typescript-generics

Answer 1

Answer №1

When working with TypeScript without using function overloads, it becomes necessary to conditionally require the second parameter. This can be achieved by destructuring a conditionally typed tuple.

An experienced TypeScript practitioner might find a way to reduce this to just 1 conditional statement. Here is an example of how it can be done:

const makeRequest = <Method extends keyof Requests>
   (...[method, data]:
    Requests[Method] extends { data: infer Data }
      ? Partial<Data> extends Data ? [method: Method, data?: Data] : [method: Method, data: Data]
      : [method: Method]) => { /* ... */ }

The essence remains in checking for the existence of the data property. However, it is important to avoid having never in the Requests, as it would disrupt the distributive conditional type.

To simplify things and prevent potential errors, it is recommended to use undefined or void in place of never in Requests:

interface Requests {
     post: {
         data: {
             test: number
         }
     }
     patch: {
         data: {
            test?: number
         }
     }
     get: undefined // replaced never with undefined
}

Additionally, the special condition I introduced, Partial<Data> extends Data, helps determine if everything within Data is optional (which allows Partial<T> to be assignable to T).

It's important to note that while this typing approach may work well, it could potentially lead to type errors when implementing makeRequest.

Playground

In exploring what overloads could potentially look like, it's possible to have 3 signatures. However, my attempt at implementation became too complex:

type KeysThatAreObjects<T> = {
    [K in keyof T]: T[K] extends object ? K : never;
}[keyof T];

function makeRequest<
    K extends Exclude<keyof Requests, KeysThatAreObjects<Requests>>,
>(method: K): void;
function makeRequest<K extends KeysThatAreObjects<Requests>>(
    ...args: Partial<Requests[K]["data"]> extends Requests[K]["data"]
        ? [method: K, data?: Requests[K]["data"]]
        : [method: K, data: Requests[K]["data"]]
): void;
function makeRequest(method: keyof Requests, data?: unknown) {
    // implementation
}

Playground

Answer 2

When working with TypeScript without using function overloads, it becomes necessary to conditionally require the second parameter. This can be achieved by destructuring a conditionally typed tuple.

An experienced TypeScript practitioner might find a way to reduce this to just 1 conditional statement. Here is an example of how it can be done:

const makeRequest = <Method extends keyof Requests>
   (...[method, data]:
    Requests[Method] extends { data: infer Data }
      ? Partial<Data> extends Data ? [method: Method, data?: Data] : [method: Method, data: Data]
      : [method: Method]) => { /* ... */ }

The essence remains in checking for the existence of the data property. However, it is important to avoid having never in the Requests, as it would disrupt the distributive conditional type.

To simplify things and prevent potential errors, it is recommended to use undefined or void in place of never in Requests:

interface Requests {
     post: {
         data: {
             test: number
         }
     }
     patch: {
         data: {
            test?: number
         }
     }
     get: undefined // replaced never with undefined
}

Additionally, the special condition I introduced, Partial<Data> extends Data, helps determine if everything within Data is optional (which allows Partial<T> to be assignable to T).

It's important to note that while this typing approach may work well, it could potentially lead to type errors when implementing makeRequest.

Playground

In exploring what overloads could potentially look like, it's possible to have 3 signatures. However, my attempt at implementation became too complex:

type KeysThatAreObjects<T> = {
    [K in keyof T]: T[K] extends object ? K : never;
}[keyof T];

function makeRequest<
    K extends Exclude<keyof Requests, KeysThatAreObjects<Requests>>,
>(method: K): void;
function makeRequest<K extends KeysThatAreObjects<Requests>>(
    ...args: Partial<Requests[K]["data"]> extends Requests[K]["data"]
        ? [method: K, data?: Requests[K]["data"]]
        : [method: K, data: Requests[K]["data"]]
): void;
function makeRequest(method: keyof Requests, data?: unknown) {
    // implementation
}

Playground

How to leverage generics in TypeScript to either omit a parameter in a function or make it optional

Answer №1

Similar questions

Exploring the implementation of TypeScript conditional props alongside the useContext hook

"In the combined declaration of 'DepartmentListComponent', all individual declarations must either be exported or kept local." - error message regarding routing components in TypeScript file

Synchronizing data between parent and child components using two-way binding with emit in Vue 3 using TypeScript

Exploring methods to successfully upload a blob to Firebase and modify it using cloud functions

The feature of declaration merging does not function properly with the express 4.17.* request type

Error message is not shown by React Material UI OutlinedInput

I am experiencing difficulties with my data not reaching the function in my component.ts file within Angular

What is the significance of requiring a specific string in a Typescript Record when it is combined with a primitive type in a union?

The attribute 'commentText' is not found within the 'Comment' data type

default folder location for core modules adjustment

Inefficiency in POST method prevents data transmission to MongoDB

Exploring the Possibilities of Nipplejs Integration in Vue with Quasar

What is the best way to define a general class within the constructor of another class in TypeScript?

Guide on how to address the problem of the @tawk.to/tawk-messenger-react module's absence of TypeScript definitions

What is the best way to retrieve a string from a URL?

Tips on creating an object within a TypeScript interface

The issue at hand is that the Mongo Atlas model is in place, but for some reason,

Mongoose version 5.11.14 is causing TypeScript error TS2506 when attempting to utilize async iterators, requiring a '[Symbol.asyncIterator]()' to be present

TypeORM ensures that sensitive information, such as passwords, is never returned from the database when retrieving a user

Identifying Typescript argument types