title: TypeScript React.FC<Props> confusion
body: <p>I am learning TypeScript and some bits are confusing to me. One bit is below:</p>
  <pre class="lang-js prettyprint-override"><code>interface Props {
    name: string;
  }
  
  const PrintName: React.FC&lt;Props&gt; = (props) =&gt; {
    return (
      &lt;div&gt;
        &lt;p style={{ fontWeight: props.priority ? &quot;bold&quot; : &quot;normal&quot; }}&gt;
          {props.name}
        &lt;/p&gt;
      &lt;/div&gt;
    )
  }
  
  const PrintName2 = (props: Props) =&gt; {
    return (
      &lt;div&gt;
        &lt;p style={{ fontWeight: props.priority ? &quot;bold&quot; : &quot;normal&quot; }}&gt;
          {props.name}
        &lt;/p&gt;
      &lt;/div&gt;
    )
  }
  </code></pre>
  <p>For both functional components above, I see TypeScript generates the same JS code. The <code>PrintName2</code> component seems more streamlined to me as far as readability. I wonder what's the difference between the two definitions and if anyone is using second type of React component?</p>