打字稿：'{translationSentences：从不[]; }' 不可分配给类型为 'never' 的参数

Question

I know similar questions have been asked on stackoverflow, and I have been reading through them and trying to implement their solutions. But, after over an hour of trying to change a million different things I am no closer to understanding this problem or how to solve it.

I am trying to add types to my reducer and I'm getting nowhere with this error:

InitialState

export const initialState = {
  activeStep: 0,
  notification: {
    format: undefined,
    message: "",
  },
  lesson: {
    title: "",
    language: { language: "", code: "" },
    topics: [],
    format: "",
    url: "",
    file: EMPTY_FILE,
    totalPoints: 0,
    totalWords: 0,
  },
  newWords: [],
  initialTranscript: [],
  modifiedTranscript: [],
  transcriptSentences: [],
  translatedSentences: [],
};

Reducer

export const reducer = (state: InitialState = initialState, action: Action) => {
  switch (action.type) {
    ...

    case ActionTypes.SET_SENTENCE_TRANSLATIONS:
      return {
        ...state,
        translatedSentences: action.payload,
      };
    case ActionTypes.SET_SENTENCE_TRANSLATION:
      const { sentence, id } = action.payload;
      const translatedSentencesClone = state.translatedSentences.slice();
      translatedSentencesClone[id] = sentence;
      return {
        ...state,
        translatedSentences: translatedSentencesClone,
      };

    ...

  }
}

Types

export type TranslatedSentence = {
  id: number;
  source: string;
  translation: string;
  approved?: boolean;
};


// for the initial batch of all translations
interface SET_SENTENCE_TRANSLATIONS {
  type: ActionTypes.SET_SENTENCE_TRANSLATIONS;
  payload: TranslatedSentence[];
}

// for updating one translations
interface SET_SENTENCE_TRANSLATION {
  type: ActionTypes.SET_SENTENCE_TRANSLATION;
  payload: { sentence: TranslatedSentence; id: number };
}

Hopefully thats enough material, if not let me know. I'm stumped and feel pretty lost at this point.

Answer 1

I was going to leave another comment, but the TS Playground link is too long to include.

What you want is for your reducer to take a State and an Action and return a State of the same type as the input.

Your initialState variable should fulfill your State interface, but so should any other valid state. You will get errors if you use typeof initialState to create the State interface because this says that the property translatedSentances can only be an empty array aka never[] . I haven't seen the definition of your type InitialState , but it seems odd that you're using the name InitialState for your reducer's state rather than just State , so that leads me to be concerned that the contents of the InitialState type might not be what you want.

In the snippet you've provided, you're only editing the translatedSentences property, so your State type can be as simple as:

interface State {
    translatedSentences: TranslatedSentence[];
}

and your Action type is the union:

type Action = SET_SENTENCE_TRANSLATION | SET_SENTENCE_TRANSLATIONS;

Your reducer should have the signature:

const reducer = (state: State, action: Action): State

and you should not have any problems using useReducer with that -- I hope!