Constrain allowed children in React TypeScript

Question

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.

In my case I have a component, call it <ClickTracker>, and it expects a single child with a callback prop onClick and it adds some extra functionality to the callback (tracking the click in an external library).

This works great as long as the child inside a <ClickTracker> does actually make use of an onClick prop (all HTML elements implement this, for example), but fails silently otherwise.

For example, this works:

<ClickTracker>
  <div>Hello</div>
</ClickTracker>

But this doesn't work:

class Hello extends Component<{}, {}> {
  render() {
    return <div>Hello</div>
  } 
}

<ClickTracker>
  <Hello />
</ClickTracker>

But this does work because it passes onClick to an HTML element:

class Hello extends Component<{onClick: MouseEventHandler}, {}> {
  render() {
    return <div onClick={this.props.onClick}>Hello</div>
  } 
}

<ClickTracker>
  <Hello />
</ClickTracker>

As you can see I would like to have some safety around what can go inside <ClickTracker> based on the child props. Or if there's another way this could be done.

Answer 1

There is currently, no possible way of enforcing the children type with TypeScript.

There is more information in this issue.

Answer 2

Or if there's another way this could be done

Click events bubble up unless some component stopped propogation (not the default behavior for native components). So you can:

<div onClick={()=>alert('still noted')}>
  <Hello />
</div>

And that div is your ClickTracker 🌹