Какой тип действия асинхронной функции в Typescript - PullRequest
Новая
       9

Какой тип действия асинхронной функции в Typescript

0 голосов
/ 13 декабря 2018

У меня есть вопрос о типе для React с Redux в сочетании с redux-thunk.

У меня есть асинхронные действия, в которых я отправляю действия в зависимости от моего ответа API, например: 

export const myAsyncAction = (id: string) => {
  return async (dispatch: Dispatch<{}>) => {
    // Dispatch REQUEST Action
    dispatch(loadRequest())

    const response = await get(`api/something/${id}`)
    if (!response.ok) {
      // Dispatch the FAILURE action
      dispatch(loadFailure('error'))
    } else {
      const json = await response.json()
      // Dispatch the SUCCESS action
      dispatch(loadSuccess(normalize(json, mySchema)))
    }
  }
}

(Пожалуйста, дайте мне знать, если это действие также не подходит вам)

И затем в моем компоненте я объявляю этот интерфейс для mapDispatchToprops: 

interface IComponentMapDispatchToProps {
  myAsyncAction: (id: string) => Promise<any>
}

interface IComponentProps
  extends IComponentMapDispatchToProps {
}

export class Component extends React.Component<IComponentProps, {}> {

  render() {
    return <div>Whatever</div>
  }
}

const mapDispatchToprops: IComponentMapDispatchToProps = {
  myAsyncAction
}

export default connect(
  {},
  mapDispatchToProps
)(Component)

Теперь машинопись жалуется на то, что mapDispatchToProps говорит следующее: 

Type '() => (dispatch: Dispatch<{}>) => Promise<void>' is not assignable to type '() => Promise<any>'.
  Type '(dispatch: Dispatch<{}>) => Promise<void>' is not assignable to type 'Promise<any>'.
    Property 'then' is missing in type '(dispatch: Dispatch<{}>) => Promise<void>'.

Теперь я подумал, что тип функции async - это тип Promise<{}>, и здесь он жалуется на то, что это не так...

И если я внедряю это асинхронное действие в другой компонент, который имеет withRouter в сочетании с connect, тогда я могу напечатать его следующим образом, и машинопись станет счастливой: 

interface IComponentMapDispatchToProps {
  myAsyncAction: () => Promise<void>
}

export default withRouter(
  connect(
    {},
    mapDispatchToprops
  )(Component)
)

Как одна и та же функция может иметь разный тип в зависимости от того, где она вызывается!?

Каков правильный тип для этой асинхронной функции?потому что это больше не имеет смысла для меня.

...