typescript - Få dispatch-typer korrekt för redux-thunk

Jag skulle verkligen vilja kunna använda full typning med TypeScript och slippa att behöva återimplementera typer med potentiellt motstridiga signaturer.

I det här fallet skulle jag vilja använda anrops-/retursignaturen från loadUserList och ändå få det att fungera för dispatch och connect.

loadUserList är en redux-thunk-funktion, så den kommer så småningom att returnera en sträng när den passerar genom middleware. Men prototypen som jag behöver skicka till DispatchProps är annorlunda än den jag skickade till CDispatchProps (de props som ska skickas till connect-funktionen).

Även om jag bara kunde ändra CDispatchProps till any skulle det egentligen inte lösa mitt primära mål, vilket är att importera typsignaturen från userList.tsx så att både argumenten och returvärdena har typsäkerhet (jag är villig att ge upp det för connect -- eftersom det är i kategorin ”svarta lådan”).

Kanske är den bästa metoden någon typ av TypeScript-magik som kommer att extrahera argumenttypen och returtypen från ThunkAction<...> på ett rimligt sätt.

UserListPage.tsx

import { loadUserList, UserQuery } from "../store/actions/userList";

type DispatchProps = {
  loadUserList: (query: UserQuery) => string,
};

type CDispatchProps = {
  loadUserList: typeof loadUserList,
};

class UserListPage extends React.Component<Props & DispatchProps, State> {
  componentWillMount() {
    this.setState({ id: this.props.loadUserList(this.state.query) });
  }
}

export default connect<any, CDispatchProps, Props>((store: Store) => ({
  users: store.userList.entities,
  loading: store.userList.fetchStatus,
}), { loadUserList })(UserListPage);

userList.ts

export function loadPrivateUserList(options: UserQuery, force?: boolean): ThunkAction<string, State, null> {
  return (dispatch: redux.Dispatch<State>, getState: () => State): string => {
    const { userList } = getState();
    const id = computeID(options);

    // Do some async actions

    return id;
  }
}