Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

useReducer cannot use object.attr as switch case in typescript?

I’m trying to combine switch case String into an object, but somehow typescript is mis-interpreting the switch case in useReducer:

Before version, this works fine:

export const LOGIN_USER = "LOGIN_USER";
export const LOGOUT_USER = "LOGOUT_USER";

export type AuthActionType = LogInUser | LogOutUser;

type LogInUser = { type: typeof LOGIN_USER; payload: User }; // <- notice this
type LogOutUser = { type: typeof LOGOUT_USER };

export default function authReducer(
  state: AuthStateType,
  action: AuthActionType
) {
  switch (action.type) {
    case LOGIN_USER: {
      return {
        ...state,
        user: {
          username: action.payload.username, // <- correctly inferring action.payload.username 
          password: action.payload.password
        }
      };
    }

    case LOGOUT_USER: {
      return {
        ...state,
        user: null
      };
    }

    default: {
      return state;
    }
  }
}

However this breaks, after putting the switch case into an object:

export const AUTH = {
  LOGIN_USER: "LOGIN_USER",
  LOGOUT_USER: "LOGOUT_USER"
};

export type AuthActionType = LogInUser | LogOutUser;

type LogInUser = { type: typeof AUTH.LOGIN_USER; payload: User };  // <- notice this
type LogOutUser = { type: typeof AUTH.LOGOUT_USER };

export default function authReducer(
  state: AuthStateType,
  action: AuthActionType
) {
  switch (action.type) {
    case LOGIN_USER: {
      return {
        ...state,
        user: {
          username: action.payload.username,  // <- error over here, cannot infer the correct case?
          password: action.payload.password
        }
      };
    }

    case LOGOUT_USER: {
      return {
        ...state,
        user: null
      };
    }

    default: {
      return state;
    }
  }
}

Only by changing the type definition from type: typeof LOGIN_USER to type: typeof AUTH.LOGIN_USER, typescript breaks the switch case, how’s this happenning?

Sandbox, please take a look at this minimum reproduced version.

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

>Solution :

You can use const assertions to let typescript not convert ('LOGIN_USER' to string)

export const AUTH = {
      LOGIN_USER: "LOGIN_USER",
      LOGOUT_USER: "LOGOUT_USER"
    } as const;
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading