Add TypeScript definitions

[aikoven]

Cc @Igorbek, @use-strict, @Pajn

[Igorbek]

Looks good to me. Does it compile well?

[aikoven]

@Igorbek It does and it infers types correctly, e.g. if I change const foo type to number here, I'll get an error:

declare const store: Store<{foo: string}>;

store.dispatch((dispatch, getState) => {
  const state = getState();

  const foo: string = state.foo;
});

[JabX]

Could you also export the ThunkAction type (this one : <R>(dispatch: Dispatch<any>, getState?: () => any, extraArgument?: any) => R)? This way, we could annotate our action creators with it.

And wouldn't it be better if you also added a second type parameter for the extraArgument ?
Something like <R, E>(dispatch: Dispatch<any>, getState?: () => any, extraArgument?: E) => R. The types will be inferred anyway.

This way, we could write something like

function actionCreator(): ThunkAction<Api> {
    return async (dispatch, getState, api) => {
        // Our code here with complete inference
    }
}

I know I removed the state from the typings, but it could be added back with overloads.

[aikoven]

@JabX I'll do it, but I need some clarification.

To be able to annotate actionCreator with ThunkAction<Api> it should be defined as:

type ThunkAction<E> = <S, R>(dispatch: Dispatch<S>,
                             getState?: () => S,
                             extraArgument?: E) => R;

But now there's no way compiler could infer State type inside of actionCreator.

The most generic version would be:

type ThunkAction<S, E, R> = (dispatch: Dispatch<S>,
                             getState?: () => S,
                             extraArgument?: E) => R;

declare module "redux" {
  export interface Dispatch<S> {
    <E, R>(asyncAction: ThunkAction<S, E, R>): R;
  }
}

Now you can add your specific action type by narrowing ThunkAction:

type MyThunkAction<R> = ThunkAction<MyState, Api, R>;

What do you say?

[JabX]

That's what I'd like to have, yeah.

But maybe we could have some overloads if other people want to specify some types but not all because they don't use them.

Maybe something like

type ThunkAction<R> = (dispatch: Dispatch<any>) => R
type ThunkAction<R, S> = (dispatch: Dispatch<S>, getState?: () => S) => R
type ThunkAction<R, S, E> = (dispatch: Dispatch<S>, getState?: () => S, extraArgument?: E) => R

(I'm not sure about removing the arguments when removing types).

By the way, why do we need a R type? I thought the general use of async actions wasn't to return anything?

[aikoven]

It's not possible to overload generic types, only call signatures.

R type is needed because dispatch call returns the result of thunk function.

[JabX]

Oh, I thought we could, my mistake, I should have checked before.
Okay for your suggestion as is then.

[Igorbek]

The following signature/type makes much more sense to me:

type ThunkAction<R, S, E> = (dispatch: Dispatch<S>, getState: () => S, extraArgument: E) => R;

Please note that both getState and extraArgument parameters are not optional. However, an actual thunk action can ignore it:

const tunkAction: ThunkAction<void /* have no return data */,
  {} /* don't care about state type*/,
  {} /* don't care about extra argument*/> = dispatch => {
  dispatch(a1());
  dispatch(a2());
};

[Strate]

This style of augmentation works like global monkey patching. Even if I just require redux-thunk, but not use it in my store, Dispatch interface became augmented.
It would be much better, if augmentation of store.dispatch happens inside createStore method, based on applied store enhancers.

[JabX]

Yes, that's correct, but there's absolutely no way of doing otherwise. It would require some kind of special support from Typescript for this scenario, which is terribly specific (well, there are other librairies which work like that (hello express), but still).

[joewood]

Any chance of a merge?

[aikoven]

@ulfryk Could you please review the latest version and merge if everything's ok?

[ulfryk]

@aikoven - IMO it looks great! :)

[unional]

Do you see the need of type S in Dispatch<S>? I suggest redux should remove the extra type.

[Igorbek]

@unional S is used here.

[unional]

Yes, but does it really help?

It can simply be:

type ThunkAction<R, S, E>  = (dispatch: Dispatch, getState: () => S, extraArgument: E) => R;
declare module 'redux' {
  export interface Dispatch {
    <R, S, E>(asyncAction: ThunkAction<R, S, E>): R;
  }
}

The point is the Dispatch does not gain anything by having the type S.

[Igorbek]

Of course, it does. Your Dispatch is tied with your store which is typed by state type. With your signature one could redefine the state type, which would not be allowed in reality. I have the same concern with E extra argument type, but cannot be well defined with current design. I've been experimenting with some new approach that could address this issue as well.

[unional]

I see. That make sense.

I'm experimenting alternative approach that Store is not typed with <S>. Only reduce and getState is typed with <S> because the producer (which reduce) and consumer (which getState) have separate concerns.

[jimsugg]

I am trying to use this, and I noticed that the npm version of this package still (as of today) does not include the index.d.ts file. Version numbers are the same (2.1.0) and index.d.ts was checked in three months ago, but it doesn't get downloaded on npm install. I tried getting the index.d.ts file from DefinitelyTyped, but that is different in that it wraps the ThunkAction and Dispatch<S> declarations into the 'Redux' namespace, without an export declaration to allow them to be visible outside the namespace. All of this is pretty confusing to those trying to use this for the first time. (I'm still trying to work it out.) Best would be to have the npm installer actually distribute the correct type declaration file. I am building a project that has to be usable by other dev teams, so I need something predictable in terms of package management.

[Igorbek]

@jimsugg 2.1.0 was released on 10th May 2016, the PR got merged on 23 June.

[jimsugg]

Yes, I noticed that. I am not familiar enough with npm publishing to know for sure why the npm build didn't get updated. I suspect you have to bump the version number, but there may be more to it than that. I solved my problem by pointing typings directly at the committed file in the github repo here. It would definitely be much better to get the npm build updated.

[jimsugg]

It wouldn't be so bad if the one in DefinitelyTyped wasn't a problematic file. That one wraps the new interface and type in a namespace and then doesn't export them from that. It would be good to get that file updated with a good one as well.

[unional]

@jimsugg , what @Igorbek saying is the PR is merged after the release. we need @gaearon or anyone have access to make a new release on npm.

[jimsugg]

Understood - that's what I suspected. Just wanted to point out the issues while they were fresh in my mind. Thanks!

[born2net]

tried all the combinations and still getting:

Error:(13, 29) TS2345:Argument of type '(dispatch: any) => void' is not assignable to parameter of type 'Action'.
  Property 'type' is missing in type '(dispatch: any) => void'.

regards

Sean

[aikoven]

Released v2.1.1 with TypeScript definitions included.

[dzenzes]

Thank you for your work and thank you for adding better TypeScript Support to redux-thunk. Sadly, for me the switch from 2.1.0 to 2.1.1 broke the build.

Error message:

Generic type 'ThunkAction' requires 3 type argument(s).

This was my fault because I defined the redux-thunk version as ^2.1.0 in the package.json. Anyway, was this behavior intended? I rolled back to 2.1.0 and will update my code.

[aikoven]

@dmies This is strange, where did your old typings come from? AFAIK, bundled typings have lower priority than local or installed from @types.

[dzenzes]

@aikoven I had no other redux-thunk typings installed (tsconfig with allowJS=true). So I think the problem is, that there are suddenly new typings, the compiler can use.

[aikoven]

Ok, sorry, that's not good at all. I'll make another patch release with typings removed, and add them with minor release.

[aikoven]

Done: v2.2.0

[ashishsc]

Any idea how to describe ThunkActions that can dispatch more than one type of action?