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

【问题标题】：React Redux typescript throwing error: Type is not assignable to typeReact Redux 打字稿抛出错误：类型不可分配给类型
【发布时间】：2021-02-23 12:40:50
【问题描述】：

我正在将我的 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;
 }
}

将不胜感激任何建议

谢谢！

【问题讨论】：

标签： reactjs typescript react-typescript

【解决方案1】：

您遇到错误的原因是因为这种奇怪且不必要的 Map 使用。错误中的boolean | ICost 类型意味着它不知道cost.get("loading") 是否从loading 获得ICost 的ICost 来自data。

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

这是一个更标准的 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;
  }
}

【讨论】：