Using TypeScript to Limit the Generic Type Parameter Passed into a Function

Question

Using TypeScript to Limit the Generic Type Parameter Passed into a Function

I am working with a generic interface that has specific constraints applied to its parameters. Here is an example of how it is used:

interface Fetcher<Params,Resp> {
  fetch(params: Params): Resp;
};

In my code, I have a function that uses this interface with additional constraints on the generic parameters:

function paginateWithSearch<Params extends (PaginationParams & SearchParams),
  Resp extends SomeItemsResp>(fetcher: Fetcher<Params, Resp>){
    //do something      
}

The constraints are defined using simple objects like so:

type SearchParams = {
    query: string
};

However, I am facing difficulties in making these constraints work properly in practice. For instance, even when the constraints are not met, the code still runs without errors:

//sample implementation with SearchParams only
const searchFetcher: Fetcher<SearchParams, SomeItemsResp> = {
  fetch: function(): SomeItemsResp {
    throw new Error("Function not implemented.");
  }
}

//Should throw error but works ok - not extending PaginationParams
paginateWithSearch(searchFetcher);

To solve this issue, I have resorted to inferring generic parameters with conditional types and manually passing them to the function:

//now throws error if inferred manually
paginateWithSearch<FetcherParamsInfer<typeof searchFetcher>, FetcherRespInfer<typeof searchFetcher>>(
  searchFetcher
);

It seems like there might be a simpler solution that I am missing. Any input would be appreciated.

typescript generics types typescript-generics

Answer 1

Answer №1

Despite being contrary to common sense, it functions as expected.

Keep in mind that a callback is not obliged to utilize all the given arguments or their data:

declare function convertObjToString(obj: {
  toString: () => string;
}): void;

[new Date()].forEach(convertObjToString);
// It works fine, even though it receives a Date object with additional properties

Hence, it is perfectly acceptable to pass a searchFetcher that only requires a SearchParams argument, even if it ends up receiving a

PaginationParams & SearchParams

object (which contains extra properties not necessary for the searchFetcher).

You could even provide a callback that doesn't take any arguments at all:

paginateWithSearch({
  fetch() { // No arguments needed: no problem
    return {
      items: []
    };
  }
});

Naturally, this indicates that the callback does not make use of any incoming data and will therefore return an unrelated response (such as a fixed empty array in this case).

In your scenario, it would only return information related to search and ignore pagination parameters.

It is the responsibility of the caller of paginateWithSearch to provide a sensible callback for the specific situation, whether it should involve both pagination and search, either one of them, or none.

However, it cannot utilize a callback that requires something beyond pagination and search, like sorting, for example.

paginateWithSearch({
  // Error: Property 'sorting' is missing in type 'PaginationParams & SearchParams' but required in type '{ sorting: string; }'.
  fetch(params: { sorting: string }) {
    return { items: [] };
  }
})

Access Playground Link

Answer 2

Despite being contrary to common sense, it functions as expected.

Keep in mind that a callback is not obliged to utilize all the given arguments or their data:

declare function convertObjToString(obj: {
  toString: () => string;
}): void;

[new Date()].forEach(convertObjToString);
// It works fine, even though it receives a Date object with additional properties

Hence, it is perfectly acceptable to pass a searchFetcher that only requires a SearchParams argument, even if it ends up receiving a

PaginationParams & SearchParams

object (which contains extra properties not necessary for the searchFetcher).

You could even provide a callback that doesn't take any arguments at all:

paginateWithSearch({
  fetch() { // No arguments needed: no problem
    return {
      items: []
    };
  }
});

Naturally, this indicates that the callback does not make use of any incoming data and will therefore return an unrelated response (such as a fixed empty array in this case).

In your scenario, it would only return information related to search and ignore pagination parameters.

It is the responsibility of the caller of paginateWithSearch to provide a sensible callback for the specific situation, whether it should involve both pagination and search, either one of them, or none.

However, it cannot utilize a callback that requires something beyond pagination and search, like sorting, for example.

paginateWithSearch({
  // Error: Property 'sorting' is missing in type 'PaginationParams & SearchParams' but required in type '{ sorting: string; }'.
  fetch(params: { sorting: string }) {
    return { items: [] };
  }
})

Access Playground Link

Using TypeScript to Limit the Generic Type Parameter Passed into a Function

Answer №1

Similar questions

Check the type of a conditional parameter

Error in TypeScript on SendGrid API: Invalid HttpMethod

Transforming Typescript Strings into ##,## Format

Inject a generic struct's dependencies seamlessly without the need to continually specify placeholder types or constraints

Automatically injecting dependencies in Aurelia using Typescript

Mapping an array in Typescript using Angular to instantiate a class

Is it feasible to obtain the parameter types of a function in Typescript?

react useState fetch does not loop

Experiencing an issue with mui/material grid causing errors

When transmitting information to the server, the browser initiates four requests

Creating a list with axios in the ngOnInit lifecycle hook

Creating a Jasmine test for the event.target.click can be accomplished by defining a spec that

Error occurs when trying to merge and export namespaces in TypeScript

When invoking the function, the original state remains unaffected within a separate function

Ways in which this data can be best retrieved

When my React component is tested by consumers, it cannot be located on npm

Error: Issue determining the type of variable. Unable to eliminate type 'any'

Loop through every item in Typescript

Is there a way to conceal an element within a component based on the current component being used with the router?

Experience the power of TypeScript in a serverless environment as you transform your code from