Тип 'undefined' должен иметь метод [Symbol.iterator] () ', который возвращает итератор

Question

Я пытаюсь преобразовать мой редуктор из JS в машинописный текст, но получаю странную ошибку, которую мне не удалось устранить. Ошибка возникает из-за использования многоточия для деконструкции массива в редукторе [... state.messages] . В основном код выглядит следующим образом: Reducer:

import { HomeScreenAction } from '../actions';
import { HomeState, User, Message } from '../types';
import * as constants from '../constants';
import { combineReducers } from 'redux';

export function userState(state: HomeState = {}, action: 
HomeScreenAction): HomeState {
switch (action.type) {
case constants.REQUEST_USER:
case constants.RECEIVE_USER:
  return { user: action.user };
default:
  return state;
}
}


export function messagesState(state: HomeState = {}, action: 
HomeScreenAction):HomeState {
switch (action.type) {
case constants.REQUEST_MESSAGES:
case constants.RECEIVE_MESSAGES:
  return { messages: action.messages };
case constants.Test1:
  return{ ...state, user: action.payload};
case constants.Test2:
  return {...state, messages:[ ...state.messages, action.payload ]};
default:
  return state;
}
}

const rootReducer = combineReducers({
userState,
messagesState
});

export default rootReducer;

Типы:

export interface HomeState {
user?: User;
messages?: Message[];
}
export interface Test1 {
type: typeof constants.Test1
payload: User
}

export interface Test2 {
type: typeof constants.Test2
payload: Message
}

и tsconfig.js:

  "compilerOptions": {
/* Basic Options */
"target": "es6",                          
"watch": false,
"module": "commonjs",
 "lib":  [ "dom", "es6", "es2015" , "dom.iterable"],
// "allowJs": true,
// "checkJs": true,
"jsx": "react",
// "declaration": true,
"sourceMap": true,
// "outFile": "./",
"outDir": "./lib",

"strict": true

},
"include": ["./src/"]
}

Я пробовал разные библиотеки, такие каккак es2015 и es5, но все равно я получаю ошибку для

[...state.messages]

, любая помощь будет очень признательна.

Answer 1

Поскольку messages является необязательным свойством в HomeState, сообщения могут иметь значение undefined, в этом случае может произойти ошибка времени выполнения при деструктуризации массива.

Чтобы защитить от ошибки времени выполнения, TS выдаетошибка времени компиляции.

Самый простой способ решить эту проблему - проверить, является ли state.messages пустым, и инициализировать пустым массивом. Пример:

 case constants.Test2:
   let messages: Message[] = state.mesaage || [];
   return {...state, messages:[ ...messages, action.payload ]};