flow-api-translator 0.10.1 → 0.11.0

package/dist/flowDefToTSDef.js.flow

@@ -13,25 +13,44 @@
 import type {ObjectWithLoc} from 'hermes-estree';
 import * as FlowESTree from 'hermes-estree';
 import type {ScopeManager} from 'hermes-eslint';
-import {cloneJSDocCommentsToNewNode as cloneJSDocCommentsToNewNodeOriginal} from 'hermes-transform';
+import {
+  cloneJSDocCommentsToNewNode as cloneJSDocCommentsToNewNodeOriginal,
+  makeCommentOwnLine as makeCommentOwnLineOriginal,
+} from 'hermes-transform';
 import * as TSESTree from './utils/ts-estree-ast-types';
 import {
+  buildCodeFrame,
   translationError as translationErrorBase,
   unexpectedTranslationError as unexpectedTranslationErrorBase,
 } from './utils/ErrorUtils';
 import {removeAtFlowFromDocblock} from './utils/DocblockUtils';
+import type {TranslationOptions} from './utils/TranslationUtils';
+import {EOL} from 'os';
+
+type DeclarationOrUnsupported<T> = T | TSESTree.TSTypeAliasDeclaration;
 
 const cloneJSDocCommentsToNewNode =
   // $FlowExpectedError[incompatible-cast] - trust me this re-type is 100% safe
   (cloneJSDocCommentsToNewNodeOriginal: (mixed, mixed) => void);
 
+const makeCommentOwnLine =
+  // $FlowExpectedError[incompatible-cast] - trust me this re-type is 100% safe
+  (makeCommentOwnLineOriginal: (string, mixed) => string);
+
 const VALID_REACT_IMPORTS = new Set<string>(['React', 'react']);
 
