title: Typing in proper way objects as props
body: <p>Currently I have the following component</p>
  
  <p><strong>SearchButton.tsx</strong></p>
  
  <pre><code>export interface Props {
    // some other props
    onClick?: (event: React.MouseEvent&lt;HTMLButtonElement&gt;) =&gt; void;
  }
  
  export const SearchButton: React.SFC&lt;Props&gt; = ({
    // other props
    onClick,
  })
  </code></pre>
  
  <p><strong>Popover.tsx</strong></p>
  
  <pre><code>interface ButtonComponentProps {
    onClick: (event: React.MouseEvent&lt;HTMLButtonElement&gt;) =&gt; void;
  }
  
  interface Props {
    buttonComponent: React.ComponentType&lt;ButtonComponentProps&gt;;
  }
  
  class FilterPopover extends React.Component&lt;Props, State&gt; {
      render() {
          const {buttonComponent: BtnComponent} = this.props;
          return (
              &lt;div&gt;
                  //...
                  &lt;BtnComponent onClick={this.open} /&gt;
              &lt;/div&gt;
          )
      }
  
  }
  </code></pre>
  
  <p><strong>Page.tsx</strong></p>
  
  <pre><code>&lt;Popover buttonComponent={SearchButton}/&gt;
  </code></pre>
  
  <p>But I have a mistmatch between types:</p>
  
  <pre><code>The expected type comes from property 'buttonComponent' which is declared here on type 'IntrinsicAttributes &amp; IntrinsicClassAttributes&lt;Popover&gt; &amp; Readonly&lt;{ children?: ReactNode; }&gt; &amp; Readonly&lt;Props&gt;'
  </code></pre>
  
  <p>So if I change the props from <code>Popover.tsx</code> </p>
  
  <pre><code>interface ButtonComponentProps {
    onClick?: (event: React.MouseEvent&lt;HTMLButtonElement&gt;) =&gt; void;
  }
  </code></pre>
  
  <p>then interfaces match, but how Typescript is inferring this type through <code>SearchButton</code>? Is it ok to match interfaces in that way? Why those ones should be the same?</p>
  
  <blockquote>
    <p>React 16.4.1 Typescript 3.0.1</p>
  </blockquote>