flow-api-translator 0.10.0 → 0.11.0

package/dist/flowDefToTSDef.js

@@ -24,15 +24,25 @@ var _ErrorUtils = require("./utils/ErrorUtils");
 
 var _DocblockUtils = require("./utils/DocblockUtils");
 
+var _os = require("os");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 const cloneJSDocCommentsToNewNode = // $FlowExpectedError[incompatible-cast] - trust me this re-type is 100% safe
 _hermesTransform.cloneJSDocCommentsToNewNode;
+const makeCommentOwnLine = // $FlowExpectedError[incompatible-cast] - trust me this re-type is 100% safe
+_hermesTransform.makeCommentOwnLine;
 const VALID_REACT_IMPORTS = new Set(['React', 'react']);
 
-function flowDefToTSDef(originalCode, ast, scopeManager) {
+function isValidReactImportOrGlobal(id) {
+  return VALID_REACT_IMPORTS.has(id.name) || id.name.startsWith('React$');
+}
+
+let shouldAddReactImport = null;
+
+function flowDefToTSDef(originalCode, ast, scopeManager, opts) {
   const tsBody = [];
   const tsProgram = {
     type: 'Program',
@@ -40,7 +50,8 @@ function flowDefToTSDef(originalCode, ast, scopeManager) {
     sourceType: ast.sourceType,
     docblock: ast.docblock == null ? null : (0, _DocblockUtils.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) {
@@ -51,15 +62,37 @@ function flowDefToTSDef(originalCode, ast, scopeManager) {
       tsBody.push(...(Array.isArray(result) ? result : [result]));
     } else {
       throw (0, _ErrorUtils.unexpectedTranslationError)(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, scopeManager) => {
+const getTransforms = (originalCode, scopeManager, opts) => {
+  let code = originalCode;
+
   function translationError(node, message) {
     return (0, _ErrorUtils.translationError)(node, message, {
       code
@@ -72,8 +105,66 @@ const getTransforms = (code, scopeManager) => {
     });
   }
 
-  function unsupportedTranslationError(node, thing) {
-    return translationError(node, `Unsupported feature: Translating "${thing}" is currently not supported.`);
+  function unsupportedFeatureMessage(thing) {
+    return `Unsupported feature: Translating "${thing}" is currently not supported.`;
+  }
+
+  function buildCodeFrameForComment(node, message) {
+    return (0, _ErrorUtils.buildCodeFrame)(node, message, code, false);
+  }
+
+  function addErrorComment(node, message) {
+    var _node$comments;
+
+    const comment = {
+      type: 'Block',
+      value: `*${_os.EOL} * ${message.replace(new RegExp(_os.EOL, 'g'), `${_os.EOL} * `)}${_os.EOL}*`,
+      leading: true,
+      printed: false
+    };
+    code = makeCommentOwnLine(code, comment); // $FlowExpectedError[prop-missing]
+    // $FlowExpectedError[cannot-write]
+
+    (_node$comments = node.comments) != null ? _node$comments : node.comments = []; // $FlowExpectedError[prop-missing]
+    // $FlowExpectedError[incompatible-cast]
+
+    node.comments.push(comment);
+  }
+
+  function unsupportedAnnotation(node, thing) {
+    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, thing, id, declare = false, typeParameters = null) {
+    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 = (() => {
@@ -87,7 +178,21 @@ const getTransforms = (code, scopeManager) => {
   })();
 
   function isReactImport(id) {
-    let currentScope = scopeManager.acquire(id);
+    let currentScope = (() => {
+      let scope = null;
+      let node = 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) {
@@ -99,11 +204,12 @@ const getTransforms = (code, scopeManager) => {
 
         currentScope = currentScope.upper;
       }
-    })(); // 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);
+      return false;
     }
 
     const def = variableDef.defs[0]; // Detect:
@@ -133,6 +239,393 @@ const getTransforms = (code, scopeManager) => {
     return false;
   }
 
+  function EnumImpl(node) {
+    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 = [];
+
+    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
+              }
+            });
+            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 = (() => {
+    let typeof_import_count = 0;
+    return () => `$$IMPORT_TYPEOF_${++typeof_import_count}$$`;
+  })();
+
+  const transformTypeAnnotationType = node => {
+    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) {
       return {
@@ -143,7 +636,7 @@ const getTransforms = (code, scopeManager) => {
     ArrayTypeAnnotation(node) {
       return {
         type: 'TSArrayType',
-        elementType: transform.TypeAnnotationType(node.elementType)
+        elementType: transformTypeAnnotationType(node.elementType)
       };
     },
 
@@ -221,7 +714,7 @@ const getTransforms = (code, scopeManager) => {
       const transformedBody = transform.ObjectTypeAnnotation(node.body);
 
       if (transformedBody.type !== 'TSTypeLiteral') {
-        throw translationError(node.body, 'Spreads in declare class are not allowed');
+        return unsupportedDeclaration(node.body, 'Spreads in declare class are not allowed', node.id, true, node.typeParameters);
       }
 
       for (const member of transformedBody.members) {
@@ -348,7 +841,7 @@ const getTransforms = (code, scopeManager) => {
               ```
               Let's put a pin in it for now and deal with it later if the need arises.
               */
-              throw unsupportedTranslationError((_node$body$callProper = node.body.callProperties[0]) != null ? _node$body$callProper : node.body, 'call signatures on classes');
+              return unsupportedDeclaration((_node$body$callProper = node.body.callProperties[0]) != null ? _node$body$callProper : node.body, 'call signatures on classes', node.id, true, node.typeParameters);
             }
 
           default:
@@ -421,50 +914,48 @@ const getTransforms = (code, scopeManager) => {
               if (referencedId.type === 'Identifier') {
                 const exportedVar = topScope.set.get(referencedId.name);
 
-                if (exportedVar == null || exportedVar.defs.length !== 1) {
-                  throw unexpectedTranslationError(referencedId, `Unable to find exported variable ${referencedId.name}`);
-                }
-
-                const def = exportedVar.defs[0];
-
-                switch (def.type) {
-                  case 'ImportBinding':
-                    {
-                      // `import type { Wut } from 'mod'; declare export default Wut;`
-                      // `import { type Wut } from 'mod'; declare export default Wut;`
-                      // these cases should be wrapped in a variable because they're exporting a type, not a value
-                      const specifier = def.node;
+                if (exportedVar != null && exportedVar.defs.length === 1) {
+                  const def = exportedVar.defs[0];
 
-                      if (specifier.importKind === 'type' || specifier.parent.importKind === 'type') {
-                        // fallthrough to the "default" handling
-                        break;
-                      } // intentional fallthrough to the "value" handling
+                  switch (def.type) {
+                    case 'ImportBinding':
+                      {
+                        // `import type { Wut } from 'mod'; declare export default Wut;`
+                        // `import { type Wut } from 'mod'; declare export default Wut;`
+                        // these cases should be wrapped in a variable because they're exporting a type, not a value
+                        const specifier = def.node;
 
-                    }
-
-                  case 'ClassName':
-                  case 'Enum':
-                  case 'FunctionName':
-                  case 'ImplicitGlobalVariable':
-                  case 'Variable':
-                    // there's already a variable defined to hold the type
-                    return {
-                      type: 'ExportDefaultDeclaration',
-                      declaration: {
-                        type: 'Identifier',
-                        name: referencedId.name
-                      },
-                      exportKind: 'value'
-                    };
+                        if (specifier.importKind === 'type' || specifier.parent.importKind === 'type') {
+                          // fallthrough to the "default" handling
+                          break;
+                        } // intentional fallthrough to the "value" handling
 
-                  case 'CatchClause':
-                  case 'Parameter':
-                  case 'TypeParameter':
-                    throw translationError(def.node, `Unexpected variable def type: ${def.type}`);
+                      }
 
-                  case 'Type':
-                    // fallthrough to the "default" handling
-                    break;
+                    case 'ClassName':
+                    case 'Enum':
+                    case 'FunctionName':
+                    case 'ImplicitGlobalVariable':
+                    case 'Variable':
+                      // there's already a variable defined to hold the type
+                      return {
+                        type: 'ExportDefaultDeclaration',
+                        declaration: {
+                          type: 'Identifier',
+                          name: referencedId.name
+                        },
+                        exportKind: 'value'
+                      };
+
+                    case 'CatchClause':
+                    case 'Parameter':
+                    case 'TypeParameter':
+                      throw translationError(def.node, `Unexpected variable def type: ${def.type}`);
+
+                    case 'Type':
+                      // fallthrough to the "default" handling
+                      break;
+                  }
                 }
               } // intentional fallthrough to the "default" handling
 
@@ -494,7 +985,7 @@ const getTransforms = (code, scopeManager) => {
                     name: SPECIFIER,
                     typeAnnotation: {
                       type: 'TSTypeAnnotation',
-                      typeAnnotation: transform.TypeAnnotationType(declaration)
+                      typeAnnotation: transformTypeAnnotationType(declaration)
                     }
                   },
                   init: null
@@ -528,44 +1019,59 @@ const getTransforms = (code, scopeManager) => {
             };
           }
 
-          const {
-            declaration,
-            exportKind
-          } = (() => {
+          const declarations = (() => {
             switch (node.declaration.type) {
               case 'DeclareClass':
-                return {
+                return [{
                   declaration: transform.DeclareClass(node.declaration),
                   exportKind: 'value'
-                };
+                }];
 
               case 'DeclareFunction':
-                return {
+                return [{
                   declaration: transform.DeclareFunction(node.declaration),
                   exportKind: 'value'
-                };
+                }];
 
               case 'DeclareInterface':
-                return {
+                return [{
                   declaration: transform.DeclareInterface(node.declaration),
                   exportKind: 'type'
-                };
+                }];
 
               case 'DeclareOpaqueType':
-                return {
+                return [{
                   declaration: transform.DeclareOpaqueType(node.declaration),
                   exportKind: 'type'
-                };
+                }];
 
               case 'DeclareVariable':
-                return {
+                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 {
+          return declarations.map(({
+            declaration,
+            exportKind
+          }) => ({
             type: 'ExportNamedDeclaration',
             // flow does not currently support assertions
             assertions: [],
@@ -573,7 +1079,7 @@ const getTransforms = (code, scopeManager) => {
             exportKind,
             source: null,
             specifiers: []
-          };
+          }));
         } else {
           return {
             type: 'ExportNamedDeclaration',
@@ -635,7 +1141,7 @@ const getTransforms = (code, 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 : transform.TypeParameterDeclaration(node.typeParameters)
       };
     },
@@ -650,7 +1156,7 @@ const getTransforms = (code, scopeManager) => {
         id: transform.Identifier(node.id, false),
         typeAnnotation: node.supertype == null ? {
           type: 'TSUnknownKeyword'
-        } : transform.TypeAnnotationType(node.supertype),
+        } : transformTypeAnnotationType(node.supertype),
         typeParameters: node.typeParameters == null ? undefined : transform.TypeParameterDeclaration(node.typeParameters)
       };
     },
@@ -665,297 +1171,24 @@ const getTransforms = (code, scopeManager) => {
           id: transform.Identifier(node.id, true),
           init: null
         }],
-        kind: 'var'
+        kind: node.kind
       };
     },
 
+    DeclareEnum(node) {
+      return EnumImpl(node);
+    },
+
     EmptyTypeAnnotation(node) {
       // 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');
+      return unsupportedAnnotation(node, 'empty type');
     },
 
     EnumDeclaration(node) {
-      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 = [];
-
-      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
-                }
-              });
-              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: []
-          }]
-        }
-      }];
+      return EnumImpl(node);
     },
 
     DeclareModuleExports(node) {
@@ -965,7 +1198,7 @@ const getTransforms = (code, scopeManager) => {
     ExistsTypeAnnotation(node) {
       // 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) {
@@ -984,11 +1217,12 @@ const getTransforms = (code, 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
@@ -996,7 +1230,10 @@ const getTransforms = (code, scopeManager) => {
             throw unexpectedTranslationError(node.declaration, `Unexpected named declaration found ${node.declaration.type}`);
 
           case 'EnumDeclaration':
-            return transform.EnumDeclaration(node.declaration);
+            {
+              const result = transform.EnumDeclaration(node.declaration);
+              return Array.isArray(result) ? result : [result, null];
+            }
 
           case 'InterfaceDeclaration':
             return [transform.InterfaceDeclaration(node.declaration), null];
@@ -1052,7 +1289,7 @@ const getTransforms = (code, scopeManager) => {
           name: 'this',
           typeAnnotation: {
             type: 'TSTypeAnnotation',
-            typeAnnotation: transform.TypeAnnotationType(node.this.typeAnnotation)
+            typeAnnotation: transformTypeAnnotationType(node.this.typeAnnotation)
           }
         });
       }
@@ -1067,7 +1304,7 @@ const getTransforms = (code, scopeManager) => {
           } : transform.Identifier(rest.name, false),
           typeAnnotation: {
             type: 'TSTypeAnnotation',
-            typeAnnotation: transform.TypeAnnotationType(rest.typeAnnotation)
+            typeAnnotation: transformTypeAnnotationType(rest.typeAnnotation)
           }
         });
       }
@@ -1077,7 +1314,7 @@ const getTransforms = (code, scopeManager) => {
         params,
         returnType: {
           type: 'TSTypeAnnotation',
-          typeAnnotation: transform.TypeAnnotationType(node.returnType)
+          typeAnnotation: transformTypeAnnotationType(node.returnType)
         },
         typeParameters: node.typeParameters == null ? undefined : transform.TypeParameterDeclaration(node.typeParameters)
       };
@@ -1089,7 +1326,7 @@ const getTransforms = (code, 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
       };
@@ -1129,7 +1366,7 @@ const getTransforms = (code, scopeManager) => {
           const res = [];
 
           for (const param of node.typeParameters.params) {
-            res.push(transform.TypeAnnotationType(param));
+            res.push(transformTypeAnnotationType(param));
           }
 
           return res;
@@ -1168,7 +1405,7 @@ const getTransforms = (code, scopeManager) => {
             type PropType = ReturnType<ExtractPropType<Obj>>; // number
             ```
             */
-            throw unsupportedTranslationError(node, fullTypeName);
+            return unsupportedAnnotation(node, fullTypeName);
           }
 
         case '$Diff':
@@ -1344,86 +1581,212 @@ const getTransforms = (code, scopeManager) => {
             };
           }
 
-        case '$Shape':
-        case '$Partial':
-          {
-            // `$Partial<T>` => `Partial<T>`
+        case '$Shape':
+        case '$Partial':
+          {
+            // `$Partial<T>` => `Partial<T>`
+            return {
+              type: 'TSTypeReference',
+              typeName: {
+                type: 'Identifier',
+                name: 'Partial'
+              },
+              typeParameters: {
+                type: 'TSTypeParameterInstantiation',
+                params: assertHasExactlyNTypeParameters(1)
+              }
+            };
+          }
+
+        case '$Values':
+          {
+            // `$Values<T>` => `T[keyof T]`
+            const transformedType = assertHasExactlyNTypeParameters(1)[0];
+            return {
+              type: 'TSIndexedAccessType',
+              objectType: transformedType,
+              indexType: {
+                type: 'TSTypeOperator',
+                operator: 'keyof',
+                typeAnnotation: transformedType
+              }
+            };
+          }
+
+        case 'Class':
+          {
+            // `Class<T>` => `new (...args: any[]) => T`
+            const param = assertHasExactlyNTypeParameters(1)[0];
+
+            if (param.type !== 'TSTypeReference') {
+              throw translationError(node, 'Expected a type reference within Class<T>');
+            }
+
+            return {
+              type: 'TSConstructorType',
+              abstract: false,
+              params: [{
+                type: 'RestElement',
+                argument: {
+                  type: 'Identifier',
+                  name: 'args'
+                },
+                typeAnnotation: {
+                  type: 'TSTypeAnnotation',
+                  typeAnnotation: {
+                    type: 'TSArrayType',
+                    elementType: {
+                      type: 'TSAnyKeyword'
+                    }
+                  }
+                }
+              }],
+              returnType: {
+                type: 'TSTypeAnnotation',
+                typeAnnotation: param
+              }
+            };
+          }
+      } // React special conversion:
+
+
+      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: 'Identifier',
-                name: 'Partial'
+                type: 'TSQualifiedName',
+                left: getReactIdentifier(),
+                right: {
+                  type: 'Identifier',
+                  name: `Context`
+                }
               },
               typeParameters: {
                 type: 'TSTypeParameterInstantiation',
                 params: assertHasExactlyNTypeParameters(1)
               }
             };
-          }
-
-        case '$Subtype':
-        case '$Supertype':
-          {
-            // These types are deprecated and shouldn't be used in any modern code
-            // so let's not even bother trying to figure it out
-            throw unsupportedTranslationError(node, fullTypeName);
-          }
-
-        case '$Values':
-          {
-            // `$Values<T>` => `T[keyof T]`
-            const transformedType = assertHasExactlyNTypeParameters(1)[0];
-            return {
-              type: 'TSIndexedAccessType',
-              objectType: transformedType,
-              indexType: {
-                type: 'TSTypeOperator',
-                operator: 'keyof',
-                typeAnnotation: transformedType
-              }
-            };
-          }
-
-        case 'Class':
-          {
-            // `Class<T>` => `new (...args: any[]) => T`
-            const param = assertHasExactlyNTypeParameters(1)[0];
-
-            if (param.type !== 'TSTypeReference') {
-              throw translationError(node, 'Expected a type reference within Class<T>');
-            }
+          // React.Key -> React.Key
+          // React$Key -> React.Key
 
+          case 'React.Key':
+          case 'React$Key':
+            assertHasExactlyNTypeParameters(0);
             return {
-              type: 'TSConstructorType',
-              abstract: false,
-              params: [{
-                type: 'RestElement',
-                argument: {
+              type: 'TSTypeReference',
+              typeName: {
+                type: 'TSQualifiedName',
+                left: getReactIdentifier(),
+                right: {
                   type: 'Identifier',
-                  name: 'args'
-                },
-                typeAnnotation: {
-                  type: 'TSTypeAnnotation',
-                  typeAnnotation: {
-                    type: 'TSArrayType',
-                    elementType: {
-                      type: 'TSAnyKeyword'
-                    }
-                  }
+                  name: 'Key'
                 }
-              }],
-              returnType: {
-                type: 'TSTypeAnnotation',
-                typeAnnotation: param
               }
             };
-          }
-      } // React special conversion:
+          // React.ElementType -> React.ElementType
+          // React$ElementType -> React.ElementType
 
-
-      if (isReactImport(baseId)) {
-        switch (fullTypeName) {
+          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':
             {
               assertHasExactlyNTypeParameters(0);
@@ -1431,7 +1794,7 @@ const getTransforms = (code, scopeManager) => {
                 type: 'TSTypeReference',
                 typeName: {
                   type: 'TSQualifiedName',
-                  left: transform.Identifier(baseId, false),
+                  left: getReactIdentifier(),
                   right: {
                     type: 'Identifier',
                     name: `ReactNode`
@@ -1442,13 +1805,14 @@ const getTransforms = (code, scopeManager) => {
             }
           // React.Element<typeof Component> -> React.ReactElement<typeof Component>
 
+          case 'React$Element':
           case 'React.Element':
             {
               return {
                 type: 'TSTypeReference',
                 typeName: {
                   type: 'TSQualifiedName',
-                  left: transform.Identifier(baseId, false),
+                  left: getReactIdentifier(),
                   right: {
                     type: 'Identifier',
                     name: `ReactElement`
@@ -1460,8 +1824,46 @@ const getTransforms = (code, scopeManager) => {
                 }
               };
             }
+          // React.ElementRef<typeof Component> -> React.ElementRef<typeof Component>
+          // React$ElementRef<typeof Component> -> React.ElementRef<typeof Component>
+
+          case 'React$ElementRef':
+          case 'React.ElementRef':
+            return {
+              type: 'TSTypeReference',
+              typeName: {
+                type: 'TSQualifiedName',
+                left: getReactIdentifier(),
+                right: {
+                  type: 'Identifier',
+                  name: `ElementRef`
+                }
+              },
+              typeParameters: {
+                type: 'TSTypeParameterInstantiation',
+                params: assertHasExactlyNTypeParameters(1)
+              }
+            };
+          // React$Fragment -> React.Fragment
+          // React.Fragment -> React.Fragment
+
+          case 'React$FragmentType':
+          case 'React.Fragment':
+            assertHasExactlyNTypeParameters(0);
+            return {
+              type: 'TSTypeReference',
+              typeName: {
+                type: 'TSQualifiedName',
+                left: getReactIdentifier(),
+                right: {
+                  type: 'Identifier',
+                  name: `Fragment`
+                }
+              }
+            };
           // React.MixedElement -> JSX.Element
 
+          case 'React$MixedElement':
           case 'React.MixedElement':
             {
               assertHasExactlyNTypeParameters(0);
@@ -1481,10 +1883,35 @@ const getTransforms = (code, scopeManager) => {
                 typeParameters: undefined
               };
             }
-          // React.AbstractComponent<Config> -> React.ForwardRefExoticComponent<Config>
-          // React.AbstractComponent<Config, Instance> -> React.ForwardRefExoticComponent<Config & React.RefAttributes<Instance>>
+          // 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;
 
@@ -1498,12 +1925,15 @@ const getTransforms = (code, scopeManager) => {
                 throw translationError(node, `Expected at no more than 2 type parameters with \`${fullTypeName}\``);
               }
 
-              let newTypeParam = transform.TypeAnnotationType(params[0]);
+              const newParams = (() => {
+                if (params.length === 1) {
+                  return assertHasExactlyNTypeParameters(1);
+                }
 
-              if (params[1] != null) {
-                newTypeParam = {
+                const [props, ref] = assertHasExactlyNTypeParameters(2);
+                return [{
                   type: 'TSIntersectionType',
-                  types: [newTypeParam, {
+                  types: [props, {
                     type: 'TSTypeReference',
                     typeName: {
                       type: 'TSQualifiedName',
@@ -1518,28 +1948,108 @@ const getTransforms = (code, scopeManager) => {
                     },
                     typeParameters: {
                       type: 'TSTypeParameterInstantiation',
-                      params: [transform.TypeAnnotationType(params[1])]
+                      params: [ref]
                     }
                   }]
-                };
-              }
+                }];
+              })();
+
+              return {
+                type: 'TSTypeReference',
+                typeName: {
+                  type: 'TSQualifiedName',
+                  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: transform.Identifier(baseId, false),
+                  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:
+            return unsupportedAnnotation(node, fullTypeName);
         }
       }
 
@@ -1563,8 +2073,8 @@ const getTransforms = (code, scopeManager) => {
     IndexedAccessType(node) {
       return {
         type: 'TSIndexedAccessType',
-        objectType: transform.TypeAnnotationType(node.objectType),
-        indexType: transform.TypeAnnotationType(node.indexType)
+        objectType: transformTypeAnnotationType(node.objectType),
+        indexType: transformTypeAnnotationType(node.indexType)
       };
     },
 
@@ -1581,65 +2091,63 @@ const getTransforms = (code, scopeManager) => {
     },
 
     ImportDeclaration(node) {
-      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:
-         ```
-        import typeof Foo from 'Foo';
-        type T = Foo;
-        ```
-         would become:
-         ```
-        import type Foo from 'Foo';
-        type T = typeof Foo;
-        ```
-         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 {
-        type: 'ImportDeclaration',
-        assertions: node.assertions.map(transform.ImportAttribute),
-        importKind: importKind != null ? importKind : 'value',
-        source: transform.StringLiteral(node.source),
-        specifiers: node.specifiers.map(spec => {
-          var _spec$importKind;
-
-          switch (spec.type) {
-            case 'ImportDefaultSpecifier':
-              return {
-                type: 'ImportDefaultSpecifier',
-                local: transform.Identifier(spec.local, false)
-              };
+      const specifiers = [];
+      const unsupportedSpecifiers = [];
+      node.specifiers.forEach(spec => {
+        let id = (() => {
+          if (node.importKind === 'typeof' || spec.importKind === 'typeof') {
+            const id = {
+              type: 'Identifier',
+              name: getPlaceholderNameForTypeofImport()
+            };
+            unsupportedSpecifiers.push({
+              type: 'TSTypeAliasDeclaration',
+              id: transform.Identifier(spec.local, false),
+              typeAnnotation: {
+                type: 'TSTypeQuery',
+                exprName: id
+              }
+            });
+            return id;
+          }
 
-            case 'ImportNamespaceSpecifier':
-              return {
-                type: 'ImportNamespaceSpecifier',
-                local: transform.Identifier(spec.local, false)
-              };
+          return transform.Identifier(spec.local, false);
+        })();
 
-            case 'ImportSpecifier':
-              if (spec.importKind === 'typeof') {
-                // see above
-                throw unsupportedTranslationError(node, 'typeof imports');
-              }
+        switch (spec.type) {
+          case 'ImportDefaultSpecifier':
+            specifiers.push({
+              type: 'ImportDefaultSpecifier',
+              local: id
+            });
+            return;
 
-              return {
-                type: 'ImportSpecifier',
-                importKind: (_spec$importKind = spec.importKind) != null ? _spec$importKind : 'value',
-                imported: transform.Identifier(spec.imported, false),
-                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 != null ? importKind : 'value',
+        source: transform.StringLiteral(node.source),
+        specifiers
+      }] : [];
+      return [...out, ...unsupportedSpecifiers];
     },
 
     InterfaceExtends(node) {
@@ -1671,7 +2179,7 @@ const getTransforms = (code, scopeManager) => {
     IntersectionTypeAnnotation(node) {
       return {
         type: 'TSIntersectionType',
-        types: node.types.map(transform.TypeAnnotationType)
+        types: node.types.map(transformTypeAnnotationType)
       };
     },
 
@@ -1726,7 +2234,7 @@ const getTransforms = (code, scopeManager) => {
           type: 'TSNullKeyword'
         }, {
           type: 'TSUndefinedKeyword'
-        }, transform.TypeAnnotationType(node.typeAnnotation)]
+        }, transformTypeAnnotationType(node.typeAnnotation)]
       };
     },
 
@@ -1783,7 +2291,7 @@ const getTransforms = (code, scopeManager) => {
 
 
       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)) {
@@ -1794,6 +2302,11 @@ const getTransforms = (code, 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)
@@ -1870,7 +2383,7 @@ const getTransforms = (code, scopeManager) => {
         - spreads of things that aren't "Identifiers"
         */
         if (members.length > 0) {
-          throw unsupportedTranslationError(node, 'object types with spreads, indexers and/or call properties at the same time');
+          return unsupportedAnnotation(node, 'object types with spreads, indexers and/or call properties at the same time');
         }
 
         const typesToIntersect = [];
@@ -1878,16 +2391,19 @@ const getTransforms = (code, scopeManager) => {
         for (const property of node.properties) {
           if (property.type === 'ObjectTypeSpreadProperty') {
             if (members.length > 0) {
-              throw unsupportedTranslationError(property, 'object types with spreads in the middle or at the end');
+              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(property, 'object types with complex spreads');
+              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],
@@ -1957,14 +2473,14 @@ const getTransforms = (code, scopeManager) => {
           name: node.id == null ? '$$Key$$' : node.id.name,
           typeAnnotation: {
             type: 'TSTypeAnnotation',
-            typeAnnotation: transform.TypeAnnotationType(node.key)
+            typeAnnotation: transformTypeAnnotationType(node.key)
           }
         }],
         readonly: ((_node$variance = node.variance) == null ? void 0 : _node$variance.kind) === 'plus',
         static: node.static,
         typeAnnotation: {
           type: 'TSTypeAnnotation',
-          typeAnnotation: transform.TypeAnnotationType(node.value)
+          typeAnnotation: transformTypeAnnotationType(node.value)
         }
       };
     },
@@ -2019,7 +2535,7 @@ const getTransforms = (code, scopeManager) => {
         static: node.static,
         typeAnnotation: {
           type: 'TSTypeAnnotation',
-          typeAnnotation: transform.TypeAnnotationType(node.value)
+          typeAnnotation: transformTypeAnnotationType(node.value)
         }
       };
     },
@@ -2048,10 +2564,10 @@ const getTransforms = (code, scopeManager) => {
           },
           typeParameters: {
             type: 'TSTypeParameterInstantiation',
-            params: [transform.TypeAnnotationType(node.objectType)]
+            params: [transformTypeAnnotationType(node.objectType)]
           }
         },
-        indexType: transform.TypeAnnotationType(node.indexType)
+        indexType: transformTypeAnnotationType(node.indexType)
       };
     },
 
@@ -2064,6 +2580,15 @@ const getTransforms = (code, scopeManager) => {
       };
     },
 
+    QualifiedTypeofIdentifier(node) {
+      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) {
       return {
         type: 'Literal',
@@ -2116,7 +2641,7 @@ const getTransforms = (code, scopeManager) => {
     TupleTypeAnnotation(node) {
       return {
         type: 'TSTupleType',
-        elementTypes: node.types.map(transform.TypeAnnotationType)
+        elementTypes: node.types.map(transformTypeAnnotationType)
       };
     },
 
@@ -2127,116 +2652,26 @@ const getTransforms = (code, scopeManager) => {
     TypeAnnotation(node) {
       return {
         type: 'TSTypeAnnotation',
-        typeAnnotation: transform.TypeAnnotationType(node.typeAnnotation)
+        typeAnnotation: transformTypeAnnotationType(node.typeAnnotation)
       };
     },
 
-    TypeAnnotationType(node) {
-      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) {
-      const argument = transform.TypeAnnotationType(node.argument);
+      switch (node.argument.type) {
+        case 'Identifier':
+          return {
+            type: 'TSTypeQuery',
+            exprName: transform.Identifier(node.argument),
+            typeParameters: undefined
+          };
 
-      if (argument.type !== 'TSTypeReference') {
-        throw unexpectedTranslationError(node, `Expected to find a type reference as the argument to the TypeofTypeAnnotation, but got ${node.argument.type}`);
+        case 'QualifiedTypeofIdentifier':
+          return {
+            type: 'TSTypeQuery',
+            exprName: transform.QualifiedTypeofIdentifier(node.argument),
+            typeParameters: undefined
+          };
       }
-
-      return {
-        type: 'TSTypeQuery',
-        exprName: argument.typeName,
-        typeParameters: argument.typeParameters
-      };
     },
 
     TypeParameter(node) {
@@ -2265,8 +2700,8 @@ const getTransforms = (code, scopeManager) => {
           type: 'Identifier',
           name: node.name
         },
-        constraint: node.bound == null ? undefined : transform.TypeAnnotationType(node.bound.typeAnnotation),
-        default: node.default == null ? undefined : transform.TypeAnnotationType(node.default),
+        constraint: node.bound == null ? undefined : transformTypeAnnotationType(node.bound.typeAnnotation),
+        default: node.default == null ? undefined : transformTypeAnnotationType(node.default),
         in: false,
         out: false // in: variance.has('in'),
         // out: variance.has('out'),
@@ -2284,14 +2719,14 @@ const getTransforms = (code, scopeManager) => {
     TypeParameterInstantiation(node) {
       return {
         type: 'TSTypeParameterInstantiation',
-        params: node.params.map(transform.TypeAnnotationType)
+        params: node.params.map(transformTypeAnnotationType)
       };
     },
 
     UnionTypeAnnotation(node) {
       return {
         type: 'TSUnionType',
-        types: node.types.map(transform.TypeAnnotationType)
+        types: node.types.map(transformTypeAnnotationType)
       };
     },
 
@@ -2321,5 +2756,5 @@ const getTransforms = (code, scopeManager) => {
     };
   }
 
-  return transform;
+  return [transform, code];
 };