+function isValidReactImportOrGlobal(id: FlowESTree.Identifier): boolean {
+  return VALID_REACT_IMPORTS.has(id.name) || id.name.startsWith('React$');
+}
+
+let shouldAddReactImport: boolean | null = null;
+
 export function flowDefToTSDef(
   originalCode: string,
   ast: FlowESTree.Program,
   scopeManager: ScopeManager,
-): TSESTree.Program {
+  opts: TranslationOptions,
+): [TSESTree.Program, string] {
   const tsBody: Array<TSESTree.ProgramStatement> = [];
   const tsProgram: TSESTree.Program = {
     type: 'Program',
@@ -41,7 +60,9 @@ export function flowDefToTSDef(
       ast.docblock == null ? null : removeAtFlowFromDocblock(ast.docblock),
   };
 
-  const transform = getTransforms(originalCode, scopeManager);
+  shouldAddReactImport = null;
+
+  const [transform, code] = getTransforms(originalCode, scopeManager, opts);
 
   for (const node of ast.body) {
     if (node.type in transform) {
@@ -58,26 +79,117 @@ export function flowDefToTSDef(
       throw unexpectedTranslationErrorBase(
         node,
         `Unexpected node type ${node.type}`,
-        {code: originalCode},
+        {code},
       );
     }
   }
 
-  return tsProgram;
+  if (shouldAddReactImport === true) {
+    tsBody.unshift({
+      type: 'ImportDeclaration',
+      assertions: [],
+      source: {
+        type: 'Literal',
+        value: 'react',
+        raw: "'react'",
+      },
+      specifiers: [
+        {
+          type: 'ImportNamespaceSpecifier',
+          local: {
+            type: 'Identifier',
+            name: 'React',
+          },
+        },
+      ],
+      importKind: 'value',
+    });
+  }
+
+  return [tsProgram, code];
 }
 
-const getTransforms = (code: string, scopeManager: ScopeManager) => {
+const getTransforms = (
+  originalCode: string,
+  scopeManager: ScopeManager,
+  opts: TranslationOptions,
+) => {
+  let code = originalCode;
   function translationError(node: ObjectWithLoc, message: string) {
     return translationErrorBase(node, message, {code});
   }
   function unexpectedTranslationError(node: ObjectWithLoc, message: string) {
     return unexpectedTranslationErrorBase(node, message, {code});
   }
-  function unsupportedTranslationError(node: ObjectWithLoc, thing: string) {
-    return translationError(
-      node,
-      `Unsupported feature: Translating "${thing}" is currently not supported.`,
-    );
+  function unsupportedFeatureMessage(thing: string) {
+    return `Unsupported feature: Translating "${thing}" is currently not supported.`;
+  }
+  function buildCodeFrameForComment(node: ObjectWithLoc, message: string) {
+    return buildCodeFrame(node, message, code, false);
+  }
+  function addErrorComment(node: TSESTree.Node, message: string): void {
+    const comment = {
+      type: 'Block',
+      value: `*${EOL} * ${message.replace(
+        new RegExp(EOL, 'g'),
+        `${EOL} * `,
+      )}${EOL}*`,
+      leading: true,
+      printed: false,
+    };
+
+    code = makeCommentOwnLine(code, comment);
+
+    // $FlowExpectedError[prop-missing]
+    // $FlowExpectedError[cannot-write]
+    node.comments ??= [];
+    // $FlowExpectedError[prop-missing]
+    // $FlowExpectedError[incompatible-cast]
+    (node.comments: Array<TSESTree.Comment>).push(comment);
+  }
+  function unsupportedAnnotation(
+    node: ObjectWithLoc,
+    thing: string,
+  ): TSESTree.TSAnyKeyword {
+    const message = unsupportedFeatureMessage(thing);
+    if (opts.recoverFromErrors) {
+      const codeFrame = buildCodeFrameForComment(node, message);
+      const newNode = {
+        type: 'TSAnyKeyword',
+      };
+      addErrorComment(newNode, codeFrame);
+      return newNode;
+    }
+
+    throw translationError(node, message);
+  }
+  function unsupportedDeclaration(
+    node: ObjectWithLoc,
+    thing: string,
+    id: FlowESTree.Identifier,
+    declare: boolean = false,
+    typeParameters: FlowESTree.TypeParameterDeclaration | null = null,
+  ): TSESTree.TSTypeAliasDeclaration {
+    const message = unsupportedFeatureMessage(thing);
+    if (opts.recoverFromErrors) {
+      const codeFrame = buildCodeFrameForComment(node, message);
+      const newNode = {
+        type: 'TSTypeAliasDeclaration',
+        declare,
+        id: transform.Identifier(id, false),
+        typeAnnotation: {
+          type: 'TSAnyKeyword',
+        },
+        typeParameters:
+          typeParameters == null
+            ? undefined
+            : transform.TypeParameterDeclaration(typeParameters),
+      };
+      addErrorComment(newNode, codeFrame);
+      return newNode;
+    }
+
+    throw translationError(node, message);
   }
 
   const topScope = (() => {
@@ -92,7 +204,20 @@ const getTransforms = (code: string, scopeManager: ScopeManager) => {
   })();
 
   function isReactImport(id: FlowESTree.Identifier): boolean {
-    let currentScope = scopeManager.acquire(id);
+    let currentScope = (() => {
+      let scope = null;
+      let node: FlowESTree.ESNode = id;
+      while (!scope && node) {
+        scope = scopeManager.acquire(node, true);
+        node = node.parent;
+      }
+
+      return scope;
+    })();
+
+    if (currentScope == null) {
+      throw new Error('unable to resolve scope');
+    }
 
     const variableDef = (() => {
       while (currentScope != null) {
@@ -105,9 +230,10 @@ const getTransforms = (code: string, scopeManager: ScopeManager) => {
       }
     })();
 
-    // No variable found, it must be global. Using the `React` variable is enough in this case.
+    // No variable found, it is not imported.
+    // It could be a global though if isValidReactImportOrGlobal returns true.
     if (variableDef == null) {
-      return VALID_REACT_IMPORTS.has(id.name) || id.name.startsWith('React$');
+      return false;
     }
 
     const def = variableDef.defs[0];
@@ -138,6 +264,407 @@ const getTransforms = (code: string, scopeManager: ScopeManager) => {
     return false;
   }
 
+  function EnumImpl(
+    node: FlowESTree.EnumDeclaration | FlowESTree.DeclareEnum,
+  ): DeclarationOrUnsupported<
+    [TSESTree.TSEnumDeclaration, TSESTree.TSModuleDeclaration],
+  > {
+    const body = node.body;
+    if (body.type === 'EnumSymbolBody') {
+      /*
+      There's unfortunately no way for us to support this in a clean way.
+      We can get really close using this code:
+      ```
+      declare namespace SymbolEnum {
+          export const member1: unique symbol;
+          export type member1 = typeof member1;
+
+          export const member2: unique symbol;
+          export type member2 = typeof member2;
+      }
+      type SymbolEnum = typeof SymbolEnum[keyof typeof SymbolEnum];
+      ```
+
+      However as explained in https://github.com/microsoft/TypeScript/issues/43657:
+      "A unique symbol type is never transferred from one declaration to another through inference."
+      This intended behaviour in TS means that the usage of the fake-enum would look like this:
+      ```
+      const value: SymbolEnum.member1 = SymbolEnum.member1;
+      //           ^^^^^^^^^^^^^^^^^^ required to force TS to retain the information
+      ```
+      Which is really clunky and shitty. It definitely works, but ofc it's not good.
+      We can go with this design if users are okay with it!
+
+      Considering how rarely used symbol enums are ATM, let's just put a pin in it for now.
+      */
+      return unsupportedDeclaration(
+        node,
+        'symbol enums',
+        node.id,
+        FlowESTree.isDeclareEnum(node),
+      );
+    }
+    if (body.type === 'EnumBooleanBody') {
+      /*
+      TODO - TS enums only allow strings or numbers as their values - not booleans.
+      This means we need a non-ts-enum representation of the enum.
+      We can support boolean enums using a construct like this:
+      ```ts
+      declare namespace BooleanEnum {
+          export const member1: true;
+          export type member1 = typeof member1;
+
+          export const member2: false;
+          export type member2 = typeof member1;
+      }
+      declare type BooleanEnum = boolean;
+      ```
+
+      But it's pretty clunky and ugly.
+      Considering how rarely used boolean enums are ATM, let's just put a pin in it for now.
+      */
+      return unsupportedDeclaration(
+        node,
+        'boolean enums',
+        node.id,
+        FlowESTree.isDeclareEnum(node),
+      );
+    }
+
+    const members: Array<TSESTree.TSEnumMemberNonComputedName> = [];
+    for (const member of body.members) {
+      switch (member.type) {
+        case 'EnumDefaultedMember': {
+          if (body.type === 'EnumNumberBody') {
+            // this should be impossible!
+            throw unexpectedTranslationError(
+              member,
+              'Unexpected defaulted number enum member',
+            );
+          }
+          members.push({
+            type: 'TSEnumMember',
+            computed: false,
+            id: transform.Identifier(member.id, false),
+            initializer: ({
+              type: 'Literal',
+              raw: `"${member.id.name}"`,
+              value: member.id.name,
+            }: TSESTree.StringLiteral),
+          });
+          break;
+        }
+
+        case 'EnumNumberMember':
+        case 'EnumStringMember':
+          members.push({
+            type: 'TSEnumMember',
+            computed: false,
+            id: transform.Identifier(member.id, false),
+            initializer:
+              member.init.literalType === 'string'
+                ? transform.StringLiteral(member.init)
+                : transform.NumericLiteral(member.init),
+          });
+      }
+    }
+
+    const bodyRepresentationType =
+      body.type === 'EnumNumberBody'
+        ? {type: 'TSNumberKeyword'}
+        : {type: 'TSStringKeyword'};
+
+    const enumName = transform.Identifier(node.id, false);
+    return [
+      {
+        type: 'TSEnumDeclaration',
+        const: false,
+        declare: true,
+        id: enumName,
+        members,
+      },
+      // flow also exports `.cast`, `.isValid`, `.members` and `.getName` for enums
+      // we can use declaration merging to declare these functions on the enum:
+      /*
+      declare enum Foo {
+        A = 1,
+        B = 2,
+      }
+      declare namespace Foo {
+        export function cast(value: number | null | undefined): Foo;
+        export function isValid(value: number | null | undefined): value is Foo;
+        export function members(): IterableIterator<Foo>;
+        export function getName(value: Foo): string;
+      }
+      */
+      {
+        type: 'TSModuleDeclaration',
+        declare: true,
+        id: enumName,
+        body: {
+          type: 'TSModuleBlock',
+          body: [
+            // export function cast(value: number | null | undefined): Foo
+            {
+              type: 'ExportNamedDeclaration',
+              declaration: {
+                type: 'TSDeclareFunction',
+                id: {
+                  type: 'Identifier',
+                  name: 'cast',
+                },
+                generator: false,
+                expression: false,
+                async: false,
+                params: [
+                  {
+                    type: 'Identifier',
+                    name: 'value',
+                    typeAnnotation: {
+                      type: 'TSTypeAnnotation',
+                      typeAnnotation: {
+                        type: 'TSUnionType',
+                        types: [
+                          bodyRepresentationType,
+                          {
+                            type: 'TSNullKeyword',
+                          },
+                          {
+                            type: 'TSUndefinedKeyword',
+                          },
+                        ],
+                      },
+                    },
+                  },
+                ],
+                returnType: {
+                  type: 'TSTypeAnnotation',
+                  typeAnnotation: {
+                    type: 'TSTypeReference',
+                    typeName: enumName,
+                  },
+                },
+              },
+              specifiers: [],
+              source: null,
+              exportKind: 'value',
+              assertions: [],
+            },
+            // export function isValid(value: number | null | undefined): value is Foo;
+            {
+              type: 'ExportNamedDeclaration',
+              declaration: {
+                type: 'TSDeclareFunction',
+                id: {
+                  type: 'Identifier',
+                  name: 'isValid',
+                },
+                generator: false,
+                expression: false,
+                async: false,
+                params: [
+                  {
+                    type: 'Identifier',
+                    name: 'value',
+                    typeAnnotation: {
+                      type: 'TSTypeAnnotation',
+                      typeAnnotation: {
+                        type: 'TSUnionType',
+                        types: [
+                          bodyRepresentationType,
+                          {
+                            type: 'TSNullKeyword',
+                          },
+                          {
+                            type: 'TSUndefinedKeyword',
+                          },
+                        ],
+                      },
+                    },
+                  },
+                ],
+                returnType: {
+                  type: 'TSTypeAnnotation',
+                  typeAnnotation: {
+                    type: 'TSTypePredicate',
+                    asserts: false,
+                    parameterName: {
+                      type: 'Identifier',
+                      name: 'value',
+                    },
+                    typeAnnotation: {
+                      type: 'TSTypeAnnotation',
+                      typeAnnotation: {
+                        type: 'TSTypeReference',
+                        typeName: enumName,
+                      },
+                    },
+                  },
+                },
+              },
+              specifiers: [],
+              source: null,
+              exportKind: 'value',
+              assertions: [],
+            },
+            // export function members(): IterableIterator<Foo>;
+            {
+              type: 'ExportNamedDeclaration',
+              declaration: {
+                type: 'TSDeclareFunction',
+                id: {
+                  type: 'Identifier',
+                  name: 'members',
+                },
+                generator: false,
+                expression: false,
+                async: false,
+                params: [],
+                returnType: {
+                  type: 'TSTypeAnnotation',
+                  typeAnnotation: {
+                    type: 'TSTypeReference',
+                    typeName: {
+                      type: 'Identifier',
+                      name: 'IterableIterator',
+                    },
+                    typeParameters: {
+                      type: 'TSTypeParameterInstantiation',
+                      params: [
+                        {
+                          type: 'TSTypeReference',
+                          typeName: enumName,
+                        },
+                      ],
+                    },
+                  },
+                },
+              },
+              specifiers: [],
+              source: null,
+              exportKind: 'value',
+              assertions: [],
+            },
+            // export function getName(value: Foo): string;
+            {
+              type: 'ExportNamedDeclaration',
+              declaration: {
+                type: 'TSDeclareFunction',
+                id: {
+                  type: 'Identifier',
+                  name: 'getName',
+                },
+                generator: false,
+                expression: false,
+                async: false,
+                params: [
+                  {
+                    type: 'Identifier',
+                    name: 'value',
+                    typeAnnotation: {
+                      type: 'TSTypeAnnotation',
+                      typeAnnotation: {
+                        type: 'TSTypeReference',
+                        typeName: enumName,
+                      },
+                    },
+                  },
+                ],
+                returnType: {
+                  type: 'TSTypeAnnotation',
+                  typeAnnotation: {
+                    type: 'TSStringKeyword',
+                  },
+                },
+              },
+              specifiers: [],
+              source: null,
+              exportKind: 'value',
+              assertions: [],
+            },
+          ],
+        },
+      },
+    ];
+  }
+
+  const getPlaceholderNameForTypeofImport: () => string = (() => {
+    let typeof_import_count = 0;
+    return () => `$$IMPORT_TYPEOF_${++typeof_import_count}$$`;
+  })();
+
+  const transformTypeAnnotationType = (
+    node: FlowESTree.TypeAnnotationType,
+  ): TSESTree.TypeNode => {
+    switch (node.type) {
+      case 'AnyTypeAnnotation':
+        return transform.AnyTypeAnnotation(node);
+      case 'ArrayTypeAnnotation':
+        return transform.ArrayTypeAnnotation(node);
+      case 'BigIntLiteralTypeAnnotation':
+        return transform.BigIntLiteralTypeAnnotation(node);
+      case 'BigIntTypeAnnotation':
+        return transform.BigIntTypeAnnotation(node);
+      case 'BooleanLiteralTypeAnnotation':
+        return transform.BooleanLiteralTypeAnnotation(node);
+      case 'BooleanTypeAnnotation':
+        return transform.BooleanTypeAnnotation(node);
+      case 'EmptyTypeAnnotation':
+        return transform.EmptyTypeAnnotation(node);
+      case 'ExistsTypeAnnotation':
+        return transform.ExistsTypeAnnotation(node);
+      case 'FunctionTypeAnnotation':
+        return transform.FunctionTypeAnnotation(node);
+      case 'GenericTypeAnnotation':
+        return transform.GenericTypeAnnotation(node);
+      case 'IndexedAccessType':
+        return transform.IndexedAccessType(node);
+      case 'InterfaceTypeAnnotation':
+        return transform.InterfaceTypeAnnotation(node);
+      case 'IntersectionTypeAnnotation':
+        return transform.IntersectionTypeAnnotation(node);
+      case 'MixedTypeAnnotation':
+        return transform.MixedTypeAnnotation(node);
+      case 'NullLiteralTypeAnnotation':
+        return transform.NullLiteralTypeAnnotation(node);
+      case 'NullableTypeAnnotation':
+        return transform.NullableTypeAnnotation(node);
+      case 'NumberLiteralTypeAnnotation':
+        return transform.NumberLiteralTypeAnnotation(node);
+      case 'NumberTypeAnnotation':
+        return transform.NumberTypeAnnotation(node);
+      case 'ObjectTypeAnnotation':
+        return transform.ObjectTypeAnnotation(node);
+      case 'OptionalIndexedAccessType':
+        return transform.OptionalIndexedAccessType(node);
+      case 'QualifiedTypeIdentifier':
+        return transform.QualifiedTypeIdentifier(node);
+      case 'StringLiteralTypeAnnotation':
+        return transform.StringLiteralTypeAnnotation(node);
+      case 'StringTypeAnnotation':
+        return transform.StringTypeAnnotation(node);
+      case 'SymbolTypeAnnotation':
+        return transform.SymbolTypeAnnotation(node);
+      case 'ThisTypeAnnotation':
+        return transform.ThisTypeAnnotation(node);
+      case 'TupleTypeAnnotation':
+        return transform.TupleTypeAnnotation(node);
+      case 'TupleTypeLabeledElement':
+      case 'TupleTypeSpreadElement':
+        return unsupportedAnnotation(node, node.type);
+      case 'TypeofTypeAnnotation':
+        return transform.TypeofTypeAnnotation(node);
+      case 'UnionTypeAnnotation':
+        return transform.UnionTypeAnnotation(node);
+      case 'VoidTypeAnnotation':
+        return transform.VoidTypeAnnotation(node);
+      case 'TypePredicate':
+        return unsupportedAnnotation(node, node.type);
+      default:
+        throw unexpectedTranslationError(node, `Unhandled type ${node.type}`);
+    }
+  };
+
   const transform = {
     AnyTypeAnnotation(
       _node: FlowESTree.AnyTypeAnnotation,
@@ -151,7 +678,7 @@ const getTransforms = (code: string, scopeManager: ScopeManager) => {
     ): TSESTree.TSArrayType {
       return {
         type: 'TSArrayType',
-        elementType: transform.TypeAnnotationType(node.elementType),
+        elementType: transformTypeAnnotationType(node.elementType),
       };
     },
     BigIntLiteral(node: FlowESTree.BigIntLiteral): TSESTree.BigIntLiteral {
@@ -233,13 +760,16 @@ const getTransforms = (code: string, scopeManager: ScopeManager) => {
     },
     DeclareClass(
       node: FlowESTree.DeclareClass,
-    ): TSESTree.ClassDeclarationWithName {
+    ): DeclarationOrUnsupported<TSESTree.ClassDeclarationWithName> {
       const classMembers: Array<TSESTree.ClassElement> = [];
       const transformedBody = transform.ObjectTypeAnnotation(node.body);
       if (transformedBody.type !== 'TSTypeLiteral') {
-        throw translationError(
+        return unsupportedDeclaration(
           node.body,
           'Spreads in declare class are not allowed',
+          node.id,
+          true,
+          node.typeParameters,
         );
       }
       for (const member of transformedBody.members) {
@@ -359,9 +889,12 @@ const getTransforms = (code: string, scopeManager: ScopeManager) => {
             ```
             Let's put a pin in it for now and deal with it later if the need arises.
             */
-            throw unsupportedTranslationError(
+            return unsupportedDeclaration(
               node.body.callProperties[0] ?? node.body,
               'call signatures on classes',
+              node.id,
+              true,
+              node.typeParameters,
             );
           }
 
@@ -406,12 +939,14 @@ const getTransforms = (code: string, scopeManager: ScopeManager) => {
       node: FlowESTree.DeclareExportDeclaration,
     ):
       | TSESTree.ExportNamedDeclaration
+      | Array<TSESTree.ExportNamedDeclaration>
       | TSESTree.ExportDefaultDeclaration
       | [
           (
             | TSESTree.VariableDeclaration
             | TSESTree.ClassDeclaration
             | TSESTree.TSDeclareFunction
+            | TSESTree.TSTypeAliasDeclaration
           ),
           TSESTree.ExportDefaultDeclaration,
         ] {
@@ -543,7 +1078,7 @@ const getTransforms = (code: string, scopeManager: ScopeManager) => {
                       typeAnnotation: {
                         type: 'TSTypeAnnotation',
                         typeAnnotation:
-                          transform.TypeAnnotationType(declaration),
+                          transformTypeAnnotationType(declaration),
                       },
                     },
                     init: null,
@@ -580,45 +1115,73 @@ const getTransforms = (code: string, scopeManager: ScopeManager) => {
             }: TSESTree.ExportNamedDeclarationWithoutSourceWithMultiple);
           }
 
-          const {declaration, exportKind} = (() => {
+          const declarations = (() => {
             switch (node.declaration.type) {
               case 'DeclareClass':
-                return {
-                  declaration: transform.DeclareClass(node.declaration),
-                  exportKind: 'value',
-                };
+                return [
+                  {
+                    declaration: transform.DeclareClass(node.declaration),
+                    exportKind: 'value',
+                  },
+                ];
               case 'DeclareFunction':
-                return {
-                  declaration: transform.DeclareFunction(node.declaration),
-                  exportKind: 'value',
-                };
+                return [
+                  {
+                    declaration: transform.DeclareFunction(node.declaration),
+                    exportKind: 'value',
+                  },
+                ];
               case 'DeclareInterface':
-                return {
-                  declaration: transform.DeclareInterface(node.declaration),
-                  exportKind: 'type',
-                };
+                return [
+                  {
+                    declaration: transform.DeclareInterface(node.declaration),
+                    exportKind: 'type',
+                  },
+                ];
               case 'DeclareOpaqueType':
-                return {
-                  declaration: transform.DeclareOpaqueType(node.declaration),
-                  exportKind: 'type',
-                };
+                return [
+                  {
+                    declaration: transform.DeclareOpaqueType(node.declaration),
+                    exportKind: 'type',
+                  },
+                ];
               case 'DeclareVariable':
-                return {
-                  declaration: transform.DeclareVariable(node.declaration),
-                  exportKind: 'value',
-                };
+                return [
+                  {
+                    declaration: transform.DeclareVariable(node.declaration),
+                    exportKind: 'value',
+                  },
+                ];
+              case 'DeclareEnum': {
+                const result = transform.DeclareEnum(node.declaration);
+                return Array.isArray(result)
+                  ? [
+                      {
+                        declaration: result[0],
+                        exportKind: 'type',
+                      },
+                      {
+                        declaration: result[1],
+                        exportKind: 'type',
+                      },
+                    ]
+                  : [{declaration: result, exportKind: 'type'}];
+              }
             }
           })();
 
-          return ({
-            type: 'ExportNamedDeclaration',
-            // flow does not currently support assertions
-            assertions: [],
-            declaration,
-            exportKind,
-            source: null,
-            specifiers: [],
-          }: TSESTree.ExportNamedDeclarationWithoutSourceWithSingle);
+          return declarations.map(
+            ({declaration, exportKind}) =>
+              ({
+                type: 'ExportNamedDeclaration',
+                // flow does not currently support assertions
+                assertions: [],
+                declaration,
+                exportKind,
+                source: null,
+                specifiers: [],
+              }: TSESTree.ExportNamedDeclarationWithoutSourceWithSingle),
+          );
         } else {
           return ({
             type: 'ExportNamedDeclaration',
@@ -691,7 +1254,7 @@ const getTransforms = (code: string, scopeManager: ScopeManager) => {
         type: 'TSTypeAliasDeclaration',
         declare: node.type === 'DeclareTypeAlias',
         id: transform.Identifier(node.id, false),
-        typeAnnotation: transform.TypeAnnotationType(node.right),
+        typeAnnotation: transformTypeAnnotationType(node.right),
         typeParameters:
           node.typeParameters == null
             ? undefined
@@ -710,353 +1273,56 @@ const getTransforms = (code: string, scopeManager: ScopeManager) => {
         declare: true,
         id: transform.Identifier(node.id, false),
         typeAnnotation:
-          node.supertype == null
-            ? {
-                type: 'TSUnknownKeyword',
-              }
-            : transform.TypeAnnotationType(node.supertype),
-        typeParameters:
-          node.typeParameters == null
-            ? undefined
-            : transform.TypeParameterDeclaration(node.typeParameters),
-      };
-    },
-    DeclareVariable(
-      node: FlowESTree.DeclareVariable,
-    ): TSESTree.VariableDeclaration {
-      return {
-        type: 'VariableDeclaration',
-        declare: true,
-        declarations: [
-          {
-            type: 'VariableDeclarator',
-            declare: true,
-            id: transform.Identifier(node.id, true),
-            init: null,
-          },
-        ],
-        kind: 'var',
-      };
-    },
-    EmptyTypeAnnotation(
-      node: FlowESTree.EmptyTypeAnnotation,
-    ): TSESTree.TypeNode {
-      // Flow's `empty` type doesn't map well to any types in TS.
-      // The closest is `never`, but `never` has a number of different semantics
-      // In reality no human code should ever directly use the `empty` type in flow
-      // So let's put a pin in it for now
-      throw unsupportedTranslationError(node, 'empty type');
-    },
-    EnumDeclaration(
-      node: FlowESTree.EnumDeclaration,
-    ): [TSESTree.TSEnumDeclaration, TSESTree.TSModuleDeclaration] {
-      const body = node.body;
-      if (body.type === 'EnumSymbolBody') {
-        /*
-        There's unfortunately no way for us to support this in a clean way.
-        We can get really close using this code:
-        ```
-        declare namespace SymbolEnum {
-            export const member1: unique symbol;
-            export type member1 = typeof member1;
-
-            export const member2: unique symbol;
-            export type member2 = typeof member2;
-        }
-        type SymbolEnum = typeof SymbolEnum[keyof typeof SymbolEnum];
-        ```
-
-        However as explained in https://github.com/microsoft/TypeScript/issues/43657:
-        "A unique symbol type is never transferred from one declaration to another through inference."
-        This intended behaviour in TS means that the usage of the fake-enum would look like this:
-        ```
-        const value: SymbolEnum.member1 = SymbolEnum.member1;
-        //           ^^^^^^^^^^^^^^^^^^ required to force TS to retain the information
-        ```
-        Which is really clunky and shitty. It definitely works, but ofc it's not good.
-        We can go with this design if users are okay with it!
-
-        Considering how rarely used symbol enums are ATM, let's just put a pin in it for now.
-        */
-        throw unsupportedTranslationError(node, 'symbol enums');
-      }
-      if (body.type === 'EnumBooleanBody') {
-        /*
-        TODO - TS enums only allow strings or numbers as their values - not booleans.
-        This means we need a non-ts-enum representation of the enum.
-        We can support boolean enums using a construct like this:
-        ```ts
-        declare namespace BooleanEnum {
-            export const member1: true;
-            export type member1 = typeof member1;
-
-            export const member2: false;
-            export type member2 = typeof member1;
-        }
-        declare type BooleanEnum = boolean;
-        ```
-
-        But it's pretty clunky and ugly.
-        Considering how rarely used boolean enums are ATM, let's just put a pin in it for now.
-        */
-        throw unsupportedTranslationError(node, 'boolean enums');
-      }
-
-      const members: Array<TSESTree.TSEnumMemberNonComputedName> = [];
-      for (const member of body.members) {
-        switch (member.type) {
-          case 'EnumDefaultedMember': {
-            if (body.type === 'EnumNumberBody') {
-              // this should be impossible!
-              throw unexpectedTranslationError(
-                member,
-                'Unexpected defaulted number enum member',
-              );
-            }
-            members.push({
-              type: 'TSEnumMember',
-              computed: false,
-              id: transform.Identifier(member.id, false),
-              initializer: ({
-                type: 'Literal',
-                raw: `"${member.id.name}"`,
-                value: member.id.name,
-              }: TSESTree.StringLiteral),
-            });
-            break;
-          }
-
-          case 'EnumNumberMember':
-          case 'EnumStringMember':
-            members.push({
-              type: 'TSEnumMember',
-              computed: false,
-              id: transform.Identifier(member.id, false),
-              initializer:
-                member.init.literalType === 'string'
-                  ? transform.StringLiteral(member.init)
-                  : transform.NumericLiteral(member.init),
-            });
-        }
-      }
-
-      const bodyRepresentationType =
-        body.type === 'EnumNumberBody'
-          ? {type: 'TSNumberKeyword'}
-          : {type: 'TSStringKeyword'};
-
-      const enumName = transform.Identifier(node.id, false);
-      return [
-        {
-          type: 'TSEnumDeclaration',
-          const: false,
-          declare: true,
-          id: enumName,
-          members,
-        },
-        // flow also exports `.cast`, `.isValid`, `.members` and `.getName` for enums
-        // we can use declaration merging to declare these functions on the enum:
-        /*
-        declare enum Foo {
-          A = 1,
-          B = 2,
-        }
-        declare namespace Foo {
-          export function cast(value: number | null | undefined): Foo;
-          export function isValid(value: number | null | undefined): value is Foo;
-          export function members(): IterableIterator<Foo>;
-          export function getName(value: Foo): string;
-        }
-        */
-        {
-          type: 'TSModuleDeclaration',
-          declare: true,
-          id: enumName,
-          body: {
-            type: 'TSModuleBlock',
-            body: [
-              // export function cast(value: number | null | undefined): Foo
-              {
-                type: 'ExportNamedDeclaration',
-                declaration: {
-                  type: 'TSDeclareFunction',
-                  id: {
-                    type: 'Identifier',
-                    name: 'cast',
-                  },
-                  generator: false,
-                  expression: false,
-                  async: false,
-                  params: [
-                    {
-                      type: 'Identifier',
-                      name: 'value',
-                      typeAnnotation: {
-                        type: 'TSTypeAnnotation',
-                        typeAnnotation: {
-                          type: 'TSUnionType',
-                          types: [
-                            bodyRepresentationType,
-                            {
-                              type: 'TSNullKeyword',
-                            },
-                            {
-                              type: 'TSUndefinedKeyword',
-                            },
-                          ],
-                        },
-                      },
-                    },
-                  ],
-                  returnType: {
-                    type: 'TSTypeAnnotation',
-                    typeAnnotation: {
-                      type: 'TSTypeReference',
-                      typeName: enumName,
-                    },
-                  },
-                },
-                specifiers: [],
-                source: null,
-                exportKind: 'value',
-                assertions: [],
-              },
-              // export function isValid(value: number | null | undefined): value is Foo;
-              {
-                type: 'ExportNamedDeclaration',
-                declaration: {
-                  type: 'TSDeclareFunction',
-                  id: {
-                    type: 'Identifier',
-                    name: 'isValid',
-                  },
-                  generator: false,
-                  expression: false,
-                  async: false,
-                  params: [
-                    {
-                      type: 'Identifier',
-                      name: 'value',
-                      typeAnnotation: {
-                        type: 'TSTypeAnnotation',
-                        typeAnnotation: {
-                          type: 'TSUnionType',
-                          types: [
-                            bodyRepresentationType,
-                            {
-                              type: 'TSNullKeyword',
-                            },
-                            {
-                              type: 'TSUndefinedKeyword',
-                            },
-                          ],
-                        },
-                      },
-                    },
-                  ],
-                  returnType: {
-                    type: 'TSTypeAnnotation',
-                    typeAnnotation: {
-                      type: 'TSTypePredicate',
-                      asserts: false,
-                      parameterName: {
-                        type: 'Identifier',
-                        name: 'value',
-                      },
-                      typeAnnotation: {
-                        type: 'TSTypeAnnotation',
-                        typeAnnotation: {
-                          type: 'TSTypeReference',
-                          typeName: enumName,
-                        },
-                      },
-                    },
-                  },
-                },
-                specifiers: [],
-                source: null,
-                exportKind: 'value',
-                assertions: [],
-              },
-              // export function members(): IterableIterator<Foo>;
-              {
-                type: 'ExportNamedDeclaration',
-                declaration: {
-                  type: 'TSDeclareFunction',
-                  id: {
-                    type: 'Identifier',
-                    name: 'members',
-                  },
-                  generator: false,
-                  expression: false,
-                  async: false,
-                  params: [],
-                  returnType: {
-                    type: 'TSTypeAnnotation',
-                    typeAnnotation: {
-                      type: 'TSTypeReference',
-                      typeName: {
-                        type: 'Identifier',
-                        name: 'IterableIterator',
-                      },
-                      typeParameters: {
-                        type: 'TSTypeParameterInstantiation',
-                        params: [
-                          {
-                            type: 'TSTypeReference',
-                            typeName: enumName,
-                          },
-                        ],
-                      },
-                    },
-                  },
-                },
-                specifiers: [],
-                source: null,
-                exportKind: 'value',
-                assertions: [],
-              },
-              // export function getName(value: Foo): string;
-              {
-                type: 'ExportNamedDeclaration',
-                declaration: {
-                  type: 'TSDeclareFunction',
-                  id: {
-                    type: 'Identifier',
-                    name: 'getName',
-                  },
-                  generator: false,
-                  expression: false,
-                  async: false,
-                  params: [
-                    {
-                      type: 'Identifier',
-                      name: 'value',
-                      typeAnnotation: {
-                        type: 'TSTypeAnnotation',
-                        typeAnnotation: {
-                          type: 'TSTypeReference',
-                          typeName: enumName,
-                        },
-                      },
-                    },
-                  ],
-                  returnType: {
-                    type: 'TSTypeAnnotation',
-                    typeAnnotation: {
-                      type: 'TSStringKeyword',
-                    },
-                  },
-                },
-                specifiers: [],
-                source: null,
-                exportKind: 'value',
-                assertions: [],
-              },
-            ],
+          node.supertype == null
+            ? {
+                type: 'TSUnknownKeyword',
+              }
+            : transformTypeAnnotationType(node.supertype),
+        typeParameters:
+          node.typeParameters == null
+            ? undefined
+            : transform.TypeParameterDeclaration(node.typeParameters),
+      };
+    },
+    DeclareVariable(
+      node: FlowESTree.DeclareVariable,
+    ): TSESTree.VariableDeclaration {
+      return {
+        type: 'VariableDeclaration',
+        declare: true,
+        declarations: [
+          {
+            type: 'VariableDeclarator',
+            declare: true,
+            id: transform.Identifier(node.id, true),
+            init: null,
           },
-        },
-      ];
+        ],
+        kind: node.kind,
+      };
+    },
+    DeclareEnum(
+      node: FlowESTree.DeclareEnum,
+    ): DeclarationOrUnsupported<
+      [TSESTree.TSEnumDeclaration, TSESTree.TSModuleDeclaration],
+    > {
+      return EnumImpl(node);
+    },
+    EmptyTypeAnnotation(
+      node: FlowESTree.EmptyTypeAnnotation,
+    ): TSESTree.TypeNode {
+      // Flow's `empty` type doesn't map well to any types in TS.
+      // The closest is `never`, but `never` has a number of different semantics
+      // In reality no human code should ever directly use the `empty` type in flow
+      // So let's put a pin in it for now
+      return unsupportedAnnotation(node, 'empty type');
+    },
+    EnumDeclaration(
+      node: FlowESTree.EnumDeclaration,
+    ): DeclarationOrUnsupported<
+      [TSESTree.TSEnumDeclaration, TSESTree.TSModuleDeclaration],
+    > {
+      return EnumImpl(node);
     },
     DeclareModuleExports(
       node: FlowESTree.DeclareModuleExports,
@@ -1068,7 +1334,7 @@ const getTransforms = (code: string, scopeManager: ScopeManager) => {
     ): TSESTree.TypeNode {
       // The existential type does not map to any types in TS
       // It's also super deprecated - so let's not ever worry
-      throw unsupportedTranslationError(node, 'exestential type');
+      return unsupportedAnnotation(node, 'existential type');
     },
     ExportNamedDeclaration(
       node: FlowESTree.ExportNamedDeclaration,
@@ -1091,11 +1357,12 @@ const getTransforms = (code: string, scopeManager: ScopeManager) => {
 
       const [exportedDeclaration, mergedDeclaration] = (() => {
         if (node.declaration == null) {
-          return [null];
+          return [null, null];
         }
 
         switch (node.declaration.type) {
           case 'ClassDeclaration':
+          case 'ComponentDeclaration':
           case 'FunctionDeclaration':
           case 'VariableDeclaration':
             // These cases shouldn't happen in flow defs because they have their own special
@@ -1105,8 +1372,10 @@ const getTransforms = (code: string, scopeManager: ScopeManager) => {
               `Unexpected named declaration found ${node.declaration.type}`,
             );
 
-          case 'EnumDeclaration':
-            return transform.EnumDeclaration(node.declaration);
+          case 'EnumDeclaration': {
+            const result = transform.EnumDeclaration(node.declaration);
+            return Array.isArray(result) ? result : [result, null];
+          }
           case 'InterfaceDeclaration':
             return [transform.InterfaceDeclaration(node.declaration), null];
           case 'OpaqueType':
@@ -1163,7 +1432,7 @@ const getTransforms = (code: string, scopeManager: ScopeManager) => {
           name: 'this',
           typeAnnotation: {
             type: 'TSTypeAnnotation',
-            typeAnnotation: transform.TypeAnnotationType(
+            typeAnnotation: transformTypeAnnotationType(
               node.this.typeAnnotation,
             ),
           },
@@ -1182,7 +1451,7 @@ const getTransforms = (code: string, scopeManager: ScopeManager) => {
               : transform.Identifier(rest.name, false),
           typeAnnotation: {
             type: 'TSTypeAnnotation',
-            typeAnnotation: transform.TypeAnnotationType(rest.typeAnnotation),
+            typeAnnotation: transformTypeAnnotationType(rest.typeAnnotation),
           },
         });
       }
@@ -1192,7 +1461,7 @@ const getTransforms = (code: string, scopeManager: ScopeManager) => {
         params,
         returnType: {
           type: 'TSTypeAnnotation',
-          typeAnnotation: transform.TypeAnnotationType(node.returnType),
+          typeAnnotation: transformTypeAnnotationType(node.returnType),
         },
         typeParameters:
           node.typeParameters == null
@@ -1209,7 +1478,7 @@ const getTransforms = (code: string, scopeManager: ScopeManager) => {
         name: node.name == null ? `$$PARAM_${idx}$$` : node.name.name,
         typeAnnotation: {
           type: 'TSTypeAnnotation',
-          typeAnnotation: transform.TypeAnnotationType(node.typeAnnotation),
+          typeAnnotation: transformTypeAnnotationType(node.typeAnnotation),
         },
         optional: node.optional,
       };
@@ -1256,7 +1525,7 @@ const getTransforms = (code: string, scopeManager: ScopeManager) => {
 
           const res = [];
           for (const param of node.typeParameters.params) {
-            res.push(transform.TypeAnnotationType(param));
+            res.push(transformTypeAnnotationType(param));
           }
           return res;
         }
@@ -1299,7 +1568,7 @@ const getTransforms = (code: string, scopeManager: ScopeManager) => {
           type PropType = ReturnType<ExtractPropType<Obj>>; // number
           ```
           */
-          throw unsupportedTranslationError(node, fullTypeName);
+          return unsupportedAnnotation(node, fullTypeName);
         }
 
         case '$Diff':
@@ -1547,20 +1816,95 @@ const getTransforms = (code: string, scopeManager: ScopeManager) => {
       }
 
       // React special conversion:
-      if (isReactImport(baseId)) {
-        const reactId = {
-          type: 'Identifier',
-          name: `React`,
+      const validReactImportOrGlobal = isValidReactImportOrGlobal(baseId);
+      const reactImport = isReactImport(baseId);
+      if (validReactImportOrGlobal || reactImport) {
+        // Returns appropriate Identifier for `React` import.
+        // If a global is in use, set a flag to indicate that we should add the import.
+        const getReactIdentifier = () => {
+          if (shouldAddReactImport !== false) {
+            shouldAddReactImport = !reactImport;
+          }
+
+          return {
+            type: 'Identifier',
+            name: `React`,
+          };
         };
 
         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':
+          case 'React$Component': {
+            const typeParameters = node.typeParameters;
+            if (typeParameters == null || typeParameters.params.length === 0) {
+              throw translationError(
+                node,
+                `Expected at least 1 type parameter with \`${fullTypeName}\``,
+              );
+            }
+            const params = typeParameters.params;
+            if (params.length > 2) {
+              throw translationError(
+                node,
+                `Expected at no more than 2 type parameters with \`${fullTypeName}\``,
+              );
+            }
+
+            return {
+              type: 'TSTypeReference',
+              typeName: {
+                type: 'TSQualifiedName',
+                left: getReactIdentifier(),
+                right: {
+                  type: 'Identifier',
+                  name: 'Component',
+                },
+              },
+              typeParameters: {
+                type: 'TSTypeParameterInstantiation',
+                params: params.map(param => transformTypeAnnotationType(param)),
+              },
+            };
+          }
+
+          // React.Context<A> -> React.Context<A>
+          // React$Context<A> -> React.Context<A>
           case 'React$Context':
           case 'React.Context':
             return {
               type: 'TSTypeReference',
               typeName: {
                 type: 'TSQualifiedName',
-                left: reactId,
+                left: getReactIdentifier(),
                 right: {
                   type: 'Identifier',
                   name: `Context`,
@@ -1571,6 +1915,40 @@ const getTransforms = (code: string, scopeManager: ScopeManager) => {
                 params: assertHasExactlyNTypeParameters(1),
               },
             };
+          // React.Key -> React.Key
+          // React$Key -> React.Key
+          case 'React.Key':
+          case 'React$Key':
+            assertHasExactlyNTypeParameters(0);
+            return {
+              type: 'TSTypeReference',
+              typeName: {
+                type: 'TSQualifiedName',
+                left: getReactIdentifier(),
+                right: {
+                  type: 'Identifier',
+                  name: 'Key',
+                },
+              },
+            };
+          // React.ElementType -> React.ElementType
+          // React$ElementType -> React.ElementType
+          case 'React$ElementType':
+          case 'React.ElementType': {
+            assertHasExactlyNTypeParameters(0);
+            return {
+              type: 'TSTypeReference',
+              typeName: {
+                type: 'TSQualifiedName',
+                left: getReactIdentifier(),
+                right: {
+                  type: 'Identifier',
+                  name: `ElementType`,
+                },
+              },
+              typeParameters: undefined,
+            };
+          }
           // React.Node -> React.ReactNode
           case 'React$Node':
           case 'React.Node': {
@@ -1579,7 +1957,7 @@ const getTransforms = (code: string, scopeManager: ScopeManager) => {
               type: 'TSTypeReference',
               typeName: {
                 type: 'TSQualifiedName',
-                left: reactId,
+                left: getReactIdentifier(),
                 right: {
                   type: 'Identifier',
                   name: `ReactNode`,
@@ -1595,7 +1973,7 @@ const getTransforms = (code: string, scopeManager: ScopeManager) => {
               type: 'TSTypeReference',
               typeName: {
                 type: 'TSQualifiedName',
-                left: reactId,
+                left: getReactIdentifier(),
                 right: {
                   type: 'Identifier',
                   name: `ReactElement`,
@@ -1615,7 +1993,7 @@ const getTransforms = (code: string, scopeManager: ScopeManager) => {
               type: 'TSTypeReference',
               typeName: {
                 type: 'TSQualifiedName',
-                left: reactId,
+                left: getReactIdentifier(),
                 right: {
                   type: 'Identifier',
                   name: `ElementRef`,
@@ -1635,7 +2013,7 @@ const getTransforms = (code: string, scopeManager: ScopeManager) => {
               type: 'TSTypeReference',
               typeName: {
                 type: 'TSQualifiedName',
-                left: reactId,
+                left: getReactIdentifier(),
                 right: {
                   type: 'Identifier',
                   name: `Fragment`,
@@ -1662,15 +2040,32 @@ const getTransforms = (code: string, scopeManager: ScopeManager) => {
               typeParameters: undefined,
             };
           }
-          // 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':
+          // 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.ComponentType<Config>
+          // React$AbstractComponent<Config> -> React.ComponentType<Config>
+          // React.AbstractComponent<Config, Instance> -> React.ComponentType<Config & React.RefAttributes<Instance>>
+          // React$AbstractComponent<Config, Instance> -> React.ComponentType<Config & React.RefAttributes<Instance>>
+          case 'React.AbstractComponent':
+          case 'React$AbstractComponent': {
             const typeParameters = node.typeParameters;
             if (typeParameters == null || typeParameters.params.length === 0) {
               throw translationError(
@@ -1686,56 +2081,142 @@ const getTransforms = (code: string, scopeManager: ScopeManager) => {
               );
             }
 
-            let newTypeParam = transform.TypeAnnotationType(params[0]);
-            newTypeParam = {
-              type: 'TSIntersectionType',
-              types: [
-                newTypeParam,
+            const newParams = (() => {
+              if (params.length === 1) {
+                return assertHasExactlyNTypeParameters(1);
+              }
+
+              const [props, ref] = assertHasExactlyNTypeParameters(2);
+
+              return [
                 {
-                  type: 'TSTypeReference',
-                  typeName: {
-                    type: 'TSQualifiedName',
-                    left: {
-                      type: 'Identifier',
-                      name: 'React',
-                    },
-                    right: {
-                      type: 'Identifier',
-                      name: 'RefAttributes',
+                  type: 'TSIntersectionType',
+                  types: [
+                    props,
+                    {
+                      type: 'TSTypeReference',
+                      typeName: {
+                        type: 'TSQualifiedName',
+                        left: {
+                          type: 'Identifier',
+                          name: 'React',
+                        },
+                        right: {
+                          type: 'Identifier',
+                          name: 'RefAttributes',
+                        },
+                      },
+                      typeParameters: {
+                        type: 'TSTypeParameterInstantiation',
+                        params: [ref],
+                      },
                     },
-                  },
-                  typeParameters: {
-                    type: 'TSTypeParameterInstantiation',
-                    params: [
-                      params[1]
-                        ? transform.TypeAnnotationType(params[1])
-                        : {
-                            type: 'TSUnknownKeyword',
-                          },
-                    ],
-                  },
+                  ],
                 },
-              ],
-            };
+              ];
+            })();
 
             return {
               type: 'TSTypeReference',
               typeName: {
                 type: 'TSQualifiedName',
-                left: reactId,
+                left: getReactIdentifier(),
+                right: {
+                  type: 'Identifier',
+                  name: 'ComponentType',
+                },
+              },
+              typeParameters: {
+                type: 'TSTypeParameterInstantiation',
+                params: newParams,
+              },
+            };
+          }
+          // React.ElementConfig<A> ->  JSX.LibraryManagedAttributes<A, React.ComponentProps<A>>
+          // React$ElementConfig<A> ->  JSX.LibraryManagedAttributes<A, React.ComponentProps<A>>
+          case 'React.ElementConfig':
+          case 'React$ElementConfig': {
+            const [param] = assertHasExactlyNTypeParameters(1);
+            return {
+              type: 'TSTypeReference',
+              typeName: {
+                type: 'TSQualifiedName',
+                left: {
+                  type: 'Identifier',
+                  name: 'JSX',
+                },
                 right: {
                   type: 'Identifier',
-                  name: `ForwardRefExoticComponent`,
+                  name: 'LibraryManagedAttributes',
                 },
               },
               typeParameters: {
                 type: 'TSTypeParameterInstantiation',
-                params: [newTypeParam],
+                params: [
+                  param,
+                  {
+                    type: 'TSTypeReference',
+                    typeName: {
+                      type: 'TSQualifiedName',
+                      left: getReactIdentifier(),
+                      right: {
+                        type: 'Identifier',
+                        name: `ComponentProps`,
+                      },
+                    },
+                    typeParameters: {
+                      type: 'TSTypeParameterInstantiation',
+                      params: [param],
+                    },
+                  },
+                ],
               },
             };
           }
+          // React.Ref<C> -> NonNullable<React.Ref<C> | string | number>
+          // React$Ref<C> -> NonNullable<React.Ref<C> | string | number>
+          case 'React.Ref':
+          case 'React$Ref':
+            return {
+              type: 'TSTypeReference',
+              typeName: {
+                type: 'Identifier',
+                name: 'NonNullable',
+              },
+              typeParameters: {
+                type: 'TSTypeParameterInstantiation',
+                params: [
+                  {
+                    type: 'TSUnionType',
+                    types: [
+                      {
+                        type: 'TSTypeReference',
+                        typeName: {
+                          type: 'TSQualifiedName',
+                          left: getReactIdentifier(),
+                          right: {
+                            type: 'Identifier',
+                            name: 'Ref',
+                          },
+                        },
+                        typeParameters: {
+                          type: 'TSTypeParameterInstantiation',
+                          params: assertHasExactlyNTypeParameters(1),
+                        },
+                      },
+                      {
+                        type: 'TSStringKeyword',
+                      },
+                      {
+                        type: 'TSNumberKeyword',
+                      },
+                    ],
+                  },
+                ],
+              },
+            };
           default:
-            throw unsupportedTranslationError(node, fullTypeName);
+            return unsupportedAnnotation(node, fullTypeName);
         }
       }
 
@@ -1770,8 +2251,8 @@ const getTransforms = (code: string, scopeManager: ScopeManager) => {
     ): TSESTree.TSIndexedAccessType {
       return {
         type: 'TSIndexedAccessType',
-        objectType: transform.TypeAnnotationType(node.objectType),
-        indexType: transform.TypeAnnotationType(node.indexType),
+        objectType: transformTypeAnnotationType(node.objectType),
+        indexType: transformTypeAnnotationType(node.indexType),
       };
     },
     InterfaceDeclaration(
@@ -1793,67 +2274,77 @@ const getTransforms = (code: string, scopeManager: ScopeManager) => {
     },
     ImportDeclaration(
       node: FlowESTree.ImportDeclaration,
-    ): TSESTree.ImportDeclaration {
-      if (node.importKind === 'typeof') {
-        /*
-        TODO - this is a complicated change to support because TS
-        does not have typeof imports.
-        Making it a `type` import would change the meaning!
-        The only way to truly support this is to prefix all **usages** with `typeof T`.
-        eg:
+    ): Array<DeclarationOrUnsupported<TSESTree.ImportDeclaration>> {
+      const importKind = node.importKind;
 
-        ```
-        import typeof Foo from 'Foo';
-        type T = Foo;
-        ```
+      const specifiers = [];
+      const unsupportedSpecifiers = [];
+      node.specifiers.forEach(spec => {
+        let id = (() => {
+          if (node.importKind === 'typeof' || spec.importKind === 'typeof') {
+            const id = {
+              type: 'Identifier',
+              name: getPlaceholderNameForTypeofImport(),
+            };
 
-        would become:
+            unsupportedSpecifiers.push({
+              type: 'TSTypeAliasDeclaration',
+              id: transform.Identifier(spec.local, false),
+              typeAnnotation: {
+                type: 'TSTypeQuery',
+                exprName: id,
+              },
+            });
 
-        ```
-        import type Foo from 'Foo';
-        type T = typeof Foo;
-        ```
+            return id;
+          }
 
-        This seems simple, but will actually be super complicated for us to do with
-        our current translation architecture
-        */
-        throw unsupportedTranslationError(node, 'typeof imports');
-      }
-      const importKind = node.importKind;
+          return transform.Identifier(spec.local, false);
+        })();
 
-      return {
-        type: 'ImportDeclaration',
-        assertions: node.assertions.map(transform.ImportAttribute),
-        importKind: importKind ?? 'value',
-        source: transform.StringLiteral(node.source),
-        specifiers: node.specifiers.map(spec => {
-          switch (spec.type) {
-            case 'ImportDefaultSpecifier':
-              return {
-                type: 'ImportDefaultSpecifier',
-                local: transform.Identifier(spec.local, false),
-              };
+        switch (spec.type) {
+          case 'ImportDefaultSpecifier':
+            specifiers.push({
+              type: 'ImportDefaultSpecifier',
+              local: id,
+            });
+            return;
 
-            case 'ImportNamespaceSpecifier':
-              return {
-                type: 'ImportNamespaceSpecifier',
-                local: transform.Identifier(spec.local, false),
-              };
+          case 'ImportNamespaceSpecifier':
+            specifiers.push({
+              type: 'ImportNamespaceSpecifier',
+              local: id,
+            });
+            return;
+
+          case 'ImportSpecifier':
+            specifiers.push({
+              type: 'ImportSpecifier',
+              importKind:
+                spec.importKind === 'typeof' || spec.importKind === 'type'
+                  ? 'type'
+                  : null,
+              imported: transform.Identifier(spec.imported, false),
+              local: id,
+            });
+            return;
+        }
+      });
+
+      const out = specifiers.length
+        ? [
+            {
+              type: 'ImportDeclaration',
+              assertions: node.assertions.map(transform.ImportAttribute),
+              importKind:
+                importKind === 'typeof' ? 'type' : importKind ?? 'value',
+              source: transform.StringLiteral(node.source),
+              specifiers,
+            },
+          ]
+        : [];
 
-            case 'ImportSpecifier':
-              if (spec.importKind === 'typeof') {
-                // see above
-                throw unsupportedTranslationError(node, 'typeof imports');
-              }
-              return {
-                type: 'ImportSpecifier',
-                importKind: spec.importKind === 'type' ? 'type' : null,
-                imported: transform.Identifier(spec.imported, false),
-                local: transform.Identifier(spec.local, false),
-              };
-          }
-        }),
-      };
+      return [...out, ...unsupportedSpecifiers];
     },
     InterfaceExtends(
       node: FlowESTree.InterfaceExtends,
@@ -1897,7 +2388,7 @@ const getTransforms = (code: string, scopeManager: ScopeManager) => {
     ): TSESTree.TSIntersectionType {
       return {
         type: 'TSIntersectionType',
-        types: node.types.map(transform.TypeAnnotationType),
+        types: node.types.map(transformTypeAnnotationType),
       };
     },
     Literal(node: FlowESTree.Literal): TSESTree.Literal {
@@ -1951,7 +2442,7 @@ const getTransforms = (code: string, scopeManager: ScopeManager) => {
           {
             type: 'TSUndefinedKeyword',
           },
-          transform.TypeAnnotationType(node.typeAnnotation),
+          transformTypeAnnotationType(node.typeAnnotation),
         ],
       };
     },
@@ -1983,7 +2474,10 @@ const getTransforms = (code: string, scopeManager: ScopeManager) => {
     },
     ObjectTypeAnnotation(
       node: FlowESTree.ObjectTypeAnnotation,
-    ): TSESTree.TSTypeLiteral | TSESTree.TSIntersectionType {
+    ):
+      | TSESTree.TSTypeLiteral
+      | TSESTree.TSIntersectionType
+      | TSESTree.TSAnyKeyword {
       // we want to preserve the source order of the members
       // unfortunately flow has unordered properties storing things
       // so store all elements with their start index and sort the
@@ -2010,10 +2504,7 @@ const getTransforms = (code: string, scopeManager: ScopeManager) => {
       They're really rarely used (if ever) - so let's just ignore them for now
       */
       if (node.internalSlots.length > 0) {
-        throw unsupportedTranslationError(
-          node.internalSlots[0],
-          'internal slots',
-        );
+        return unsupportedAnnotation(node.internalSlots[0], 'internal slots');
       }
 
       if (!node.properties.find(FlowESTree.isObjectTypeSpreadProperty)) {
@@ -2024,6 +2515,14 @@ const getTransforms = (code: string, scopeManager: ScopeManager) => {
             throw unexpectedTranslationError(property, 'Impossible state');
           }
 
+          if (property.type === 'ObjectTypeMappedTypeProperty') {
+            // TODO - Support mapped types
+            return unsupportedAnnotation(
+              property,
+              'object type with mapped type property',
+            );
+          }
+
           members.push({
             start: property.range[0],
             node: transform.ObjectTypeProperty(property),
@@ -2110,7 +2609,7 @@ const getTransforms = (code: string, scopeManager: ScopeManager) => {
         */
 
         if (members.length > 0) {
-          throw unsupportedTranslationError(
+          return unsupportedAnnotation(
             node,
             'object types with spreads, indexers and/or call properties at the same time',
           );
@@ -2120,21 +2619,27 @@ const getTransforms = (code: string, scopeManager: ScopeManager) => {
         for (const property of node.properties) {
           if (property.type === 'ObjectTypeSpreadProperty') {
             if (members.length > 0) {
-              throw unsupportedTranslationError(
+              return unsupportedAnnotation(
                 property,
                 'object types with spreads in the middle or at the end',
               );
             }
 
-            const spreadType = transform.TypeAnnotationType(property.argument);
+            const spreadType = transformTypeAnnotationType(property.argument);
             if (spreadType.type !== 'TSTypeReference') {
-              throw unsupportedTranslationError(
+              return unsupportedAnnotation(
                 property,
                 'object types with complex spreads',
               );
             }
 
             typesToIntersect.push(spreadType);
+          } else if (property.type === 'ObjectTypeMappedTypeProperty') {
+            // TODO - Support mapped types
+            return unsupportedAnnotation(
+              property,
+              'object type with mapped type property',
+            );
           } else {
             members.push({
               start: property.range[0],
@@ -2208,7 +2713,7 @@ const getTransforms = (code: string, scopeManager: ScopeManager) => {
             name: node.id == null ? '$$Key$$' : node.id.name,
             typeAnnotation: {
               type: 'TSTypeAnnotation',
-              typeAnnotation: transform.TypeAnnotationType(node.key),
+              typeAnnotation: transformTypeAnnotationType(node.key),
             },
           },
         ],
@@ -2216,7 +2721,7 @@ const getTransforms = (code: string, scopeManager: ScopeManager) => {
         static: node.static,
         typeAnnotation: {
           type: 'TSTypeAnnotation',
-          typeAnnotation: transform.TypeAnnotationType(node.value),
+          typeAnnotation: transformTypeAnnotationType(node.value),
         },
       };
     },
@@ -2273,7 +2778,7 @@ const getTransforms = (code: string, scopeManager: ScopeManager) => {
         static: node.static,
         typeAnnotation: {
           type: 'TSTypeAnnotation',
-          typeAnnotation: transform.TypeAnnotationType(node.value),
+          typeAnnotation: transformTypeAnnotationType(node.value),
         },
       };
     },
@@ -2302,10 +2807,10 @@ const getTransforms = (code: string, scopeManager: ScopeManager) => {
           },
           typeParameters: {
             type: 'TSTypeParameterInstantiation',
-            params: [transform.TypeAnnotationType(node.objectType)],
+            params: [transformTypeAnnotationType(node.objectType)],
           },
         },
-        indexType: transform.TypeAnnotationType(node.indexType),
+        indexType: transformTypeAnnotationType(node.indexType),
       };
     },
     QualifiedTypeIdentifier(
@@ -2322,6 +2827,20 @@ const getTransforms = (code: string, scopeManager: ScopeManager) => {
         right: transform.Identifier(node.id, false),
       };
     },
+    QualifiedTypeofIdentifier(
+      node: FlowESTree.QualifiedTypeofIdentifier,
+    ): TSESTree.TSQualifiedName {
+      const qual = node.qualification;
+
+      return {
+        type: 'TSQualifiedName',
+        left:
+          qual.type === 'Identifier'
+            ? transform.Identifier(qual, false)
+            : transform.QualifiedTypeofIdentifier(qual),
+        right: transform.Identifier(node.id, false),
+      };
+    },
     RegExpLiteral(node: FlowESTree.RegExpLiteral): TSESTree.RegExpLiteral {
       return {
         type: 'Literal',
@@ -2378,7 +2897,7 @@ const getTransforms = (code: string, scopeManager: ScopeManager) => {
     ): TSESTree.TSTupleType {
       return {
         type: 'TSTupleType',
-        elementTypes: node.types.map(transform.TypeAnnotationType),
+        elementTypes: node.types.map(transformTypeAnnotationType),
       };
     },
     TypeAlias(node: FlowESTree.TypeAlias): TSESTree.TSTypeAliasDeclaration {
@@ -2387,89 +2906,26 @@ const getTransforms = (code: string, scopeManager: ScopeManager) => {
     TypeAnnotation(node: FlowESTree.TypeAnnotation): TSESTree.TSTypeAnnotation {
       return {
         type: 'TSTypeAnnotation',
-        typeAnnotation: transform.TypeAnnotationType(node.typeAnnotation),
+        typeAnnotation: transformTypeAnnotationType(node.typeAnnotation),
       };
     },
-    TypeAnnotationType(node: FlowESTree.TypeAnnotationType): TSESTree.TypeNode {
-      switch (node.type) {
-        case 'AnyTypeAnnotation':
-          return transform.AnyTypeAnnotation(node);
-        case 'ArrayTypeAnnotation':
-          return transform.ArrayTypeAnnotation(node);
-        case 'BigIntLiteralTypeAnnotation':
-          return transform.BigIntLiteralTypeAnnotation(node);
-        case 'BigIntTypeAnnotation':
-          return transform.BigIntTypeAnnotation(node);
-        case 'BooleanLiteralTypeAnnotation':
-          return transform.BooleanLiteralTypeAnnotation(node);
-        case 'BooleanTypeAnnotation':
-          return transform.BooleanTypeAnnotation(node);
-        case 'EmptyTypeAnnotation':
-          return transform.EmptyTypeAnnotation(node);
-        case 'ExistsTypeAnnotation':
-          return transform.ExistsTypeAnnotation(node);
-        case 'FunctionTypeAnnotation':
-          return transform.FunctionTypeAnnotation(node);
-        case 'GenericTypeAnnotation':
-          return transform.GenericTypeAnnotation(node);
-        case 'IndexedAccessType':
-          return transform.IndexedAccessType(node);
-        case 'InterfaceTypeAnnotation':
-          return transform.InterfaceTypeAnnotation(node);
-        case 'IntersectionTypeAnnotation':
-          return transform.IntersectionTypeAnnotation(node);
-        case 'MixedTypeAnnotation':
-          return transform.MixedTypeAnnotation(node);
-        case 'NullLiteralTypeAnnotation':
-          return transform.NullLiteralTypeAnnotation(node);
-        case 'NullableTypeAnnotation':
-          return transform.NullableTypeAnnotation(node);
-        case 'NumberLiteralTypeAnnotation':
-          return transform.NumberLiteralTypeAnnotation(node);
-        case 'NumberTypeAnnotation':
-          return transform.NumberTypeAnnotation(node);
-        case 'ObjectTypeAnnotation':
-          return transform.ObjectTypeAnnotation(node);
-        case 'OptionalIndexedAccessType':
-          return transform.OptionalIndexedAccessType(node);
-        case 'QualifiedTypeIdentifier':
-          return transform.QualifiedTypeIdentifier(node);
-        case 'StringLiteralTypeAnnotation':
-          return transform.StringLiteralTypeAnnotation(node);
-        case 'StringTypeAnnotation':
-          return transform.StringTypeAnnotation(node);
-        case 'SymbolTypeAnnotation':
-          return transform.SymbolTypeAnnotation(node);
-        case 'ThisTypeAnnotation':
-          return transform.ThisTypeAnnotation(node);
-        case 'TupleTypeAnnotation':
-          return transform.TupleTypeAnnotation(node);
-        case 'TypeofTypeAnnotation':
-          return transform.TypeofTypeAnnotation(node);
-        case 'UnionTypeAnnotation':
-          return transform.UnionTypeAnnotation(node);
-        case 'VoidTypeAnnotation':
-          return transform.VoidTypeAnnotation(node);
-        default:
-          throw unexpectedTranslationError(node, `Unhandled type ${node.type}`);
-      }
-    },
     TypeofTypeAnnotation(
       node: FlowESTree.TypeofTypeAnnotation,
     ): TSESTree.TSTypeQuery {
-      const argument = transform.TypeAnnotationType(node.argument);
-      if (argument.type !== 'TSTypeReference') {
-        throw unexpectedTranslationError(
-          node,
-          `Expected to find a type reference as the argument to the TypeofTypeAnnotation, but got ${node.argument.type}`,
-        );
+      switch (node.argument.type) {
+        case 'Identifier':
+          return {
+            type: 'TSTypeQuery',
+            exprName: transform.Identifier(node.argument),
+            typeParameters: undefined,
+          };
+        case 'QualifiedTypeofIdentifier':
+          return {
+            type: 'TSTypeQuery',
+            exprName: transform.QualifiedTypeofIdentifier(node.argument),
+            typeParameters: undefined,
+          };
       }
-
-      return {
-        type: 'TSTypeQuery',
-        exprName: argument.typeName,
-        typeParameters: argument.typeParameters,
-      };
     },
     TypeParameter(node: FlowESTree.TypeParameter): TSESTree.TSTypeParameter {
       /*
@@ -2502,11 +2958,11 @@ const getTransforms = (code: string, scopeManager: ScopeManager) => {
         constraint:
           node.bound == null
             ? undefined
-            : transform.TypeAnnotationType(node.bound.typeAnnotation),
+            : transformTypeAnnotationType(node.bound.typeAnnotation),
         default:
           node.default == null
             ? undefined
-            : transform.TypeAnnotationType(node.default),
+            : transformTypeAnnotationType(node.default),
         in: false,
         out: false,
         // in: variance.has('in'),
@@ -2526,7 +2982,7 @@ const getTransforms = (code: string, scopeManager: ScopeManager) => {
     ): TSESTree.TSTypeParameterInstantiation {
       return {
         type: 'TSTypeParameterInstantiation',
-        params: node.params.map(transform.TypeAnnotationType),
+        params: node.params.map(transformTypeAnnotationType),
       };
     },
     UnionTypeAnnotation(
@@ -2534,7 +2990,7 @@ const getTransforms = (code: string, scopeManager: ScopeManager) => {
     ): TSESTree.TSUnionType {
       return {
         type: 'TSUnionType',
-        types: node.types.map(transform.TypeAnnotationType),
+        types: node.types.map(transformTypeAnnotationType),
       };
     },
     VoidTypeAnnotation(
@@ -2563,5 +3019,5 @@ const getTransforms = (code: string, scopeManager: ScopeManager) => {
     };
   }
 
-  return transform;
+  return [transform, code];
 };