title: Extends type of accepted props
body: <p>I have a component that's root node can be overridden with the value of passed prop.</p>
  
  <pre class="lang-js prettyprint-override"><code>interface Props {
    propA?: string
    as?: React.ElementType
  }
  
  const OverridableComponent = (props: Props) =&gt; {
    const { as: Tag = 'div', ...otherProps } = props
  
    return &lt;Tag {...props} /&gt;
  }
  </code></pre>
  
  <p>And another component that will be used as <code>as</code>.</p>
  
  <pre class="lang-js prettyprint-override"><code>interface SomeComponentProps {
    propB: string //&lt;-- mandatory prop
    children?: React.ReactNode
  }
  
  const SomeComponent = (props: SomeComponentProps) =&gt; {
    return &lt;div someProp={props.propB}&gt;{props.children}&lt;/div&gt;
  }
  </code></pre>
  
  <p>So, the result that I would love to achieve is something like this</p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;OverridableComponent propA='optionalProp' as={SomeComponent} /&gt;
  </code></pre>
  
  <p>and I'd like <code>OverridableComponent</code> to merge props from <code>SomeComponent</code>.</p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;OverridableComponent propA='optionalProp' as={SomeComponent} 
  propB={/*required form SomeComponentProps */'someValue /&gt;
  </code></pre>
  
  <p>To implement this I tried to use generics.</p>
  
  <pre class="lang-js prettyprint-override"><code>type Props&lt;T extends ElementType&gt; = {
    propA?: string
    as?: T
  } &amp; React.ComponentProps&lt;T&gt;
  </code></pre>
  
  <p>it works for the case when <code>as</code> prop is passed, but if it's not, every passed prop even <code>from='string'</code> is allowed, because it's allowed on SVG attributes of React.ElementType.</p>
  
  <p>Any idea how to improve this case?</p>