Skip to content

[React] Include ElementChildrenAttribute for 2.3 #16327

Merged
yuit merged 2 commits into
masterfrom
UpdateReactToIncludeChildren
May 4, 2017
Merged

[React] Include ElementChildrenAttribute for 2.3 #16327
yuit merged 2 commits into
masterfrom
UpdateReactToIncludeChildren

Conversation

@yuit

@yuit yuit commented May 4, 2017 •
edited
Loading

Copy link
Copy Markdown
Contributor

This is a new feature in 2.3 as TypeScript will be able to check JSX.children

This is the update need for this feature to work microsoft/TypeScript#15160

Please fill in this template.

  • Use a meaningful title for the pull request. Include the name of the package modified.
  • Test the change in your own code. (Compile and run.)
  • Follow the advice from the readme.
  • Avoid common mistakes.
  • Run npm run lint package-name (or tsc if no tslint.json is present).

Select one of these and delete the others:

If adding a new definition:

  • The package does not provide its own types, and you can not add them.
  • If this is for an NPM package, match the name. If not, do not conflict with the name of an NPM package.
  • Create it with dts-gen --dt, not by basing it on an existing project.
  • tslint.json should be present, and tsconfig.json should have noImplicitAny, noImplicitThis, and strictNullChecks set to true.

If changing an existing definition:

  • Provide a URL to documentation or source code which provides context for the suggested changes: <>
  • Increase the version number in the header if appropriate.
  • If you are making substantial changes, consider adding a tslint.json containing { "extends": "dslint/dt.json" }.

If removing a declaration:

  • If a package was never on DefinitelyTyped, you don't need to do anything. (If you wrote a package and provided types, you don't need to register it with us.)
  • Delete the package's directory.
  • Add it to notNeededPackages.json.

@yuit
Include ElementChildrenAttribute
13b5f66 
This is a new feature in 2.3 as TypeScript will be able to check JSX.children
@dt-bot

dt-bot commented May 4, 2017

Copy link
Copy Markdown
Member

types/react/index.d.ts

to authors (@pspeter3 @vsiao @johnnyreilly @bbenezech @pzavolinsky @digiguru @ericanderson AssureSign (account can't be detected) Microsoft (account can't be detected)). Could you review this PR?
👍 or 👎?

Checklist

  • pass the Travis CI test?

@yuit yuit mentioned this pull request May 4, 2017
Closed
@mhegazy

mhegazy commented May 4, 2017

Copy link
Copy Markdown
Contributor

@yui can you rebase against master

@yuit yuit merged commit c4890a7 into master May 4, 2017
@yuit yuit deleted the UpdateReactToIncludeChildren branch May 4, 2017 23:15
@shiftkey

shiftkey commented May 5, 2017

Copy link
Copy Markdown
Contributor

@yuit this change broke previously-valid TSX code and I'm not sure what the right way is to fix it. I've uploaded a repro to demonstrate the issue here: https://github.com/shiftkey/react-types-children

@yuit

yuit commented May 5, 2017

Copy link
Copy Markdown
Contributor Author

@shiftkey Thanks for trying this out!..... I will put simplified version of the code here for reference.

Original Code

import * as React from 'react'

interface IRowProps {
     readonly children?: ReadonlyArray<JSX.Element>;
}

export class Row extends React.Component<IRowProps, void> {
  public render() {
    return (
      <div>
        {this.props.children}
      </div>
    )
  }
}

let row = <Row>
            <span>things go here</span>
        </Row>

Error

 error TS2322: Type '{ children: Element; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Row> & Readonly<{ children?: ReactNode; }> & Reado...'.
  Type '{ children: Element; }' is not assignable to type 'Readonly<IRowProps>'.
    Types of property 'children' are incompatible.
      Type 'Element' is not assignable to type 'ReadonlyArray<Element> | undefined'.
        Type 'Element' is not assignable to type 'ReadonlyArray<Element>'.
          Property 'length' is missing in type 'Element'.

Explaination
The error is because in an interface IRowProps "children" property is declared to be a readonly array of JSX.Element but when declared in let row..., "children" property is just a JSX.Element (e.g it is not wrapped as an array with one element)

Fix
When you declared property IRowProps you will want "children" to be either Array of Jsx.Element

interface IRowProps {
     readonly children?: ReadonlyArray<JSX.Element> | JSX.Element;
}

DABH pushed a commit to DABH/DefinitelyTyped that referenced this pull request May 15, 2017
@yuit @DABH
Merge pull request DefinitelyTyped#16327 from DefinitelyTyped/UpdateR…
764442d 
…eactToIncludeChildren

[React] Include ElementChildrenAttribute for 2.3
@AlgusDark

AlgusDark commented May 28, 2017

Copy link
Copy Markdown

@yuit So, If I have something like:

export const MenuList: React.SFC<React.HTMLProps<HTMLUListElement>> = (props) => {
    return (
        <ul {...props} />
    )
}

How I can type force MenuList to only accept <li> elements? (single, or multiple).

I've been trying to figure it out, but without success, thanks in advance.

@Hotell

Hotell commented Nov 22, 2017

Copy link
Copy Markdown
Contributor

@AlgusDark that's unfortunately not supported.

You can constrain children only to be JSX.Element | Array<JSX.Element> | string | number | () => JSX.Element and so on, no capability to explicitly restrain that children can be only specific DOM element or ReactElement ( although this is possible with Flow >= 0.56 )

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

6 participants

@yuit @dt-bot @mhegazy @shiftkey @AlgusDark @Hotell