Merge pull request #22292 from tock203/fix-react-hyperscript

Fix react-hyperscript definition: Allow children to contain several types

types/react-hyperscript/index.d.ts

@@ -8,10 +8,17 @@ import { ComponentClass, StatelessComponent, ReactElement } from 'react';
 
 declare namespace h {}
 
-declare function h<P>(
+type Element = ReactElement<any> | string | number | null;
+
+declare function h(
+    componentOrTag: ComponentClass | StatelessComponent | string,
+    children?: ReadonlyArray<Element> | Element
+): ReactElement<any>;
+
+declare function h<P extends {[attr: string]: any}>(
     componentOrTag: ComponentClass<P> | StatelessComponent<P> | string,
-    properties?: P,
-    children?: ReadonlyArray<ReactElement<any>> | string
+    properties: P,
+    children?: ReadonlyArray<Element> | Element
 ): ReactElement<P>;
 
 export = h;

types/react-hyperscript/react-hyperscript-tests.ts

@@ -1,13 +1,17 @@
 import * as React from 'react';
 import * as h from 'react-hyperscript';
 
-class SomeComponent extends React.Component {
+interface PropTypes {
+    foo: string;
+}
+
+class SomeComponent extends React.Component<PropTypes> {
     render() {
         return React.createElement('div');
     }
 }
 
-const StatelessComponent = () => React.createElement('div');
+const StatelessComponent: React.StatelessComponent<PropTypes> = () => React.createElement('div');
 
 class MainComponent extends React.Component {
     render() {
@@ -25,7 +29,19 @@ class MainComponent extends React.Component {
                     h('a', {href: 'http://whatever.com'}, 'One list item')
                 ]),
                 h('li', 'Another list item')
-            ])
+            ]),
+            h('img', {src: 'https://example.com/some-image'}),
+            h('span', 1234)
+        ]);
+    }
+}
+
+class MixedComponent extends React.Component {
+    render() {
+        return h('div', {className: 'some class'}, [
+            null,
+            h('span', 'some tag'),
+            'some text node'
         ]);
     }
 }