Adding type to nested destructured props. Typescript React Redux. TS2339

Question

The destructured props (from redux state) for the mapStateToProps() function are nested, how would I apply the HeaderStateMap types to it? I receive the following error message upon compilation:

Property 'cart' does not exist on type 'HeaderStateMap'.  TS2339

Also, I've set user:any for the meantime, but if I change the type to object, TypeScript complains that Property 'user' does not exist on type '{}'.

Would appreciate any help :).

Code

type HeaderStateMap = {
    user:any,
    hidden:boolean
};

const mapStateToProps = ({ user: { user }, cart: { hidden } }:HeaderStateMap) => {
    return {
        user,
        hidden
    };
};

score 2 · Accepted Answer · answered Aug 22 '20 at 19:03

You can nest your types:

interface User {
  name: string;
};

type HeaderStateMap = {
  user: User;
  cart: {
    hidden: boolean;
  };
};

About the bug you have, i think you are destructuring too far, you assume that you have user inside user object: user.user, try:

const mapStateToProps = ({ user, cart: { hidden } }:HeaderStateMap) =>

Adding type to nested destructured props. Typescript React Redux. TS2339

1 Answers1