title: Getting error "Argument of type 'typeof Header' is not assignable to parameter of type 'ComponentType...' or 'StatelesComponent'..."
body: <p>First, I'm relatively new to the react world having coded largely APIs for the majority of my career.  I'm building a react application for a non-profit and I'm just trying to get off of the ground.</p>
  
  <p>I've added a header class as follows:</p>
  
  <pre><code>import './header.css';
  import * as React from 'react';
  import * as actions from '../../actions/authenticationActions';
  import { AppState } from '../../state/appState';
  import { connect, Dispatch } from 'react-redux';
  
  const logo = require('./logo.svg');
  
  interface Props {
      displayName: string;
      isAuthenticated: boolean;
      logIn?: () =&gt; void;
      logOut?: () =&gt; void;
  }
  
  interface State {
  
  }
  class Header extends React.Component&lt;Props, State&gt; {
      constructor(props: Props, state: State) {
          super(props, state);
      }
  
      render() {
          return (
              &lt;div className={'Header'}&gt;
                  &lt;div className={'Container'}&gt;
                      &lt;img src={logo} className="App-logo" alt="logo" /&gt;
                      &lt;div className={'Header__nav'}&gt;
                          &lt;div className={'userLogin'}&gt;
                              &lt;div className={'user'}&gt;{this.props.displayName}&lt;/div&gt;
                              &lt;a onClick={this.props.logOut}&gt;Log Out&lt;/a&gt;&lt;a onClick={this.props.logIn}&gt;Log In&lt;/a&gt;
                          &lt;/div&gt;
                          {/*&lt;a href='https://localhost/' className={'button button--goBack'}&gt;Back to Website&lt;/a&gt;*/}
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  }
  
  export const mapStateToProps = ({ currentUser }: AppState) =&gt; ({
      displayName: (currentUser != null ? currentUser.preferredName : 'Please Log In'),
      isAuthenticated: currentUser != null
  });
  
  export const mapDispatchToProps = (dispatch: Dispatch&lt;actions.AuthenticationActions&gt;) =&gt; ({
      logIn: () =&gt; dispatch(actions.logIn()),
      logOut: () =&gt; dispatch(actions.logOut())
  });
  
  export default connect(mapStateToProps, mapDispatchToProps)(Header);
  </code></pre>
  
  <p>This largely seems to be fine, but it doesn't compile because of this error message:</p>
  
  <blockquote>
    <p>Argument of type 'typeof Header' is not assignable to parameter of
    type 'ComponentType&lt;{ displayName: string; isAuthenticated: boolean; }
    &amp; { logIn: () => LogIn; logOut: ...'.   Type 'typeof Header' is not
    assignable to type 'StatelessComponent&lt;{ displayName: string;
    isAuthenticated: boolean; } &amp; { logIn: () => LogIn; log...'.
        Type 'typeof Header' provides no match for the signature '(props: { displayName: string; isAuthenticated: boolean; } &amp; { logIn: () =>
    LogIn; logOut: () => LogOut; } &amp; { children?: ReactNode; }, context?:
    any): ReactElement | null'.</p>
  </blockquote>
  
  <p>I've battled with this for several hours now to no avail.  I'm fairly confident this is a noob mistake; please be gentle!</p>