handle React.ChildrenArray in ts translation

Summary:
this isn't 100% correct, but good enough for most cases. in flow this type is recursive: https://github.com/facebook/flow/blob/main/lib/react.js#L278
we don't yet have a good way to add a type like this during translation. added TODO for reminder to update this when we can.

Reviewed By: pieterv

Differential Revision: D44845991

fbshipit-source-id: deb53aa61989acb41e4d5b0307d18a2106374691

tools/hermes-parser/js/flow-api-translator/__tests__/flowDefToTSDef/fixtures/types/react/global/spec.js

@@ -21,6 +21,7 @@ type T10 = React$Ref<typeof Component>; // NonNullable<React.Ref<typeof Componen
 type T11 = React$Key; // React.Key
 type T12 = React$Component<Props, {}>; // React.Component<Props, {}>
 type T13 = React$ElementType; // React.ElementType
+type T14 = React$ChildrenArray<T>; // T | ReadonlyArray<T>
 
 type Props = {A: string};
 declare function Component(props: Props): React$Node;

tools/hermes-parser/js/flow-api-translator/__tests__/flowDefToTSDef/fixtures/types/react/global/translate-result.shot

@@ -30,6 +30,7 @@ type T10 = NonNullable<React.Ref<typeof Component> | string | number>;
 type T11 = React.Key;
 type T12 = React.Component<Props, {}>;
 type T13 = React.ElementType;
+type T14 = T | ReadonlyArray<T>;
 type Props = {A: string};
 declare function Component(props: Props): React.ReactNode;
 "

tools/hermes-parser/js/flow-api-translator/__tests__/flowDefToTSDef/fixtures/types/react/import/spec.js

@@ -24,6 +24,7 @@ type T11 = React.Ref<typeof Component>; // NonNullable<React.Ref<typeof Componen
 type T12 = React.Key; // React.Key
 type T13 = React.Component<Props, {}>; // React.Component<Props, {}>
 type T14 = React.ElementType; // React.ElementType
+type T15 = React.ChildrenArray<T>; // T | ReadonlyArray<T>
 
 type Props = {A: string};
 declare function Component(props: Props): React.Node;

tools/hermes-parser/js/flow-api-translator/__tests__/flowDefToTSDef/fixtures/types/react/import/translate-result.shot

@@ -31,6 +31,7 @@ type T11 = NonNullable<React.Ref<typeof Component> | string | number>;
 type T12 = React.Key;
 type T13 = React.Component<Props, {}>;
 type T14 = React.ElementType;
+type T15 = T | ReadonlyArray<T>;
 type Props = {A: string};
 declare function Component(props: Props): React.ReactNode;
 "

tools/hermes-parser/js/flow-api-translator/src/flowDefToTSDef.js

@@ -1759,6 +1759,33 @@ const getTransforms = (
         };
 
         switch (fullTypeName) {
+          // TODO: In flow this is `ChildrenArray<T> = T | $ReadOnlyArray<ChildrenArray<T>>`.
+          // The recursive nature of it is rarely needed, so we're simplifying this for now
+          // but omitting that aspect. Once we're able to provide utility types for our translations,
+          // we should update this.
+          // React.ChildrenArray<T> -> T | ReadonlyArray<T>
+          // React$ChildrenArray<T> -> T | ReadonlyArray<T>
+          case 'React.ChildrenArray':
+          case 'React$ChildrenArray': {
+            const [param] = assertHasExactlyNTypeParameters(1);
+            return {
+              type: 'TSUnionType',
+              types: [
+                param,
+                {
+                  type: 'TSTypeReference',
+                  typeName: {
+                    type: 'Identifier',
+                    name: 'ReadonlyArray',
+                  },
+                  typeParameters: {
+                    type: 'TSTypeParameterInstantiation',
+                    params: [param],
+                  },
+                },
+              ],
+            };
+          }
           // React.Component<A,B> -> React.Component<A,B>
           // React$Component<A,B> -> React.Component<A,B>
           case 'React.Component':
@@ -1796,6 +1823,7 @@ const getTransforms = (
               },
             };
           }
+
           // React.Context<A> -> React.Context<A>
           // React$Context<A> -> React.Context<A>
           case 'React$Context':