Typings for dispatch props

[sample-usr]

Hi,
I'm trying to provide typings for my actions inside a connected component.

interface IDispatchProps {
  setName: typeof setName // where setName is an imported action
}

Given that the action is defined as:

export const setName = actionCreator<string>('SET_NAME');

The idea is to use those typings when defining mapDispatchToProps:

const mapDispatchToProps = (dispatch): IDispatchProps => ({
  setName: (name:string) =>dispatch(setName(name))
})

However I get an error about the typings being incompatible. Is there a way to get the type of that action?

[aikoven]

What exact error do you get?

It's currently not possible to get the type of action from action creator but I think it's possible to add such feature.

[jlmart88]

I also ran into this problem of wanting to use the type of the action from the action creator. I came up with a solution that "wraps" the action creator factory with another interface that exposes the actions as properties alongside the action creators. This allows for code that looks like:

const authActionCreatorFactory = actionAndActionCreatorFactory('auth/');

const actionsAndActionCreators = {
  refreshToken: authActionCreatorFactory<{token: string}>('REFRESH_TOKEN'),
};

let refreshTokenAction: typeof actionsAndActionCreators.refreshToken.actionType;
refreshTokenAction = actionsAndActionCreators.refreshToken.actionCreator({token: 'new_token'});

Similarly, it exposes the types of each of the three async actions from an async action creator as separate properties (.actionTypes.done, etc). The api could probably be improved a bit (e.g. by exposing the actionType as a property of the action creator, rather than having the action creator and actionType be two separate properties), but I can make a PR with this code if this idea matches what you were thinking @aikoven.

[aikoven]

See microsoft/TypeScript#21847, very soon we'll have a built-in ability to extract a return type of a function.

[aikoven]

So since TypeScript 2.8 you can use the built-in ReturnType type!

Please feel free to reopen if that doesn't solve your problem.