javascript - 属性'isFetching'在'never'类型上不存在，但在对象被散布时有效

我如何获得以下代码段的此Typescript错误Property 'isFetching' does not exist on type 'never'.ts(2339)

const mapStateToProps = (
  state: AppState,
  ownProps: AuthenticationPageProps
): IMapStateToProps => ({
  isFetching: state.authentication.isFetching,
  user: state.authentication.user
});

但是，如果我传播对象，它会按预期工作吗？

const mapStateToProps = (
  state: AppState,
  ownProps: AuthenticationPageProps
): IMapStateToProps => {
  const { isFetching, user } = state.authentication;
  return { isFetching, user };
};

此代码段也可以正常运行：

const mapStateToProps = (
  state: AppState,
  ownProps: AuthenticationPageProps
): IMapStateToProps => ({
  isFetching: state.authentication["isFetching"],
  user: state.authentication["user"],
});

以下是我在打印props时在开发人员工具中看到的内容



这是IMapStateToProps的界面

interface IMapStateToProps {
  isFetching: boolean;
  user: User;
}

更多界面

export interface AuthenticationState {
  isFetching: boolean;
  user: User;
  errors: Error[];
}

export interface User {
  email?: string;
}

export interface Error {
  message: string;
  status: string;
}

export const rootReducer = combineReducers({
  authentication: authenticationReducer, // authenticationReducer returns type: AuthenticationState
});

export type AppState = ReturnType<typeof rootReducer>;

减速器：

import {
  LOGOUT_SUCCESS,
  LOGOUT_REQUEST,
  LOGOUT_FAILURE,
  LOGIN_FAILURE,
  LOGIN_SUCCESS,
  LOGIN_REQUEST,
  REGISTER_FAILURE,
  REGISTER_SUCCESS,
  REGISTER_REQUEST,
  AuthenticationState,
  AuthenticationActionTypes,
  CHECK_LOGGED_IN_REQUEST,
  CHECK_LOGGED_IN_SUCCESS,
  CHECK_LOGGED_IN_FAILURE,
} from "../../types/Authentication";

export const AuthenticationReducerDefaultState = {
  errors: [],
  isFetching: false,
  user: {},
};

export const authenticationReducer = (
  state = AuthenticationReducerDefaultState,
  action: AuthenticationActionTypes
): AuthenticationState => {
  switch (action.type) {
    case LOGIN_REQUEST:
    case LOGOUT_REQUEST:
    case REGISTER_REQUEST:
    case CHECK_LOGGED_IN_REQUEST:
      return {
        ...state,
        isFetching: true,
      };
    case LOGIN_SUCCESS:
      return {
        ...state,
        isFetching: false,
        user: action.user,
      };
    case LOGOUT_SUCCESS:
      return { ...state, isFetching: false };
    case CHECK_LOGGED_IN_SUCCESS:
      return { ...state, isFetching: false };
    case REGISTER_SUCCESS:
      return { ...state, isFetching: false };
    case LOGIN_FAILURE:
      return { ...state, isFetching: false };
    case LOGOUT_FAILURE:
      return { ...state, isFetching: false };
    case REGISTER_FAILURE:
      return { ...state, isFetching: false };
    case CHECK_LOGGED_IN_FAILURE:
      return { ...state, isFetching: false };
    default:
      return state;
  }
};

最佳答案

您的初始状态与返回状态的类型不同。

export interface AuthenticationState {
  isFetching: boolean;
  user: User;
  errors: Error[];
}

export const AuthenticationReducerDefaultState = {
  errors: [], //Type never
  isFetching: false,
  user: {}, //Type {} not type User
};

您可以使用以下方法解决此问题：

export interface AuthenticationState {
  isFetching: boolean;
  user: User | {}; //Note the union type
  errors: Error[];
}

export const AuthenticationReducerDefaultState = <AuthenticationState>{
  errors: [],
  isFetching: false,
  user: {},
};


//Also should freeze the state as you would not want accidental mutations.
export const AuthenticationReducerDefaultState = Object.freeze<AuthenticationState>({
  errors: [],
  isFetching: false,
  user: {},
});

关于javascript - 属性'isFetching'在'never'类型上不存在，但在对象被散布时有效，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/61629317/