Add type definitions for TypeScript (fixes #10)

[ghengeveld]

No description provided.

[codecov]

Codecov Report

Merging #12 into master will not change coverage.
The diff coverage is n/a.

@@          Coverage Diff          @@
##           master    #12   +/-   ##
=====================================
  Coverage     100%   100%           
=====================================
  Files           1      1           
  Lines          95     95           
  Branches       37     37           
=====================================
  Hits           95     95

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 55d7b59...4e8ffa2. Read the comment docs.

[tomshane]

Looks good, just few things.

1. Regarding recent React changes and addition of hooks, it is recommended to use React.FunctionComponent<> instead of React.SFC<>. SFC type is going to be deprecated.

2. To pass arguments to <Async> component, I can't use the way it is done in plain JS:
   <Async promiseFn={this.getSession} sessionId={123}/>

   Is this intended way how to pass arguments when using TS?:
   <Async promiseFn={this.getSession} {...{sessionId: 123}}/>

3. It would be cool to have typed data object in callbacks via generics. I tried it when using my own typings and I was not able to make everything work as I would like. I will keep trying, but if anyone could come with a solution, it would be perfect.

[tomshane]

If you would like to have a look, here is my current typings file. On my current setup (TS 3.1.4), generics seem to work for base Async component. For helper components, I didn't find a way how to improve typing.

declare module "react-async"
{
  import * as React from "react";

  interface AsyncProps<T> {
    promiseFn?: (props: object) => Promise<T>;
    deferFn?: (...args, props: object) => Promise<T>;
    watch?: any;
    initialValue?: T;
    onResolve?: (data: T) => void;
    onError?: (error: Error) => void;
    children?: AsyncChildren<T>;
  }

  interface AsyncState<T> {
    initialValue: T,
    data: T,
    error: Error,
    isLoading: boolean,
    startedAt: Date,
    finishedAt: Date,
    cancel: () => void,
    run: (...args) => Promise<T>,
    reload: () => void,
    setData: (data: T, callback?: () => void) => T,
    setError: (error: Error, callback?: () => void) => Error
  }

  function createInstance<T>(defaultProps?: AsyncProps<T> = {}): Async<T>;

  type AsyncChildren<T> = ((state: AsyncState<T>) => React.ReactNode) | React.ReactNode;

  class Async<T> extends React.Component<AsyncProps<T>, AsyncState<T>> {
    static Pending: React.FunctionComponent<{ children?: AsyncChildren, persist?: boolean }>;
    static Loading: React.FunctionComponent<{ children?: AsyncChildren, initial?: boolean }>;
    static Resolved: React.FunctionComponent<{ children?: AsyncChildren, persist?: boolean }>;
    static Rejected: React.FunctionComponent<{ children?: AsyncChildren, persist?: boolean }>;
  }

  export default createInstance;
}

[ghengeveld]

Looks good 👍 I'll update my PR.
Shouldn't most of the state values be optional?

interface AsyncState<T> {
  initialValue?: T
  data?: T
  error?: Error
  isLoading: boolean
  startedAt?: Date
  finishedAt?: Date
  cancel: () => void
  run: (...args) => Promise<T>
  reload: () => void
  setData: (data: T, callback?: () => void) => T
  setError: (error: Error, callback?: () => void) => Error
}

[tomshane]

Yes, your AsyncState is the correct one.

[ghengeveld]

I've pushed the latest changes. VS Code was complaining about the deferFn?: (...args, props: object) because rest params aren't supported in that position by TypeScript, so I just removed the props param and have the ...args match it.

Also VS Code was complaining about the generic type T not being accessible to static members of Async. Maybe it works regardless?

Could you check if this works?

[tomshane]

I placed the index.d.ts file into node_modules/react-async folder and VS Code didn't complain at all. No errors in console while compiling either. So here, everything looks great.

[ghengeveld]

Alright, I'm merging it then. We can always make tweaks later.

[ghengeveld]

Published in v3.8.2

[ghengeveld]

Hey @tomshane, I've been looking at this again and I'm not happy with the way the static members are defined. Their type signature is obviously broken because a static member cannot access the parent class' generic type. I've been fiddling around with it all day but still have not found a solution. So I had to ask: https://stackoverflow.com/questions/53564005/correct-type-definition-for-a-react-class-with-static-member-components

Maybe you can take a look at it?

[tomshane]

Yea, I was trying before, but I gave up, because I couldn't make it work. That's why I left the helper components non-generic in my draft. I have found this: microsoft/TypeScript#24018, so it seems it is not supported in the current TS.

[ghengeveld]

Well they don't have to reference the class generic, they can have their own. I just haven't found a way to do that yet.

[tomshane]

I don't know if that's what you have in mind, but I've tried this:

declare class Async<T> extends React.Component<AsyncProps<T>, AsyncState<T>> {  
  static Pending: <T>(props: { children?: AsyncChildren<T>; persist?: boolean }) => JSX.Element;
  static Loading:  <T>(props: { children?: AsyncChildren<T>; initial?: boolean }) => JSX.Element;
  static Resolved: <T>(props: { children?: AsyncChildren<T>; persist?: boolean }) => JSX.Element;
  static Rejected: <T>(props: { children?: AsyncChildren<T>; persist?: boolean }) => JSX.Element;
}
export default Async;

This way I was able to use helper components without an issue. However, the generic type argument won't be inferred, so the usage must be either:

<Async.Resolved>
  {(data: MyData) => { ... }}
</Async.Resolved>

or:

<Async.Resolved<MyData>>
  {(data) => { ... }}
</Async.Resolved>

[ghengeveld]

@all-contributors please add @tomshane for review

[allcontributors]

@ghengeveld

I've put up a pull request to add @tomshane! 🎉

[ghengeveld]

@all-contributors please add @ghengeveld for code, review, question, blog, doc, design, example, financial, infra, maintenance

[allcontributors]

@ghengeveld

I've put up a pull request to add @ghengeveld! 🎉