Trouble with a ReactXP higher-order component written in TypeScript

Question

I'm trying to write a ReactXP HOC.

Here is the code (vastly simplified for the sake of the clarity):

interface withAuthState {
         //
        }

interface withAuthProps {
         //
        }

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

            render() {

              return (
                  <WrappedComponent
                    {...this.props}
                  />
              );
            }
          }
export default withAuth;

Now the the consumer:

interface signUpProps {
//
}

interface signUpState {
//
}

class SignUp extends RX.Component<signUpProps, signUpState> {
  constructor(props) {
    super(props);
  }
  render() {
    return (<RX.View ... />);
  }
};

export default WithAuth(SignUp);

This last export instruction does not compile with the following error message:

Argument of type 'typeof SignUp' is not assignable to parameter of type 'new () => Component<withAuthProps, withAuthState>'

There are a lot possible solutions out there but none of them seems to work for me.

Any help appreciated. Thanks is advance.

Answer 1

You type annotation for WrappedComponent states that is should be a constructor that takes 0 parameters. My guess is you want a constructor that takes the props as a parameter to the constructor:

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: P) {
    super(props);
  }

  render() {

    return (
      <WrappedComponent
        {...this.props}
      />
    );
  }
}

//Usage: 

interface withAuthProps {
  auth: boolean
}

interface signUpProps extends withAuthProps {
  test: string;
}
interface signUpState extends withAuthState{}

class SignUp extends RX.Component<signUpProps, signUpState> {
  constructor(props: signUpProps) {
    super(props);
  }
  render() {
    return <div />;
  }
}

const _SignUp = withAuth(SignUp);
let d = <_SignUp test="" auth={true} /> // Will have props from signUpProps