How to describe type of props for children

[deser]

// item is of PageItem type

const controls = _.map(items, item => <FVDesignerItem key={item.id} item={item} />);
        return (
            <FvPageWrapper>
                <FvPositioningContainer disabled={disabled}>{controls}</FvPositioningContainer>
            </FvPageWrapper>
        );

...
// FvPositioningContainer .tsx

React.Children.map(children, (child, i) => {
            if (!child) return undefined;
            const { x, y, w, h } = child.props.item;  // item here is of PageItem , propagated automatically and validated by tsc
           ....
        });

[swyxio]

this is potentially very useful for us! cc @ferdaber i wonder what problems you and Ryan Florence ran into that prevented him typing children - even if there are problems, we should definitely document them

[ferdaber]

Typing children as anything but JSX is generally safe for TypeScript. It only becomes a problem if you try typing them as specific JSX types.

So if you say "I want my children to be an array of objects with these properties" 👍🏼, but "I want my children to be an array of JSX elements that have this component as their type/constructor" 👎🏼

[ferdaber]

In the case above they are just simple interfaces, or objects, so they are able to be well-typed as children.

[swyxio]

ah ok. honestly wouldnt have been a blocker for me adopting ts in Reach UI

[deser]

In the case above they are just simple interfaces, or objects, so they are able to be well-typed as children.

Hm, seems I either misunderstood smth or that is not entirely correct. By default (without any explicit typings) typescript blames that child (which is React.Node) can't have any props:

Whatever I do with explicit typing doesn't help eventually.

[deser]

Maybe this is an issue with @types/react or that I have React 15.6 installed but not 16.*

[ferdaber]

It's honestly a bit difficult for me to decipher what you want to achieve with the short example at the beginning of the issue. Can you elaborate on it?

[eps1lon]

Shouldn't this cover most use cases:

interface ParentProps {
  children: React.ReactElement<ChildProps>;
}

interface ChildProps {
  value: string;
}

function Parent(props: ParentProps) {
  return <div>My child has {props.children.props.value} value.</div>
}

// { children: string } is not assignable to ...
<Parent>1</Parent>; // $ExpectError
<Parent><input value="0" /></Parent>;

You could also allow only numbers or arrays. As long as it's assignable to React.ReactNode you shouldn't have any troubles. Probably helps with safe cloneElement but I would personally not use this anymore. This pattern creates a tight parent-child coupling that doesn't allow intermediate components (goes against reacts composition model). Context should cover most use cases.

[ferdaber]

@eps1lon this actually doesn't work because when you construct <input value="0" /> the type of the resulting expression is just JSX.Element<any> so TypeScript won't actually check the constructor type of the child JSX expression, you can basically put any JSX expression you want inside.

[eps1lon]

@eps1lon [...] you can basically put any JSX expression you want inside.

😞 Well at least you could restrict it to primitives? Still has some DX improvements in the parent. For more usage safety you could add a prop-types validator e.g.

Parent.propTypes = {
  children: PropTypes.shape({
    props: PropTypes.shape({ // could share `propTypes` to the child
      value: PropTypes.string.isRequired
    })
  }).isRequired
};

[ferdaber]

Yep, that's kind of what I was alluding to in my first response. TypeScript will have no problems with simple interfaces, so the implementing component will just need to wrap it in a createElement call. It's an unfortunate limitation :/

[deser]

Yep, that's kind of what I was alluding to in my first response. TypeScript will have no problems with simple interfaces, so the implementing component will just need to wrap it in a createElement call. It's an unfortunate limitation :/

@ferdaber , sorry I don't quite understand what does it mean to wrap it in a createElement call. Could you be so kind to show an example?

Thanks

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions!

[swyxio]

cleaning up old issues - pls reopen if you still face this!