Why doesn't @connect work?

Question

JavaScript

I'm trying to set up a connection to the store, the typescript constantly swears at this line

const mapStateToProps = (state: any) => {
  return { unreadMessages: state.unreadMessages };
}

const mapDispatchToProps = dispatch => {
  return {
    addMsgAction: msg => dispatch(addMessage(msg))
  }
}

@connect(mapStateToProps, mapDispatchToProps)
// ругается на @connect -
//Error:(28, 2) TS2345: Argument of type 'typeof MainLayout' is not assignable to parameter of type
//'Component<any, {}, any>'.
 // Property 'setState' is missing in type 'typeof MainLayout'.

export class MainLayout extends React.Component <IMainLayoutProps, IState> {
  constructor(props, context) {
    super(props, context);
  }

  public componentDidMount() {
  }

  public render() {
    const { children, match: { params } } = this.props;
    return (
      <div className={style.layout}>
        <Header page={params.page}/>
        <div className={style.page}>
          {children}
        </div>
        <Footer/>
      </div>
    );
  }
}

Answer 1

You shouldn't use connect as a decorator. Try like this:
Class decorators are needed in order to modify the behavior of the class constructor, so TS requires a strict correspondence between the class being decorated and the result of the decorator function. In the case of connect, what happens is quite different: connect simply wraps the component in a higher-order component. It turns out that instead of modifying the constructor, the decorator-function will return a qualitatively new class.
A guide to using connect in TS