CODEWITHSUNDEEP
javascripttypescriptreactxp
anon
anon

Reputation:

TS2322: Type '{ ready: false; session: null; }' is not assignable to type 'Readonly<S & withAuthState>'

I have the following interface:

export interface withAuthState {
  ready: boolean,
  session: any
}

And the following HOC:

const withAuth = <P extends withAuthProps, S extends withAuthState>(
  WrappedComponent: new (props: P) => RX.Component<P, S>
) =>    class WithAuth extends RX.Component<P & withAuthProps, S & withAuthState> {
        constructor(props) {
          super(props);

          this.state = {
            ready: false,
            session: null
          };
        }
    }

I'm unable to set the state in the constructor. The error is:

TS2322: Type '{ ready: false; session: null; }' is not assignable to type 'Readonly<S & withAuthState>'.

I'm clearly missing something here, but I do not know what.

Any help appreciated. Thanks in advance.

Upvotes: 1

Views: 486

Answers (1)

Titian Cernicova-Dragomir
Titian Cernicova-Dragomir

Reputation: 249656

The problem is that the state may have other properties, which you can't initialize because you don't know about them in your HOC. Consider the following:

class MyComponent extends RX.Component<withAuthProps, withAuthState & { myStateProp: number }>{}    
const MyComponentWithAuth = withAuth(MyComponent);
let comp = new MyComponentWithAuth({});
// myStateProp does not exist on state because you did not initialize it in your HOC even though the property is required
comp.state.myStateProp

If you are ok with this behavior, you can just use a type assertion when you initialize the state: 

this.state = {
    ready: false,
    session: null
} as S & withAuthState;

Upvotes: 0

Related Questions