title: How do I restrict the type of React Children in TypeScript, using the newly added support in TypeScript 2.3?
body: <p>I'm trying to take advantage of the <a href="https://github.com/Microsoft/TypeScript/pull/15160" rel="noreferrer">recently added support for typing of children</a> in the TypeScript compiler and @types/react, but struggling. I'm using TypeScript version 2.3.4.</p>
  
  <p>Say I have code like this:</p>
  
  <pre><code>interface TabbedViewProps {children?: Tab[]}
  export class TabbedView extends React.Component&lt;TabbedViewProps, undefined&gt; {
  
    render(): JSX.Element {
      return &lt;div&gt;TabbedView&lt;/div&gt;;
    }
  }
  
  interface TabProps {name: string}
  export class Tab extends React.Component&lt;TabProps, undefined&gt; {
    render(): JSX.Element {
      return &lt;div&gt;Tab&lt;/div&gt;
    }
  }
  </code></pre>
  
  <p>When I try to use these components like so:</p>
  
  <pre><code>return &lt;TabbedView&gt;
    &lt;Tab name="Creatures"&gt;
      &lt;div&gt;Creatures!&lt;/div&gt;
    &lt;/Tab&gt;
    &lt;Tab name="Combat"&gt;
      &lt;div&gt;Combat!&lt;/div&gt;
    &lt;/Tab&gt;
  &lt;/TabbedView&gt;;
  </code></pre>
  
  <p>I get an error as follows:</p>
  
  <pre><code>ERROR in ./src/typescript/PlayerView.tsx
  (27,12): error TS2322: Type '{ children: Element[]; }' is not assignable to type 'IntrinsicAttributes &amp; IntrinsicClassAttributes&lt;TabbedView&gt; &amp; Readonly&lt;{ children?: ReactNode; }&gt; ...'.
    Type '{ children: Element[]; }' is not assignable to type 'Readonly&lt;TabbedViewProps&gt;'.
      Types of property 'children' are incompatible.
        Type 'Element[]' is not assignable to type 'Tab[] | undefined'.
          Type 'Element[]' is not assignable to type 'Tab[]'.
            Type 'Element' is not assignable to type 'Tab'.
              Property 'render' is missing in type 'Element'.
  </code></pre>
  
  <p>It seems to be inferring the type of children as just <code>Element[]</code> instead of <code>Tab[]</code> even though that's the only type of children I'm using.</p>
  
  <p>EDIT: It would also be fine to restrict the interface of the <em>children props</em> instead of restricting the type of the children components directly, since all I need to do is pull some specific props out of the children components.</p>