title: Convert jsx to react component?
body: <p>Suppose I have a component called 'MyComponent', and I want to store it in a variable of type 'MyComponent' in typescript but use the JSX element to initialise it, something like:</p>
  
  <pre><code>let comp: MyComponent = &lt;MyComponent somePropInit={3} /&gt;
  </code></pre>
  
  <p>The above code generates errors like:</p>
  
  <blockquote>
    <p>'property 'componentDidMount' is missing in type 'Element'</p>
  </blockquote>
  
  <p>Actual component I'm using:</p>
  
  <pre><code>export class PlayCard extends React.Component&lt;AllCardProps, {}&gt; {
      addToDeck(){...}
  </code></pre>
  
  <p>how I'm trying to store it (I've tried many different things including using typeof, Card.PlayCard, PlayCard , etc):</p>
  
  <pre><code>import * as Card from './PlayCard'
  ...
  let c: Card.PlayCard = &lt;PlayCard Id={32} /&gt;
  </code></pre>
  
  <p>^ if I try the above I get an error </p>
  
  <blockquote>
    <p>'Property 'addToDeck' is missing in type 'Component&lt;...>'</p>
  </blockquote>
  
  <p>If I delete addToDeck the error moves on to the next function down. Looks like any function which exists throws it off somehow?</p>
  
  <p>How would I accomplish this?</p>