title: Constrain allowed children in React TypeScript
body: <p>Using TypeScript in a React project is there any way to enforce some constraints on the allowed children of a component? Compile-time is preferred, but run-time could still be helpful.</p>
  
  <p>In my case I have a component, call it <code>&lt;ClickTracker&gt;</code>, and it expects a single child with a callback prop <code>onClick</code> and it adds some extra functionality to the callback (tracking the click in an external library).</p>
  
  <p>This works great as long as the child inside a <code>&lt;ClickTracker&gt;</code> does actually make use of an <code>onClick</code> prop (all HTML elements implement this, for example), but fails silently otherwise.</p>
  
  <p>For example, this works:</p>
  
  <pre><code>&lt;ClickTracker&gt;
    &lt;div&gt;Hello&lt;/div&gt;
  &lt;/ClickTracker&gt;
  </code></pre>
  
  <p>But this doesn't work:</p>
  
  <pre><code>class Hello extends Component&lt;{}, {}&gt; {
    render() {
      return &lt;div&gt;Hello&lt;/div&gt;
    } 
  }
  
  &lt;ClickTracker&gt;
    &lt;Hello /&gt;
  &lt;/ClickTracker&gt;
  </code></pre>
  
  <p>But this does work because it passes <code>onClick</code> to an HTML element:</p>
  
  <pre><code>class Hello extends Component&lt;{onClick: MouseEventHandler}, {}&gt; {
    render() {
      return &lt;div onClick={this.props.onClick}&gt;Hello&lt;/div&gt;
    } 
  }
  
  &lt;ClickTracker&gt;
    &lt;Hello /&gt;
  &lt;/ClickTracker&gt;
  </code></pre>
  
  <p>As you can see I would like to have some safety around what can go inside <code>&lt;ClickTracker&gt;</code> based on the child props. Or if there's another way this could be done.</p>