[Master] Type checking JSX children #15160

yuit · 2017-04-12T20:11:38Z

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)

…t we won't include in typ-checking

…eScript into master-jsxChildren # Conflicts: # src/compiler/scanner.ts

mhegazy · 2017-04-13T21:26:10Z

src/compiler/checker.ts

@@ -424,6 +424,8 @@ namespace ts {
            IntrinsicClassAttributes: "IntrinsicClassAttributes"
        };

+        const jsxChildrenPropertyName = "children";


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

mhegazy · 2017-04-13T21:48:58Z

src/compiler/checker.ts

@@ -8676,8 +8680,9 @@ namespace ts {
            function hasExcessProperties(source: FreshObjectLiteralType, target: Type, reportErrors: boolean): boolean {
                if (maybeTypeOfKind(target, TypeFlags.Object) && !(getObjectFlags(target) & ObjectFlags.ObjectLiteralPatternWithComputedProperties)) {
                    const isComparingJsxAttributes = !!(source.flags & TypeFlags.JsxAttributes);
+                    const containsSynthesizedJsxChildren = !!(source.flags & TypeFlags.ContainsSynthesizedJsxChildren);


do not think we need this here

mhegazy · 2017-04-13T21:51:21Z

src/compiler/diagnosticMessages.json

@@ -2099,6 +2099,10 @@
        "category": "Error",
        "code": 2707
    },
+    "props.children are specified twice. The attribute named 'children' will be overwritten.": {


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

… error if you use children without specified such property

# Conflicts: # src/compiler/checker.ts # src/compiler/diagnosticMessages.json

yuit · 2017-04-17T21:25:34Z

ping @RyanCavanaugh @mhegazy

RyanCavanaugh · 2017-04-18T00:04:44Z

src/compiler/checker.ts

@@ -423,6 +423,9 @@ namespace ts {

        let _jsxNamespace: string;
        let _jsxFactoryEntity: EntityName;
+        let _jsxElementAttribPropInterfaceSymbol: Symbol;  // JSX.ElementAttributesProperty [symbol]


A comment would be good here

(A longer one explaining it, that is)

RyanCavanaugh · 2017-04-18T00:10:46Z

src/compiler/checker.ts

+                // interface ElementAttributesProperty {
+                //     props: {
+                //         children?: any;
+                //     };


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

RyanCavanaugh · 2017-04-18T00:11:10Z

src/compiler/checker.ts

-                    error(attribsPropTypeSym.declarations[0], Diagnostics.The_global_type_JSX_0_may_not_have_more_than_one_property, JsxNames.ElementAttributesPropertyNameContainer);
-                    return undefined;
+                    // No interface exists, so the element attributes type will be an implicit any
+                    _jsxElementPropertiesName = undefined;


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

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 · 2017-04-18T00:11:33Z

src/compiler/checker.ts

@@ -14574,7 +14672,7 @@ namespace ts {
            //         We can figure that out by resolving attributes property and check number of properties in the resolved type
            // If the call has correct arity, we will then check if the argument type and parameter type is assignable

-            const callIsIncomplete = node.attributes.end === node.end;  // If we are missing the close "/>", the call is incomplete
+            const callIsIncomplete = node.attributes.end === node.end;  // If we are missing the close "/>", the call is incoplete


Undo spelling regression

RyanCavanaugh · 2017-04-18T00:12:00Z

src/compiler/scanner.ts

@@ -366,7 +366,7 @@ namespace ts {
        return computeLineAndCharacterOfPosition(getLineStarts(sourceFile), position);
    }

-    export function isWhiteSpace(ch: number): boolean {
+    export function isWhiteSpaceLike(ch: number): boolean {


Why the rename?

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

RyanCavanaugh · 2017-04-20T21:41:15Z

GTG after lint fixes

yuit · 2017-04-21T16:57:00Z

Thanks @RyanCavanaugh for reviewing 🍰 🍰

donaldpipowitch · 2017-04-21T18:42:58Z

Thank you! This is a great feature.

RyanCavanaugh · 2017-04-24T17:42:18Z

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

radix · 2017-06-10T17:20:25Z

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 · 2017-06-11T01:40:10Z

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 · 2017-06-11T02:27:04Z

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 · 2017-06-12T06:08:15Z

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 · 2017-06-12T06:11:28Z

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 · 2017-07-15T18:03:38Z

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 · 2017-10-02T14:39:44Z

Would love to see support for typing children! 👍

Kanchalai Tanglertsampan added 11 commits April 7, 2017 16:41

Wip - type checking JSX children

b3846bf

Consider whitespace that won't be emitted to be different kind so tha…

f86a730

…t we won't include in typ-checking

Use JSX Attributes to contextually type children property

8e2dd38

Format checker

17417e9

Store scanning information whether JSXText is just an all whitespaces

4562fd0

wip-fixing consuming whitespace in children

c1ea303

Fixing consuming whitespace in children

4fa2312

Add tests

f099046

update baselines

eb0ad7f

Merge branch 'master-jsxChildren' of https://github.com/Microsoft/Typ…

e5b95fc

…eScript into master-jsxChildren # Conflicts: # src/compiler/scanner.ts

Fix linting error

012f459

yuit requested a review from RyanCavanaugh April 12, 2017 20:11

msftclas added the cla-not-required label Apr 12, 2017

Add tests and update baselines

58e2189

mhegazy reviewed Apr 13, 2017

View reviewed changes

Kanchalai Tanglertsampan added 8 commits April 14, 2017 15:21

Remove a flag indicating the children is synthesized..We will give an…

bb8bab3

… error if you use children without specified such property

Read "children" property from react DTS file

c778a48

Update tests and baselines

dbf2a96

Update baselines and tests (2)

9a23b75

Fix linting error

7829cba

Update error message to use variable name for "children"

d290cf7

Merge branch 'master' into master-jsxChildren

f6f0813

# Conflicts: # src/compiler/checker.ts # src/compiler/diagnosticMessages.json

Fix baselines and linting error from merging with master

c13383a

RyanCavanaugh reviewed Apr 18, 2017

View reviewed changes

Change how we look up children attribute from react.d.ts

e9cd3ad

Yui T added 2 commits April 19, 2017 22:33

Update tests and baselines

b7a30c1

Fix spelling and add comment

e03be45

Fix linting

e7e13ec

yuit merged commit a1a2006 into master Apr 21, 2017

yuit deleted the master-jsxChildren branch April 21, 2017 17:02

aaronjensen mentioned this pull request Apr 21, 2017

property children not found in props of React element ... facebook/flow#1964

Closed

lostfictions mentioned this pull request Apr 29, 2017

Move TypeScript defs to own folder and add tests react-grid-layout/react-draggable#245

Merged

firewave-remo mentioned this pull request May 4, 2017

Error on type checking JSX children #15583

Closed

yuit mentioned this pull request May 4, 2017

[React] Include ElementChildrenAttribute for 2.3 DefinitelyTyped/DefinitelyTyped#16327

Merged

15 tasks

donaldpipowitch mentioned this pull request Jun 12, 2017

Suggestion: type checking for JSX children #13618

Closed

microsoft locked and limited conversation to collaborators Jun 21, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Master] Type checking JSX children #15160

[Master] Type checking JSX children #15160

yuit commented Apr 12, 2017 •

edited

Loading

mhegazy Apr 13, 2017

mhegazy Apr 13, 2017

mhegazy Apr 13, 2017

yuit commented Apr 17, 2017

RyanCavanaugh Apr 18, 2017

RyanCavanaugh Apr 18, 2017

RyanCavanaugh Apr 18, 2017

RyanCavanaugh Apr 18, 2017

yuit Apr 18, 2017

RyanCavanaugh Apr 18, 2017

RyanCavanaugh Apr 18, 2017

yuit Apr 18, 2017

RyanCavanaugh commented Apr 20, 2017

yuit commented Apr 21, 2017

donaldpipowitch commented Apr 21, 2017

RyanCavanaugh commented Apr 24, 2017

radix commented Jun 10, 2017

DanielRosenwasser commented Jun 11, 2017

radix commented Jun 11, 2017

donaldpipowitch commented Jun 12, 2017 •

edited

Loading

radix commented Jun 12, 2017

Hotell commented Jul 15, 2017

zackify commented Oct 2, 2017

[Master] Type checking JSX children #15160

[Master] Type checking JSX children #15160

Conversation

yuit commented Apr 12, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yuit commented Apr 17, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

RyanCavanaugh commented Apr 20, 2017

yuit commented Apr 21, 2017

donaldpipowitch commented Apr 21, 2017

RyanCavanaugh commented Apr 24, 2017

radix commented Jun 10, 2017

DanielRosenwasser commented Jun 11, 2017

radix commented Jun 11, 2017

donaldpipowitch commented Jun 12, 2017 • edited Loading

radix commented Jun 12, 2017

Hotell commented Jul 15, 2017

zackify commented Oct 2, 2017

yuit commented Apr 12, 2017 •

edited

Loading

donaldpipowitch commented Jun 12, 2017 •

edited

Loading