title: Typing redux forms v7 with TypeScript and React
body: <p>I've got a plain react-redux-powered form. I wish for there to be a form.container.tsx and a form.component.tsx, where form.container.tsx holds all the connections to redux state minus the Field's. I'm trying to wrap my container in react-redux's connect and then wrapping reduxForm within it to look something like <a href="https://stackoverflow.com/questions/40722592/typescript-redux-form-and-connect?rq=1">TypeScript, redux-form and connect</a>:</p>
  
  <p>(ideal) form.container.tsx:</p>
  
  <pre><code>interface DummyFormContainerProps {}
  
  export const DummyFormContainer: React.SFC&lt;DummyFormContainerProps&gt; = props =&gt; {
    const submitForm = (formValues: object) =&gt; {
      alert(formValues);
    };
    return (
      &lt;DummyForm
        onSubmit={submitForm}
      /&gt;
    );
  };
  
  const mapStateToProps = (state: State) =&gt; ({});
  const mapDispatchToProps = (dispatch: object) =&gt; {
    return {};
  };
  const mergeProps = (stateProps: State, dispatchProps: object | null, ownProps: object | void) =&gt; 
    Object.assign({}, stateProps, dispatchProps, ownProps);
  
  const formConfiguration = {
    form: 'dummy-form',
    forceUnregisterOnUnmount: true
  };
  
  export default connect(mapStateToProps, mapDispatchToProps)(
    reduxForm(formConfiguration)(DummyFormContainer)
  );
  </code></pre>
  
  <p>The above does not work, but if I take out the reduxForm() part, I'm left with a working container with no reduxForm Integration:</p>
  
  <p>(working without reduxForm) form.container.tsx:</p>
  
  <pre><code>export default connect(mapStateToProps, mapDispatchToProps, mergeProps)(
    DummyFormContainer
  );
  </code></pre>
  
  <p>And I've tried different variations with reduxForms and connect, all not currently working:</p>
  
  <p>(with classes) form.container.tsx:</p>
  
  <pre><code>export class DummyFormContainer extends React.Component&lt;DummyFormContainerProps, void&gt; {
    submitForm = (formValues: object) =&gt; {
      alert(formValues);
    }
  
    render() {
      return (
        &lt;DummyForm
          onSubmit={this.submitForm}
        /&gt;
      );
    }
  }
  
  const mapStateToProps = (state: State) =&gt; ({});
  const mapDispatchToProps = (dispatch: object) =&gt; {
    return {};
  };
  const mergeProps = (stateProps: State, dispatchProps: object | null, ownProps: object | void) =&gt; 
    Object.assign({}, stateProps, dispatchProps, ownProps);
  
  const formConfiguration = {
    form: 'business-registration',
  };
  
  export default connect(mapStateToProps, mapDispatchToProps, mergeProps)(
    reduxForm(formConfiguration)(DummyFormContainer) // ERROR
  );
  </code></pre>
  
  <p>error: </p>
  
  <pre><code>./src/modules/dummy-form/dummy-form.container.tsx
  (100,32): error TS2345: Argument of type 'typeof DummyFormContainer' is not assignable to parameter of type 'ComponentType&lt;InjectedFormProps&lt;{}, {}&gt;&gt;'.
    Type 'typeof DummyFormContainer' is not assignable to type 'StatelessComponent&lt;InjectedFormProps&lt;{}, {}&gt;&gt;'.
      Type 'typeof DummyFormContainer' provides no match for the signature '(props: InjectedFormProps&lt;{}, {}&gt; &amp; { children?: ReactNode; }, context?: any): ReactElement&lt;any&gt; | null'.
  </code></pre>
  
  <p>(with stateless functional components) form.container.tsx:</p>
  
  <pre><code>export const DummyFormContainer: React.SFC&lt;DummyFormContainerProps&gt; = props =&gt; {
    const submitForm = (formValues: object) =&gt; {
      alert(formValues);
    };
    return (
      &lt;DummyForm
        onSubmit={submitForm}
      /&gt;
    );
  };
  
  export default connect(mapStateToProps, mapDispatchToProps, mergeProps)(
    reduxForm(formConfiguration)(DummyFormContainer) // ERROR
  );
  </code></pre>
  
  <p>error:</p>
  
  <pre><code>./src/modules/dummy-form/dummy-form.container.tsx
  (100,3): error TS2345: Argument of type 'DecoratedComponentClass&lt;{}, Partial&lt;ConfigProps&lt;{}, {}&gt;&gt;&gt;' is not assignable to parameter of type 'ComponentType&lt;(State &amp; null &amp; void) | (State &amp; null &amp; object) | (State &amp; object &amp; void) | (State ...'.
    Type 'DecoratedComponentClass&lt;{}, Partial&lt;ConfigProps&lt;{}, {}&gt;&gt;&gt;' is not assignable to type 'StatelessComponent&lt;(State &amp; null &amp; void) | (State &amp; null &amp; object) | (State &amp; object &amp; void) | (S...'.
      Type 'DecoratedComponentClass&lt;{}, Partial&lt;ConfigProps&lt;{}, {}&gt;&gt;&gt;' provides no match for the signature '(props: (State &amp; null &amp; void &amp; { children?: ReactNode; }) | (State &amp; null &amp; object &amp; { children?: ReactNode; }) | (State &amp; object &amp; void &amp; { children?: ReactNode; }) | (State &amp; object &amp; { children?: ReactNode; }), context?: any): ReactElement&lt;any&gt; | null'.
  </code></pre>
  
  <p>The form.component.tsx looks like this:</p>
  
  <pre><code>import * as React from 'react';
  import Input from '../../components/input';
  
  interface DummyFormProps {
    onSubmit: (formValues: object) =&gt; void
  }
  
  export const DummyForm: React.SFC&lt;DummyFormProps&gt; = () =&gt; {
    return (
      &lt;div&gt;
        &lt;h1&gt;DummyForm (no state)&lt;/h1&gt;
        &lt;form&gt;
          &lt;Input inputType="primary" /&gt;
        &lt;/form&gt;
      &lt;/div&gt;
    );
  };
  
  export default DummyForm;
  </code></pre>
  
  <p>And the &lt; Input > component is a regular React component.</p>
  
  <p>Does anyone know how to properly connect reduxForm and react-redux's connect()?</p>