Typing issue with useAsync and TypeScript

[samit4me]

Experiencing TypeScript errors when using useAsync version 10.0.0.

I feel like I'm probably doing something stupid, but I can replicate and seems like an issue.

Repo demonstrating the issue: https://github.com/samit4me/react-async-ts-issue

---

Given the data fetching method:

async function dataFetching(
  { id }: Props,
  { signal }: AbortController
): Promise<UserResponse> {
  const res = await fetch(`https://reqres.in/api/users/${id}`, { signal });
  if (!res.ok) throw new Error(res.statusText);
  const { data } = await res.json();
  return data;
}

---

When using useAsync via the shorthand method:

const { data, error, isPending } = useAsync(dataFetching, { id });

I get the following error:

Argument of type '({ id }: Props, { signal }: AbortController) => Promise<UserResponse>' is not assignable to parameter of type 'PromiseFn<UserResponse>'.
  Types of parameters '__0' and 'props' are incompatible.
    Property 'id' is missing in type 'AsyncProps<UserResponse>' but required in type 'Props'.ts(2345)

---

When using useAsync via the configuration object:

const { data, error, isPending } = useAsync({ promiseFn: dataFetching, id });

I get the following error:

No overload matches this call.
  Overload 1 of 2, '(options: AsyncOptions<UserResponse>): BaseAsyncState<UserResponse, AbstractState<UserResponse>>', gave the following error.
    Type '({ id }: Props, { signal }: AbortController) => Promise<UserResponse>' is not assignable to type 'PromiseFn<UserResponse>'.
      Types of parameters '__0' and 'props' are incompatible.
        Property 'id' is missing in type 'AsyncProps<UserResponse>' but required in type 'Props'.
  Overload 2 of 2, '(promiseFn: PromiseFn<any>, options?: AsyncOptions<any> | undefined): BaseAsyncState<any, AbstractState<any>>', gave the following error.
    Argument of type '{ promiseFn: ({ id }: Props, { signal }: AbortController) => Promise<UserResponse>; id: number; }' is not assignable to parameter of type 'PromiseFn<any>'.
      Object literal may only specify known properties, and 'promiseFn' does not exist in type 'PromiseFn<any>'.ts(2769)
User.tsx(5, 3): 'id' is declared here.
index.d.ts(82, 5): The expected type comes from property 'promiseFn' which is declared here on type 'AsyncOptions<UserResponse>'

[stphnlngdncoding]

Running in to this as well. Is there something we're missing here?

[stphnlngdncoding]

I got around this by using the PromiseFn to type my async function from the lib as seen here: https://github.com/async-library/react-async/blob/next/examples/with-typescript/src/App.tsx#L14

[TroySchmidt]

The MUI project has a passthru typing that might work here. Their makeStyles createStyles functions take your named properties and pass them thru successfully so that you get the named properties thru. Right now we cannot pass additional properties and have them pass thru to the async functions because it is just string key any typing. It is somehow done using typing with Record but it is beyond my package typing skills at this moment.

[ghengeveld]

I'm not exactly a TypeScript expert. I'd be happy to take a PR to resolve these issues. There's this one still waiting for someone with actual TS knowledge to review it: #247

Oh, the tragedy of converting to TS. Now I'm constantly resolving TS issues without knowing what I'm doing, instead of building new features and improving the lib itself.

[moroine]

I think api wise it would be better to have in callback separate param between options and context related to the lib

[johnnyreilly]

For those battling with TypeScript support, there is https://www.npmjs.com/package/react-async-hook