[Master] Type checking JSX children

[yuit]

Fix #13618 : type checking children property (for examples and motivation see the original issue) Thanks @joelday for prototyping the feature!

Details

• Look for "props" in JSX.ElementChildrenAttribute if there exist a property inside(by default in react.d.ts it is children) that property name will be used as a name of children property. If such property doesn't exist (e.g using older react.d.ts), we will just check all the children but will NOT attach the type as "children" property.

• If there existed children in the body of JSX expression, synthesize symbol presenting those children and add them as part of JSX attributes named children. If there already children specified as attribute of opening element there will be an error indicating that the attribute will get overwritten.

• When we check each child, we call into checkExpression what this mean is that all JSX Expression will have type JSX.Element. In the future, by treating as JSX.Element will allow us to easily extends for doing these works [JSX] Cannot declare JSX elements to be in specific types. #13746 or Type JSX elements based on createElement function #14729.....

Examples

interface Prop {
    a: number,
    b: string,
    children: string | JSX.Element
}

function Comp(p: Prop) {
    return <div>{p.b}</div>;
}

// Error: missing children
let k = <Comp a={10} b="hi" />;
// Error: type not match
// For this to work, "children: (string | JSX.Element)[]"
let k1 = <Comp a={10} b="hi">
    <h2>Hello</h2> "hi"
</Comp>

// OK
let k1 = <Comp a={10} b="hi">
    <h2>Hello</h2>
</Comp>
;

interface IUser {
    Name: string;
}

interface IFetchUserProps {
    children: (user: IUser) => JSX.Element;
}

class FetchUser extends React.Component<IFetchUserProps, any> {
    render() {
        return this.state
            ? this.props.children(this.state.result)
            : null;
    }
}

// Error
function UserName() {
    return (
        <FetchUser>
            { user => (
                <h1>{ user.NAme }</h1>   // This is actually an error now; see. tests/baselines/reference/checkJsxChildrenProperty4.errors.txt
            ) }
        </FetchUser>
    );
}

Note: with the <Fetchuser> example, we can now provide contextual type and give completion as well (see fourslash test)

[mhegazy]

i would say we should treat this the same way we do with props instead of hard coding it.

[mhegazy]

do not think we need this here

[mhegazy]

name for children should be variable, and i would not include props here.

[yuit]

ping @RyanCavanaugh @mhegazy

[RyanCavanaugh]

A comment would be good here

[RyanCavanaugh]

(A longer one explaining it, that is)

[RyanCavanaugh]

Let's figure out some other way to do this - this is too opaque and might not combine well with future work

[RyanCavanaugh]

Doesn't this mean we'll keep doing this logic repeatedly?

[yuit]

Yep if we can't find the JSXElement. May be it is better to be empty string to indicate that we already done this

[RyanCavanaugh]

Undo spelling regression

[RyanCavanaugh]

Why the rename?

[yuit]

Because it is not just WhiteSpace but Whitespace and empty line.

[RyanCavanaugh]

GTG after lint fixes

[yuit]

Thanks @RyanCavanaugh for reviewing 🍰 🍰

[donaldpipowitch]

Thank you! This is a great feature.

[RyanCavanaugh]

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

[radix]

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?

[DanielRosenwasser]

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 @yuit or @RyanCavanaugh have had any thoughts on this.

[radix]

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!

[donaldpipowitch]

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')
);

[radix]

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?)

[Hotell]

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 @yuit @DanielRosenwasser @RyanCavanaugh thx!

[zackify]

Would love to see support for typing children! 👍