title: React + TypeScript only allow children of specific type
body: <p>I run into a trouble with trying to allow only specific children to be passed to a component.</p>
  
  <p>Here are my components, HeaderLink</p>
  
  <pre><code>import { SFC, ReactElement } from "react";
  
  import "./Header.scss";
  
  export interface IHeaderLinkProps {
    url: string;
    label: string;
  }
  
  const HeaderLink: SFC&lt;IHeaderLinkProps&gt; = ({ url, label }): ReactElement =&gt; (
    &lt;li className="nav-item"&gt;
      &lt;a href={url}&gt;{label}&lt;/a&gt;
    &lt;/li&gt;
  );
  
  export default HeaderLink;
  </code></pre>
  
  <p>and Header</p>
  
  <pre><code>import { SFC, ReactElement } from "react";
  import { IHeaderLinkProps } from "./HeaderLink";
  
  import "./Header.scss";
  
  interface IHeaderProps {
    children: ReactElement&lt;IHeaderLinkProps&gt; | ReactElement&lt;IHeaderLinkProps&gt;[];
  }
  
  const Header: SFC&lt;IHeaderProps&gt; = ({ children }): ReactElement =&gt; {
    return (
      &lt;header className="header"&gt;
        &lt;div className="container"&gt;
          &lt;div className="row"&gt;
            &lt;div className="col"&gt;
              &lt;img
                className="header__logo"
                src={"/logo.png"}
                alt="monqrime-logo"
              /&gt;
  
              &lt;ul className="header__nav"&gt;{children}&lt;/ul&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/header&gt;
    );
  };
  </code></pre>
  
  <p>So the problem is that I want to allow only HeaderLink components to be passed as children to the Header, but my current solution still allows me to put everything as a children.</p>