fix React.ComponentType ts translation

Summary: i must have missed that TypeScript has `ComponentType` as well. it seems like these behave similarly enough to make sense to use for translation purposes Reviewed By: pieterv Differential Revision: D45327183 fbshipit-source-id: 1f341794e0cfebc20cc1f84ae6afdba83363ff19
barthap · Apr 27, 2023 · 60f89ca · 60f89ca
1 parent 9c2d24c
commit 60f89ca
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 9 deletions.
diff --git a/...arser/js/flow-api-translator/__tests__/flowDefToTSDef/fixtures/types/react/global/spec.js b/...arser/js/flow-api-translator/__tests__/flowDefToTSDef/fixtures/types/react/global/spec.js
@@ -14,7 +14,7 @@ type T3 = React$Element<typeof Component>; // React.ReactElement<typeof Componen
 type T4 = React$ElementRef<typeof Component>; // React.ElementRef<typeof Component>
 type T5 = React$AbstractComponent<Props, HTMLElement>; // React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLElement>>
 type T6 = React$Context<Foo>; // React.Context<Foo>
-type T7 = React$ComponentType<Props>; // React.ForwardRefExoticComponent<Props & React.RefAttributes<unknown>>;
+type T7 = React$ComponentType<Props>; // React.ComponentType<Props>;
 type T8 = React$FragmentType; // React.Fragment
 type T9 = React$ElementConfig<typeof Component>; // JSX.LibraryManagedAttributes<typeof Component, React.ComponentProps<typeof Component>>
 type T10 = React$Ref<typeof Component>; // NonNullable<React.Ref<typeof Component> | string | number>

diff --git a/...api-translator/__tests__/flowDefToTSDef/fixtures/types/react/global/translate-result.shot b/...api-translator/__tests__/flowDefToTSDef/fixtures/types/react/global/translate-result.shot
@@ -20,7 +20,7 @@ type T5 = React.ForwardRefExoticComponent<
   Props & React.RefAttributes<HTMLElement>
 >;
 type T6 = React.Context<Foo>;
-type T7 = React.ForwardRefExoticComponent<Props & React.RefAttributes<unknown>>;
+type T7 = React.ComponentType<Props>;
 type T8 = React.Fragment;
 type T9 = JSX.LibraryManagedAttributes<
   typeof Component,

diff --git a/...arser/js/flow-api-translator/__tests__/flowDefToTSDef/fixtures/types/react/import/spec.js b/...arser/js/flow-api-translator/__tests__/flowDefToTSDef/fixtures/types/react/import/spec.js
@@ -17,7 +17,7 @@ type T4 = React.ElementRef<typeof Component>; // React.ElementRef<typeof Compone
 type T5 = React.AbstractComponent<Props>; // React.ForwardRefExoticComponent<Props & React.RefAttributes<unknown>>
 type T6 = React.AbstractComponent<Props, HTMLElement>; // React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLElement>>
 type T7 = React.Context<Foo>; // React.Context<Foo>
-type T8 = React.ComponentType<Props>; // React.ForwardRefExoticComponent<Props & React.RefAttributes<unknown>>
+type T8 = React.ComponentType<Props>; // React.ComponentType<Props>
 type T9 = React.Fragment; // React.Fragment
 type T10 = React.ElementConfig<typeof Component>; // JSX.LibraryManagedAttributes<typeof Component, React.ComponentProps<typeof Component>>
 type T11 = React.Ref<typeof Component>; // NonNullable<React.Ref<typeof Component> | string | number>

diff --git a/...api-translator/__tests__/flowDefToTSDef/fixtures/types/react/import/translate-result.shot b/...api-translator/__tests__/flowDefToTSDef/fixtures/types/react/import/translate-result.shot
@@ -21,7 +21,7 @@ type T6 = React.ForwardRefExoticComponent<
   Props & React.RefAttributes<HTMLElement>
 >;
 type T7 = React.Context<Foo>;
-type T8 = React.ForwardRefExoticComponent<Props & React.RefAttributes<unknown>>;
+type T8 = React.ComponentType<Props>;
 type T9 = React.Fragment;
 type T10 = JSX.LibraryManagedAttributes<
   typeof Component,

diff --git a/tools/hermes-parser/js/flow-api-translator/src/flowDefToTSDef.js b/tools/hermes-parser/js/flow-api-translator/src/flowDefToTSDef.js
@@ -2040,15 +2040,31 @@ const getTransforms = (
               typeParameters: undefined,
             };
           }
+          // React.ComponentType<Config> -> React.ComponentType<Config>
+          // React$ComponentType<Config> -> React.ComponentType<Config>
+          case 'React.ComponentType':
+          case 'React$ComponentType': {
+            return {
+              type: 'TSTypeReference',
+              typeName: {
+                type: 'TSQualifiedName',
+                left: getReactIdentifier(),
+                right: {
+                  type: 'Identifier',
+                  name: 'ComponentType',
+                },
+              },
+              typeParameters: {
+                type: 'TSTypeParameterInstantiation',
+                params: assertHasExactlyNTypeParameters(1),
+              },
+            };
+          }
           // React.AbstractComponent<Config> -> React.ForwardRefExoticComponent<Config & React.RefAttributes<unknown>>
           // React.AbstractComponent<Config, Instance> -> React.ForwardRefExoticComponent<Config & React.RefAttributes<Instance>>
           // React$AbstractComponent<Config, Instance> -> React.ForwardRefExoticComponent<Config & React.RefAttributes<Instance>>
-          // React.ComponentType<Config> -> React.ForwardRefExoticComponent<Config & React.RefAttributes<unknown>>
-          // React$ComponentType<Config> -> React.ForwardRefExoticComponent<Config & React.RefAttributes<unknown>>
           case 'React.AbstractComponent':
-          case 'React$AbstractComponent':
-          case 'React.ComponentType':
-          case 'React$ComponentType': {
+          case 'React$AbstractComponent': {
             const typeParameters = node.typeParameters;
             if (typeParameters == null || typeParameters.params.length === 0) {
               throw translationError(