Skip to content

[WIP] [React] Return type of React.SFC is wrong #23422

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
danielkcz wants to merge 2 commits into from
Closed

[WIP] [React] Return type of React.SFC is wrong #23422

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b77169e
React.SFC return type as ReactNode
danielkcz Feb 5, 2018
c4f82ec
Change Element to ReactNode
danielkcz Feb 6, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions types/react/index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
// Stéphane Goetz <https://github.com/onigoetz>
// Rich Seviora <https://github.com/richseviora>
// Josh Rutherford <https://github.com/theruther4d>
// Daniel K. <https://github.com/fredyc>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
// TypeScript Version: 2.3

Expand Down Expand Up @@ -167,7 +168,7 @@ declare namespace React {

// Should be Array<ReactNode> but type aliases cannot be recursive
type ReactFragment = {} | Array<ReactChild | any[] | boolean>;
type ReactNode = ReactChild | ReactFragment | ReactPortal | string | number | boolean | null | undefined;
type ReactNode = ReactChild | ReactFragment | ReactPortal | string | number | boolean | null;

//
// Top Level API
Expand Down Expand Up @@ -322,7 +323,7 @@ declare namespace React {

type SFC<P = {}> = StatelessComponent<P>;
interface StatelessComponent<P = {}> {
(props: P & { children?: ReactNode }, context?: any): ReactElement<any> | null;
(props: P & { children?: ReactNode }, context?: any): ReactNode;
Copy link
Copy Markdown
Contributor

@gaearon gaearon Feb 5, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is slightly wrong because it can't return undefined. ReactNode definition includes undefined.

Copy link
Copy Markdown
Contributor Author

@danielkcz danielkcz Feb 5, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Well, in that case, it's wrong altogether, because ReactNode is also used as a return type of render method for a class component.

Copy link
Copy Markdown
Contributor

@gaearon gaearon Feb 5, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fair enough.

propTypes?: ValidationMap<P>;
contextTypes?: ValidationMap<any>;
defaultProps?: Partial<P>;
Expand Down Expand Up @@ -3732,7 +3733,7 @@ declare namespace React {
declare global {
namespace JSX {
// tslint:disable-next-line:no-empty-interface
interface Element extends React.ReactElement<any> { }
interface Element extends React.ReactNode { }
interface ElementClass extends React.Component<any> {
render(): React.ReactNode;
}
Expand Down
3 changes: 3 additions & 0 deletions types/react/test/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -144,6 +144,9 @@ const StatelessComponent3: React.SFC<SCProps> =
// allows null as props
const StatelessComponent4: React.SFC = props => null;

// allows string as return value
const StatelessComponent5: React.SFC = props => "string";
Copy link
Copy Markdown
Collaborator

@JoshuaKGoldberg JoshuaKGoldberg Apr 9, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Might be useful to also include an $ExpectError for the undefined return.


// React.createFactory
const factory: React.CFactory<Props, ModernComponent> =
React.createFactory(ModernComponent);
Expand Down