React Redux 打字稿抛出错误:类型不可分配给类型

时间:2021-02-23 12:40:50

标签: reactjs typescript react-typescript

我正在将我的 React 应用程序更改为 TS 并且出现此错误,我不知道为什么。将不胜感激任何帮助。

这是我的“mapStateToProps”代码:

function mapStateToProps(state: AppState): MapStateToProps{
   const cost = state.costReducer;
      return { 
         sLoading: cost.get("loading") 
<块引用>

错误发生在这里:

输入'布尔值| ICost' 不可分配给类型 'boolean'。

        }
      }

这些是相关的类型:

export type MapStateToProps = {
  sLoading: boolean
}

这是减速器:

type InitialState = {
    loading: boolean,
    data: ICost
 }
let defaultState: InitialState = {
      loading: false,
      data: {
        optionOne: null,
        optionTwo: null
   }
};
export default function (state = Map(defaultState), action: AppActions){
    switch (action.type) {
      case costActionsTypes.COST_FETCH_DATA_STARTED:
        return state.set("loading", true);
      case costActionsTypes.COST_FETCH_DATA_SUCCEEDED:
        return state.set("loading", false);
     );
     case costActionsTypes.COST_FETCH_DATA_FAILED:
        return state.set("loading", false);
  default:
    return state;
 }
}

将不胜感激任何建议

谢谢!

1 个答案:

答案 0 :(得分:0)

出现错误的原因是对 Map 的这种奇怪且不必要的使用。错误中的类型 boolean | ICost 意味着它不知道 cost.get("loading") 是否从 booleanloadingICost 获取 data .

如果这里的 Map 指的是内置的 Map 对象,那么您的减速器甚至不会编译,因为 Map(defaultState) 是无稽之谈。如果 Map 是某种自定义实用程序,那么您需要将 get 定义为返回调用它的特定键的值的泛型,而不是所有可能值的联合。< /p>

这是一个更标准的 redux 设置。

function mapStateToProps(state: AppState) {
  return { 
    isLoading: state.costReducer.loading 
  }
}
export default function ( state: InitialState = defaultState, action: AppActions ) {
  switch (action.type) {
    case costActionsTypes.COST_FETCH_DATA_STARTED:
      return {
        ...state,
        loading: true
      };
    case costActionsTypes.COST_FETCH_DATA_SUCCEEDED:
      return {
        ...state,
        loading: false
      };
    case costActionsTypes.COST_FETCH_DATA_FAILED:
      return {
        ...state,
        loading: false
      };
    default:
      return state;
  }
}