useReducer ActionsType не может сделать тип данных безопасным - PullRequest
Новая
       6

useReducer ActionsType не может сделать тип данных безопасным

0 голосов
/ 22 марта 2019

Я использую реагирующий хук useReducer с машинописным шрифтом, и я не могу сделать его безопасным, потому что всякий раз, когда я пытаюсь назначить тип действия с полезной нагрузкой, он возвращает ошибку. 

interface State {
  checkedEvents: string[];
  seriesIndex: number;
  listHeight: number;
  chart: Chart | undefined;
}

interface ComponentActions {
  type: 'setInitialOptions' | 'setCheckedEvents';
  payload: State | { checkedEvents: string[] };
}

function reducer(state: State, action: ComponentActions): State {
  const { type, payload } = action;
  switch (type) {
    case 'setInitialOptions':
      return {
        chart: payload.chart,
        checkedEvents: payload.checkedEvents,
        seriesIndex: payload.seriesIndex,
        listHeight: payload.listHeight
      };
    case 'setCheckedEvents':
      return { ...state, checkedEvents: payload.checkedEvents };
    default:
      throw new Error();
}

Вот как выглядит ошибка типакак: enter image description here

Есть идеи, почему это происходит и как сделать тип полезной нагрузки безопасным?

1 Ответ

1 голос
/ 22 марта 2019

объявить интерфейсы для всех действий и использовать его в редукторе 

class Chart {
    some: string = "";
}

interface State {
    checkedEvents: string[];
    seriesIndex: number;
    listHeight: number;
    chart: Chart | undefined;
}

const SET_INITIAL_OPTIONS = "setInitialOptions";
type SET_INITIAL_OPTIONS = typeof SET_INITIAL_OPTIONS;
const SET_CHECKED_EVENTS = "setCheckedEvents";
type SET_CHECKED_EVENTS = typeof SET_CHECKED_EVENTS;

interface ISetInitialOptionsAction {
    type: SET_INITIAL_OPTIONS;
    payload: State;
}

interface ISetCheckedEventsAction {
    type: SET_CHECKED_EVENTS;
    payload: { checkedEvents: string[] };
}

type ComponentActions = ISetInitialOptionsAction | ISetCheckedEventsAction;

export default function reducer(state: State, action: ComponentActions): State {
    switch (action.type) {
        case SET_INITIAL_OPTIONS:
            return {
                chart: action.payload.chart,
                checkedEvents: action.payload.checkedEvents,
                seriesIndex: action.payload.seriesIndex,
                listHeight: action.payload.listHeight
            };
        case SET_CHECKED_EVENTS:
            return {
                 ...state, 
                 checkedEvents: action.payload.checkedEvents
            };
        default:
            throw new Error();
    }
}

package.json: 

"typescript": "^3.3.1"

Сборка прошла успешно. ¯\_(ツ)_/¯

...