GeezerVison

ping Ryan Cavanaugh (@RyanCavanaugh) Mohamed Hegazy (@mhegazy)

GTG after lint fixes

Thanks Ryan Cavanaugh (@RyanCavanaugh) for reviewing 🍰 🍰

Thank you! This is a great feature.

Yui (@yuit) can you write up some minimal docs? I can fill in some details but would like you to write down the basics

The issue that this is meant to resolve has examples that restrict the type of the components in children, but I don't see an example in this PR that does that. Is it actually possible?

For example, in the linked issue there is a a use-case where a Modal component only allows ModalHeader, ModalBody, or ModalFooter components as children. Is that actually possible with this change?

I see you've also been checking on SO: https://stackoverflow.com/questions/44475309/how-do-i-restrict-the-type-of-react-children-in-typescript-using-the-newly-adde

I think that the issue here is that all you really get back from a rendered component is a JSX Element. There's not really any information in thre to specify where the element came from. I'm not sure if Yui (@yuit) or Ryan Cavanaugh (@RyanCavanaugh) have had any thoughts on this.

yeah, I have become skeptical that what I'm trying to do is possible, which makes me think that #13618 should not have been closed, since it is specifically about getting type restrictions on what kind of components are used as children of a react component. But I could very well be missing something!

I think that the issue here is that all you really get back from a rendered component is a JSX Element. There's not really any information in thre to specify where the element came from.

Yeah, this is what I saw in my tests, too. You can't say something like this:

import React, { Component } from 'react';
import { render } from 'react-dom';

class Foo extends Component<{}, void> {
  render() {
    return <p>Hello from Foo!</p>;
  }
}

interface BarProps {
  children?: Foo | Array<Foo>;
}

const Bar = ({ children }: BarProps) => <div>This must be Foo(s): {children}.</div>;

render(
  <div>
    <Bar>
      <Foo /> {/* invalid - is treated as `JSX.Element`, not `Foo` */}
    </Bar>
  </div>,
  document.getElementById('app')
);

If this really can't be done, then I suggest re-opening #13618, since it's specifically about typing the components used as children (should I comment as such there?)

any "last words" on this folks ?

If this really can't be done, then I suggest re-opening #13618, since it's specifically about typing the components used as children (should I comment as such there?)

cc Yui (@yuit) Daniel Rosenwasser (@DanielRosenwasser) Ryan Cavanaugh (@RyanCavanaugh) thx!

Would love to see support for typing children! 👍