Use React.ReactNode

Author: Mohsen Azimi

src/transforms/react-js-make-props-and-state-transform.ts

@@ -271,13 +271,7 @@ export function reactJSMakePropsAndStateInterfaceTransformFactoryFactory(typeChe
                 } else if (/object/.test(text)) {
                     result = ts.createKeywordTypeNode(ts.SyntaxKind.ObjectKeyword);
                 } else if (/node/.test(text)) {
-                    result = ts.createUnionOrIntersectionTypeNode(
-                        ts.SyntaxKind.UnionType, [
-                            ts.createKeywordTypeNode(ts.SyntaxKind.NumberKeyword),
-                            ts.createKeywordTypeNode(ts.SyntaxKind.StringKeyword),
-                            ts.createTypeReferenceNode('JSX.Element', [])
-                        ]
-                    )
+                    result = ts.createTypeReferenceNode('React.ReactNode', []);
                 } else if (/element/.test(text)) {
                     result = ts.createTypeReferenceNode('JSX.Element', []);
                 } else if (/func/.test(text)) {

test/react-js-make-props-and-state-transform/static-proptypes-many-props/output.tsx

@@ -8,7 +8,7 @@ export default class MyComponent extends React.Component<{
         number?: number;
         object?: object;
         string?: string;
-        node?: number | string | JSX.Element;
+        node?: React.ReactNode;
         element?: JSX.Element;
         anyRequired: any;
         arrayRequired: any[];
@@ -17,7 +17,7 @@ export default class MyComponent extends React.Component<{
         numberRequired: number;
         objectRequired: object;
         stringRequired: string;
-        nodeRequired: number | string | JSX.Element;
+        nodeRequired: React.ReactNode;
         elementRequired: JSX.Element;
     }, {}> {
     static propTypes = {