title: React TypeScript prevent element having children of unexpected type
body: <p>I'd like to prevent a react component having at least (one or more) children of a specific type.</p>
  
  <p>This script works, but it allows the component having other types of children, except primitive ones:</p>
  
  <pre class="lang-js prettyprint-override"><code>import * as React    from "react"
  
  class App extends React.Component {
      render() {
          return &lt;div&gt;
              {/* Should compile, it does: OK! */}
              &lt;Foo&gt;&lt;Bar lorem={0} /&gt;&lt;/Foo&gt;
  
              {/* Should compile, it does: OK! */}
              &lt;Foo&gt;
                  &lt;Bar lorem={1} /&gt;
                  &lt;Bar lorem={2} /&gt;
              &lt;/Foo&gt;
  
              {/* Should not compile, it does not: OK! */}
              &lt;Foo /&gt;
  
              {/* Should not compile, it does: NOT OK... */}
              &lt;Foo&gt;&lt;div /&gt;&lt;/Foo&gt;
  
              {/* Should not compile, it does: NOT OK... */}
              &lt;Foo&gt;
                  &lt;div /&gt;
                  &lt;div /&gt;
              &lt;/Foo&gt;
          &lt;/div&gt;
      }
  }
  
  class Foo extends React.Component&lt;FooProps&gt; {
    render() {
      return &lt;ul&gt;{this.props.children}&lt;/ul&gt;
    }
  }
  
  interface FooProps {
      children: React.ReactElement&lt;BarProps&gt; | React.ReactElement&lt;BarProps&gt;[]
  }
  
  class Bar extends React.Component&lt;BarProps&gt; {
      render() {
          return &lt;li&gt;{this.props.lorem}&lt;/li&gt;
      }
  }
  
  interface BarProps {
      lorem: number
  }
  </code></pre>
  
  <p>Is there something wrong with my code ?</p>
  
  <p>You can download a Git short project <a href="https://github.com/calcimicium-needing-help/react-typescript-children-typechecking" rel="nofollow noreferrer">here</a> to try it.</p>
  
  <p>Thanks</p>