title: Type of Generic Stateless Component React? OR Extending generic function interface in typescript to have a further generic?
body: <p><strong>Problem</strong>: The interface of <code>Stateless Functional Component</code> is given as </p>
  
  <pre><code>interface SFC&lt;P = {}&gt; {
      (props: P &amp; { children?: ReactNode }, context?: any): ReactElement&lt;any&gt; | null;
      propTypes?: ValidationMap&lt;P&gt;;
  }
  </code></pre>
  
  <p>The prop type of my component is also generic as:</p>
  
  <pre><code>interface Prop&lt;V&gt;{
      num: V;
  }
  </code></pre>
  
  <p>How to properly define my component? as:</p>
  
  <pre><code>const myCom: &lt;T&gt;SFC&lt;Prop&lt;T&gt;&gt; = &lt;T&gt;(props: Prop&lt;T&gt;)=&gt; &lt;div&gt;test&lt;/div&gt;
  </code></pre>
  
  <p>gives an error at <code>character 27</code> that <code>Cannot find name 'T'</code></p>
  
  <p>Here is :<a href="http://www.typescriptlang.org/play/#src=interface%20FunctionalComponent%20%3C%20P%20%3E%20%7B%0D%0A%09%09(props%3A%20Readonly%3CP%3E%2C%20context%3F%3A%20any)%3A%20number%3B%0D%0A%09%09displayName%3F%3A%20string%3B%0D%0A%09%09defaultProps%3F%3A%20Partial%3CP%3E%3B%0D%0A%7D%0D%0Ainterface%20Prop%3CV%3E%7B%0D%0A%09num%3A%20V%3B%0D%0A%7D%0D%0Aconst%20Search%3A%20FunctionalComponent%3CProp%3CT%3E%3E%20%3D%20%3CT%3E(props)%20%3D%3E%20%7B%0D%0A%09return%2010%3B%0D%0A%7D%0D%0A" rel="noreferrer">Typescript Playground of modified example</a></p>
  
  <p><strong>MyFindings</strong>: </p>
  
  <p>1:Typescript 2.9.1 support Stateful Generic Component: <a href="http://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-9.html#generic-type-arguments-in-jsx-elements" rel="noreferrer">http://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-9.html#generic-type-arguments-in-jsx-elements</a></p>
  
  <pre><code>class myCom&lt;T&gt; extends React.Component&lt;Prop&lt;T&gt;, any&gt; {
     render() {
        return &lt;div&gt;test&lt;/div&gt;;
     }
  }
  </code></pre>
  
  <p>2: Extending <code>SFC</code> to make a new interface as mentioned in following answer would make component's prop type as <code>any</code>:
  <a href="https://stackoverflow.com/questions/44392479/typescript-react-stateless-function-with-generic-parameter-return-types#">Typescript React stateless function with generic parameter/return types</a> which I don't want. I want to give proper type for my prop</p>