Understanding how to infer the type of a function when it is passed as an argument

Question

Understanding how to infer the type of a function when it is passed as an argument

Looking at the images below, I am facing an issue with my function that accepts options in the form of an object where one of the arguments is a transform function. The problem is that while the type of the response argument is correctly inferred for the entire function (as seen in the first and second pictures), my TypeScript compiler implicitly treats the response argument as the any type (shown in the third picture). I'm confused about why it's not recognizing the proper response type which should be

ApiResponse<NewsListApiResponseData>

in this scenario.

https://i.stack.imgur.com/DSgzg.jpg https://i.stack.imgur.com/jrnGQ.jpg https://i.stack.imgur.com/0IenW.jpg

Error:(27, 20) TS7006: Parameter 'response' implicitly has an 'any' type.

Below is the definition of my overloaded useAxios hook for this situation:

export function useAxios<ResponseData, TransformedData = false | null | ResponseData>(
    endpoint: string,
    options: {
        autoStart?: boolean;
        transform: (response: ApiResponse<ResponseData>) => TransformedData;
        onResolve?: (data: TransformedData) => void;
        onReject?: (error: Error) => void;
    } & AxiosHookRequestConfig
): {
    loading: boolean;
    canceled: boolean;
    error?: Error;
    response?: AxiosResponse<ApiResponse<ResponseData>>;
    data?: TransformedData;
    request: (config?: AxiosHookRequestConfig) => Promise<TransformedData>;
    cancel: (reason?: string) => void;
};

Edit: Added AxiosHookRequestConfig definition.

export interface AxiosHookRequestConfig extends Omit<AxiosRequestConfig, 'url' | 'cancelToken'> {
    page?: number;
    lang?: string;
    cache?: boolean | string;
}

... // The rest of the code remains the same.

Edit2: Example

reactjs typescript function react-hooks type-inference

Answer 1

Answer №1

Let's delve into the heart of this matter:

function foo<T>(x: { prop: T }): void;
function foo<T>(x: { prop: T, func: (x: T) => void }): void;
foo({ prop: "hey", func: x => x.length }); // error!
//   ┌─────────────────> ~
// Parameter 'x' implicitly has an 'any' type.

This scenario mirrors this reported issue, deemed as "working as intended". The issue arises when the call corresponds to the first overload signature, leaving the compiler unable to infer the type of x.

How does it fit both signatures? The reason is that in TypeScript, object types are not exact. If you have an interface like interface Foo {a: string}, and another interface

interface Bar extends Foo {b: string}

, every instance of Bar is also a Foo due to subtyping rules. Therefore, a type like {a: string} is compatible with any object having additional properties, as long as it contains a string-valued property named a. The compiler usually provides warnings about excess properties but seems to overlook them in this case since func is part of the types being checked which may be a design limitation or a bug.

Subsequently, the compiler perceives func as a function type, yet fails to operate with contextual typing for x when matching the first overload, resulting in the "implicit any" error message.

Several approaches can be taken from here. One option is to rearrange the order of overloads so that the first one is more restrictive. Overload resolution halts at a generic top overload signature preventing further processing. Hence, a good practice is to place more specialized overloads above general ones:

function foo<T>(x: { prop: T, func: (x: T) => void }): void;
function foo<T>(x: { prop: T }): void;
foo({ prop: "hey", func: x => x.length }); // okay

This selection chooses the first overload, where the data type of func is known, allowing x to be inferred as string.

Another approach involves modifying the more-general overload to disallow the concerned call by making func a property that cannot exist, like so:

function foo<T>(x: { prop: T, func?: never }): void;
function foo<T>(x: { prop: T, func: (x: T) => void }): void;
foo({ prop: "hey", func: x => x.length }); // okay

With this alteration, in the initial overload, func becomes an optional property with a value of type never. Except for undefined, there is no other way to satisfy the condition, making a function like x => x.length invalid. Hence, the call bypasses the first overload to choose the second and infers string for x.

Lastly, if two similar overloads differ only in a potentially present property, merging them into a single signature without overloads might be beneficial. Although this may not align with your specific requirements, it is something worth considering:

function foo<T>(x: { prop: T, func?: (x: T) => void }): void;
foo({ prop: "hey", func: x => x.length }); // okay

