From 6922165cbb9ddd22192e3b6937ffa84ddc311f55 Mon Sep 17 00:00:00 2001
From: Alexander Chudesnov <chudesnov@gmail.com>
Date: Wed, 9 Nov 2016 20:49:55 +0300
Subject: [PATCH] =?UTF-8?q?Allow=20children=20in=20stateless=20components?=
 =?UTF-8?q?=E2=80=99=20props?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This allows passing children to `StatelessComponent<P>` exactly like base components without the need to use React.Props<T> or extending the P interface with an explicit 'children' property:

# Before
````typescript
    type FooProps = {
      bar: number;
    }
    const Foo: React.SFC<FooProps> = props => (
      <div>
        {props.children} = {props.bar} // error TS2459: Type 'FooProps' has no property 'children' and no string index signature.
      </div>
    );
````

# After
````typescript
    type FooProps = {
      bar: number;
    }
    const Foo: React.SFC<FooProps> = props => (
      <div>
        {props.children} = {props.bar}
      </div>
    );

    <Foo bar="42">6×9</Foo> // <div>6×9 = 42</div>
````
---
 react/index.d.ts          |  2 +-
 react/react-tests.ts      |  4 ++++
 react/react-tsx-tests.tsx | 10 ++++++++++
 3 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/react/index.d.ts b/react/index.d.ts
index 8d5edbab51..dd2add0e0e 100644
--- a/react/index.d.ts
+++ b/react/index.d.ts
@@ -201,7 +201,7 @@ declare namespace React {
 
     type SFC<P> = StatelessComponent<P>;
     interface StatelessComponent<P> {
-        (props: P, context?: any): ReactElement<any>;
+        (props: P & { children?: ReactNode }, context?: any): ReactElement<any>;
         propTypes?: ValidationMap<P>;
         contextTypes?: ValidationMap<any>;
         defaultProps?: P;
diff --git a/react/react-tests.ts b/react/react-tests.ts
index 7cdecd9e86..ae9538b294 100644
--- a/react/react-tests.ts
+++ b/react/react-tests.ts
@@ -152,6 +152,10 @@ StatelessComponent2.defaultProps = {
     foo: 42
 };
 
+var StatelessComponent3: React.SFC<SCProps> =
+    // allows usage of props.children
+    props => React.DOM.div(null, props.foo, props.children);
+
 // React.createFactory
 var factory: React.CFactory<Props, ModernComponent> =
     React.createFactory(ModernComponent);
diff --git a/react/react-tsx-tests.tsx b/react/react-tsx-tests.tsx
index 3756659a53..f5437f751b 100644
--- a/react/react-tsx-tests.tsx
+++ b/react/react-tsx-tests.tsx
@@ -13,3 +13,13 @@ StatelessComponent.defaultProps = {
 };
 
 <StatelessComponent />;
+
+var StatelessComponent2: React.SFC<SCProps> = ({ foo, children }) => {
+    return <div>{ foo }{ children }</div>;
+};
+StatelessComponent2.displayName = "StatelessComponent4";
+StatelessComponent2.defaultProps = {
+    foo: 42
+};
+
+<StatelessComponent2>24</StatelessComponent2>;