Как устранить ошибку в Typescript о `withStateHandlers` - PullRequest
Новая
       50

Как устранить ошибку в Typescript о `withStateHandlers`

0 голосов
/ 16 февраля 2019

Я попытался создать пример приложения React, используя HOC.но так как я получил ошибку в Typescript, я не мог продолжать делать.

Я получил это сообщение об ошибке ниже 

(34,38): Type '{ timeLeft: number; timerId?: Timer | undefined; }' is not assignable to type 'StateHandler<LStateProps>'.
  Type '{ timeLeft: number; timerId?: Timer | undefined; }' provides no match for the signature '(...payload: any[]): Partial<LStateProps> | undefined'.

Не могли бы вы сказать мне, как решить эту проблему? 

import * as React from 'react';
import {
  compose,
  StateHandler,
  StateHandlerMap,
  withStateHandlers,
} from 'recompose';

import Timer, { TimerProps } from 'components/Timer';

interface LStateProps {
  timeLeft: number;
  timerId?: NodeJS.Timer;
}

type LStateHandlerProps = {
  reset: () => StateHandler<LStateProps>;
  tick: () => StateHandler<LStateProps>;
  setTimerId: (timerId: NodeJS.Timer) => StateHandler<LStateProps>;
} & StateHandlerMap<LStateProps>;

type EnhancedTimerProps = TimerProps & LStateProps & LStateHandlerProps;

const enhance = compose<EnhancedTimerProps, TimerProps>(
  withStateHandlers<LStateProps, LStateHandlerProps, TimerProps>(
    props => ({
      timeLeft: props.limit,
    }),
    {
      reset: (state, props) => () => ({
        ...state,
        timeLeft: props.limit,
      }),
      tick: (state, props) => () => ({
        ...state,
        timeLeft: state.timeLeft - 1,
      }),
      setTimerId: (state, props) => (timerId: NodeJS.Timer) => ({
        ...state,
        timerId,
      }),
    },
  ),
);

export default enhance(Timer as React.SFC<EnhancedTimerProps>);

1 Ответ

0 голосов
/ 22 апреля 2019

Обходной путь - просто изменить ваш тип LStateHandlerProps следующим образом 

type LStateHandlerProps = {
  reset: StateHandler<LStateProps>;
  tick: StateHandler<LStateParops>;
  setTimerId: StateHandler<LStateProps>;
} & StateHandlerMap<LStateProps>;

Объяснение: если вы наведете указатель мыши на какой-либо обработчик состояния, вы увидите тип функции, подобный этой 

reset(state: LStateProps, props: TimerProps): () => StateHandler<LStateProps>

и проблема с этим типом заключается в том, что определение StateHandler<LStateProps> является функцией 

type StateHandler<TState> = (...payload: any[]) => Partial<TState> | undefined;

Таким образом, это означает, что тип функции reset не является двойной стрелкой,но вместо этого - тройная стрелка, которая не соответствует вашей функции ex 

 reset: (state, props) => () => ({
     ...state,
     timeLeft: props.limit,
 })
...