Now, there exists a lone call signature allowing func to be either present or absent.

You can explore these options to find a suitable solution. Wishing you the best of luck!

Answer 2

Let's delve into the heart of this matter:

function foo<T>(x: { prop: T }): void;
function foo<T>(x: { prop: T, func: (x: T) => void }): void;
foo({ prop: "hey", func: x => x.length }); // error!
//   ┌─────────────────> ~
// Parameter 'x' implicitly has an 'any' type.

This scenario mirrors this reported issue, deemed as "working as intended". The issue arises when the call corresponds to the first overload signature, leaving the compiler unable to infer the type of x.

How does it fit both signatures? The reason is that in TypeScript, object types are not exact. If you have an interface like interface Foo {a: string}, and another interface

interface Bar extends Foo {b: string}

, every instance of Bar is also a Foo due to subtyping rules. Therefore, a type like {a: string} is compatible with any object having additional properties, as long as it contains a string-valued property named a. The compiler usually provides warnings about excess properties but seems to overlook them in this case since func is part of the types being checked which may be a design limitation or a bug.

Subsequently, the compiler perceives func as a function type, yet fails to operate with contextual typing for x when matching the first overload, resulting in the "implicit any" error message.

Several approaches can be taken from here. One option is to rearrange the order of overloads so that the first one is more restrictive. Overload resolution halts at a generic top overload signature preventing further processing. Hence, a good practice is to place more specialized overloads above general ones:

function foo<T>(x: { prop: T, func: (x: T) => void }): void;
function foo<T>(x: { prop: T }): void;
foo({ prop: "hey", func: x => x.length }); // okay

This selection chooses the first overload, where the data type of func is known, allowing x to be inferred as string.

Another approach involves modifying the more-general overload to disallow the concerned call by making func a property that cannot exist, like so:

function foo<T>(x: { prop: T, func?: never }): void;
function foo<T>(x: { prop: T, func: (x: T) => void }): void;
foo({ prop: "hey", func: x => x.length }); // okay

With this alteration, in the initial overload, func becomes an optional property with a value of type never. Except for undefined, there is no other way to satisfy the condition, making a function like x => x.length invalid. Hence, the call bypasses the first overload to choose the second and infers string for x.

Lastly, if two similar overloads differ only in a potentially present property, merging them into a single signature without overloads might be beneficial. Although this may not align with your specific requirements, it is something worth considering:

function foo<T>(x: { prop: T, func?: (x: T) => void }): void;
foo({ prop: "hey", func: x => x.length }); // okay

Now, there exists a lone call signature allowing func to be either present or absent.

You can explore these options to find a suitable solution. Wishing you the best of luck!

Understanding how to infer the type of a function when it is passed as an argument

Answer №1

Similar questions

What is the best approach for managing and obtaining accurate JSON responses when working with PHP API and AngularJS 2 services?

How to properly display an Angular Template expression in an Angular HTML Component Template without any issues?

How can Angular2 detect when an entity is clicked within a window?

Creating a React website and running it locally on VSCode

Encounter the "Error: Source 'cloudsTileLayer-RasterSource' not found" message while trying to integrate a weather tile layer into Azure Maps

Expanding the boundary with Material-UI: Tips for stretching the margin

Render function in Next.js did not yield anything

What are the best practices for implementing optional chaining in object data while using JavaScript?

Navigating through a collection of images with Next Js using button clicks

Retrieve the route parameters and exhibit the default option in a dropdown menu using Angular 2/4/5, along with translations implemented through ngx-translate

Postgres Array intersection: finding elements common to two arrays

Struggling with React integration of AdminLTE3 sidebar treeview?

How can I implement a feature to automatically close a drawer in a React application using the Material UI

Navigating in React: A Guide to Switching Components

Leverage Sinon's fakeServer in combination with promises and mocha for efficient

Importing CSS properties from MUI v5 - A comprehensive guide

Creating a Drop-Down Button Using HTML, CSS, and JavaScript

I am facing an issue with my Angular 11 CLI application while trying to set it up with Jest. The specific error message I am encountering is: "TypeError: Cannot read property

What could be the reason for receiving an undefined user ID when trying to pass it through my URL?

What is the best way to access a value within a JSON object in a React render method?