diff --git a/tests/gentype_tests/typescript-react-example/Makefile b/tests/gentype_tests/typescript-react-example/Makefile
index a38ce95510..1ae0f45d25 100644
--- a/tests/gentype_tests/typescript-react-example/Makefile
+++ b/tests/gentype_tests/typescript-react-example/Makefile
@@ -9,7 +9,7 @@ test:
 		|| exit 1
 
 clean:
-	rm -rf lib src/*.res.js src/*.gen.tsx
+	yarn check
 
 .DEFAULT_GOAL := test
 
diff --git a/tests/gentype_tests/typescript-react-example/src/DynamicallyLoadedComponent.res.js b/tests/gentype_tests/typescript-react-example/src/DynamicallyLoadedComponent.res.js
new file mode 100644
index 0000000000..80bc599ff9
--- /dev/null
+++ b/tests/gentype_tests/typescript-react-example/src/DynamicallyLoadedComponent.res.js
@@ -0,0 +1,13 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+
+function DynamicallyLoadedComponent(props) {
+  return props.s;
+}
+
+let make = DynamicallyLoadedComponent;
+
+export {
+  make,
+}
+/* No side effect */
diff --git a/tests/gentype_tests/typescript-react-example/src/ExportWithRename.gen.tsx b/tests/gentype_tests/typescript-react-example/src/ExportWithRename.gen.tsx
new file mode 100644
index 0000000000..6e8cb207cc
--- /dev/null
+++ b/tests/gentype_tests/typescript-react-example/src/ExportWithRename.gen.tsx
@@ -0,0 +1,10 @@
+/* TypeScript file generated from ExportWithRename.res by genType. */
+
+/* eslint-disable */
+/* tslint:disable */
+
+import * as ExportWithRenameJS from './ExportWithRename.res.js';
+
+export type props<s> = { readonly s: s };
+
+export const Renamed: React.ComponentType<{ readonly s: string }> = ExportWithRenameJS.make as any;
diff --git a/tests/gentype_tests/typescript-react-example/src/ExportWithRename.res.js b/tests/gentype_tests/typescript-react-example/src/ExportWithRename.res.js
new file mode 100644
index 0000000000..3d13c84a2f
--- /dev/null
+++ b/tests/gentype_tests/typescript-react-example/src/ExportWithRename.res.js
@@ -0,0 +1,13 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+
+function ExportWithRename(props) {
+  return props.s;
+}
+
+let make = ExportWithRename;
+
+export {
+  make,
+}
+/* No side effect */
diff --git a/tests/gentype_tests/typescript-react-example/src/Hooks.gen.tsx b/tests/gentype_tests/typescript-react-example/src/Hooks.gen.tsx
new file mode 100644
index 0000000000..1d9a1e530f
--- /dev/null
+++ b/tests/gentype_tests/typescript-react-example/src/Hooks.gen.tsx
@@ -0,0 +1,141 @@
+/* TypeScript file generated from Hooks.res by genType. */
+
+/* eslint-disable */
+/* tslint:disable */
+
+import * as HooksJS from './Hooks.res.js';
+
+import type {TypedArray2_Uint8Array_t as Js_TypedArray2_Uint8Array_t} from '../src/shims/Js.shim';
+
+export type vehicle = { readonly name: string };
+
+export type props<vehicle> = { readonly vehicle: vehicle };
+
+export type Another_props<vehicle,callback> = { readonly vehicle: vehicle; readonly callback: callback };
+
+export type Inner_props<vehicle> = { readonly vehicle: vehicle };
+
+export type Inner_Another_props<vehicle> = { readonly vehicle: vehicle };
+
+export type Inner_Inner2_props<vehicle> = { readonly vehicle: vehicle };
+
+export type Inner_Inner2_Another_props<vehicle> = { readonly vehicle: vehicle };
+
+export type NoProps_props = {};
+
+export type cb = (_to:vehicle) => void;
+
+export type WithRename_props<T_to,T_Type,cb> = {
+  readonly _to: T_to; 
+  readonly _Type: T_Type; 
+  readonly cb: cb
+};
+
+export type WithRef_props<vehicle> = { readonly vehicle: vehicle };
+
+export type r = { readonly x: string };
+
+export type callback<input,output> = (_1:input) => output;
+
+export type testReactContext = React.Context<number>;
+
+export type testReactRef = { current: (null | number) };
+
+export type testDomRef = React.Ref<unknown>;
+
+export type testDomRef2 = React.Ref<unknown>;
+
+export type Poly_props<p> = { readonly p: p };
+
+export type Fun_props<name> = { readonly name: name };
+
+export type RenderPropRequiresConversion_props<renderVehicle> = { readonly renderVehicle: renderVehicle };
+
+export type WithChildren_props<vehicle,children> = { readonly vehicle: vehicle; readonly children: children };
+
+export type DD_props<array,name> = { readonly array: array; readonly name: name };
+
+export const $$default: React.ComponentType<{ readonly vehicle: vehicle }> = HooksJS.default as any;
+
+export default $$default;
+
+export const Another_anotherComponent: React.ComponentType<{ readonly vehicle: vehicle; readonly callback: () => void }> = HooksJS.Another.anotherComponent as any;
+
+export const Inner_make: React.ComponentType<{ readonly vehicle: vehicle }> = HooksJS.Inner.make as any;
+
+export const Inner_Another_anotherComponent: React.ComponentType<{ readonly vehicle: vehicle }> = HooksJS.Inner.Another.anotherComponent as any;
+
+export const Inner_Inner2_make: React.ComponentType<{ readonly vehicle: vehicle }> = HooksJS.Inner.Inner2.make as any;
+
+export const Inner_Inner2_Another_anotherComponent: React.ComponentType<{ readonly vehicle: vehicle }> = HooksJS.Inner.Inner2.Another.anotherComponent as any;
+
+export const NoProps_make: React.ComponentType<{}> = HooksJS.NoProps.make as any;
+
+export const functionWithRenamedArgs: (_to:vehicle, _Type:vehicle, cb:cb) => string = HooksJS.functionWithRenamedArgs as any;
+
+export const WithRename_componentWithRenamedArgs: React.ComponentType<{
+  readonly _to: vehicle; 
+  readonly _Type: vehicle; 
+  readonly cb: cb
+}> = HooksJS.WithRename.componentWithRenamedArgs as any;
+
+export const WithRef_makeWithRef: (_1:WithRef_props<vehicle>) => (_1:(null | undefined | any)) => JSX.Element = HooksJS.WithRef.makeWithRef as any;
+
+export const testForwardRef: React.ComponentType<{ readonly vehicle: vehicle }> = HooksJS.testForwardRef as any;
+
+export const ForwardRef_input: (_1:r) => JSX.Element = HooksJS.ForwardRef.input as any;
+
+export const Poly_polymorphicComponent: React.ComponentType<{ readonly p: [vehicle, any] }> = HooksJS.Poly.polymorphicComponent as any;
+
+export const Fun_functionReturningReactElement: React.ComponentType<{ readonly name: string }> = HooksJS.Fun.functionReturningReactElement as any;
+
+export const RenderPropRequiresConversion_make: React.ComponentType<{ readonly renderVehicle: React.ComponentType<{ readonly number: number; readonly vehicle: vehicle }> }> = HooksJS.RenderPropRequiresConversion.make as any;
+
+export const WithChildren_aComponentWithChildren: React.ComponentType<{ readonly vehicle: vehicle; readonly children: React.ReactNode }> = HooksJS.WithChildren.aComponentWithChildren as any;
+
+export const DD_make: React.ComponentType<{ readonly array: Js_TypedArray2_Uint8Array_t; readonly name: string }> = HooksJS.DD.make as any;
+
+export const NoProps: { make: React.ComponentType<{}> } = HooksJS.NoProps as any;
+
+export const Inner: {
+  Inner2: {
+    Another: {
+      anotherComponent: React.ComponentType<{
+        readonly vehicle: vehicle
+      }>
+    }; 
+    make: React.ComponentType<{
+      readonly vehicle: vehicle
+    }>
+  }; 
+  Another: {
+    anotherComponent: React.ComponentType<{
+      readonly vehicle: vehicle
+    }>
+  }; 
+  make: React.ComponentType<{
+    readonly vehicle: vehicle
+  }>
+} = HooksJS.Inner as any;
+
+export const RenderPropRequiresConversion: { make: React.ComponentType<{ readonly renderVehicle: React.ComponentType<{ readonly number: number; readonly vehicle: vehicle }> }> } = HooksJS.RenderPropRequiresConversion as any;
+
+export const WithRename: { componentWithRenamedArgs: React.ComponentType<{
+  readonly _to: vehicle; 
+  readonly _Type: vehicle; 
+  readonly cb: cb
+}> } = HooksJS.WithRename as any;
+
+export const ForwardRef: { input: (_1:r) => JSX.Element } = HooksJS.ForwardRef as any;
+
+export const Fun: { functionReturningReactElement: React.ComponentType<{ readonly name: string }> } = HooksJS.Fun as any;
+
+export const WithRef: { makeWithRef: (_1:WithRef_props<vehicle>) => (_1:(null | undefined | any)) => JSX.Element } = HooksJS.WithRef as any;
+
+export const WithChildren: { aComponentWithChildren: React.ComponentType<{ readonly vehicle: vehicle; readonly children: React.ReactNode }> } = HooksJS.WithChildren as any;
+
+export const DD: { make: React.ComponentType<{ readonly array: Js_TypedArray2_Uint8Array_t; readonly name: string }> } = HooksJS.DD as any;
+
+export const Another: { anotherComponent: React.ComponentType<{ readonly vehicle: vehicle; readonly callback: () => void }> } = HooksJS.Another as any;
+
+export const Poly: { polymorphicComponent: React.ComponentType<{ readonly p: [vehicle, any] }> } = HooksJS.Poly as any;
diff --git a/tests/gentype_tests/typescript-react-example/src/Hooks.res.js b/tests/gentype_tests/typescript-react-example/src/Hooks.res.js
new file mode 100644
index 0000000000..8d6972ea24
--- /dev/null
+++ b/tests/gentype_tests/typescript-react-example/src/Hooks.res.js
@@ -0,0 +1,231 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+import * as React from "react";
+import * as ImportHooks from "./ImportHooks.res.js";
+import * as Primitive_option from "rescript/lib/es6/Primitive_option.js";
+import * as ImportHookDefault from "./ImportHookDefault.res.js";
+import * as JsxRuntime from "react/jsx-runtime";
+
+function Hooks(props) {
+  let match = React.useState(() => 0);
+  let setCount = match[1];
+  let count = match[0];
+  return JsxRuntime.jsxs("div", {
+    children: [
+      JsxRuntime.jsx("p", {
+        children: "Hooks example " + (props.vehicle.name + (" clicked " + (String(count) + " times")))
+      }),
+      JsxRuntime.jsx("button", {
+        children: "Click me",
+        onClick: param => setCount(param => count + 1 | 0)
+      }),
+      JsxRuntime.jsxs(ImportHooks.make, {
+        person: {
+          name: "Mary",
+          age: 71
+        },
+        children: [
+          "child1",
+          "child2"
+        ],
+        renderMe: x => x.randomString
+      }),
+      JsxRuntime.jsxs(ImportHookDefault.make, {
+        person: {
+          name: "DefaultImport",
+          age: 42
+        },
+        children: [
+          "child1",
+          "child2"
+        ],
+        renderMe: x => x.randomString
+      })
+    ]
+  });
+}
+
+function Hooks$Another$anotherComponent(props) {
+  props.callback();
+  return JsxRuntime.jsx("div", {
+    children: "Another Hook " + props.vehicle.name
+  });
+}
+
+let Another = {
+  anotherComponent: Hooks$Another$anotherComponent
+};
+
+function Hooks$Inner(props) {
+  return JsxRuntime.jsx("div", {
+    children: "Another Hook " + props.vehicle.name
+  });
+}
+
+function Hooks$Inner$Another$anotherComponent(props) {
+  return JsxRuntime.jsx("div", {
+    children: "Another Hook " + props.vehicle.name
+  });
+}
+
+let Another$1 = {
+  anotherComponent: Hooks$Inner$Another$anotherComponent
+};
+
+function Hooks$Inner$Inner2(props) {
+  return JsxRuntime.jsx("div", {
+    children: "Another Hook " + props.vehicle.name
+  });
+}
+
+function Hooks$Inner$Inner2$Another$anotherComponent(props) {
+  return JsxRuntime.jsx("div", {
+    children: "Another Hook " + props.vehicle.name
+  });
+}
+
+let Another$2 = {
+  anotherComponent: Hooks$Inner$Inner2$Another$anotherComponent
+};
+
+let Inner2 = {
+  make: Hooks$Inner$Inner2,
+  Another: Another$2
+};
+
+let Inner = {
+  make: Hooks$Inner,
+  Another: Another$1,
+  Inner2: Inner2
+};
+
+function Hooks$NoProps(props) {
+  return JsxRuntime.jsx("div", {
+    children: null
+  });
+}
+
+let NoProps = {
+  make: Hooks$NoProps
+};
+
+function functionWithRenamedArgs(_to, _Type, cb) {
+  cb(_to);
+  return _to.name + _Type.name;
+}
+
+function Hooks$WithRename$componentWithRenamedArgs(props) {
+  let _to = props._to;
+  props.cb(_to);
+  return _to.name + props._Type.name;
+}
+
+let WithRename = {
+  componentWithRenamedArgs: Hooks$WithRename$componentWithRenamedArgs
+};
+
+function makeWithRef(param) {
+  let vehicle = param.vehicle;
+  return ref => {
+    if (ref == null) {
+      return null;
+    } else {
+      return JsxRuntime.jsx("button", {
+        children: vehicle.name,
+        ref: Primitive_option.some(ref)
+      });
+    }
+  };
+}
+
+let Hooks$WithRef$makeWithRef = makeWithRef;
+
+let WithRef = {
+  makeWithRef: Hooks$WithRef$makeWithRef
+};
+
+let testForwardRef = React.forwardRef((x, y) => makeWithRef(x)(y));
+
+let input = React.forwardRef((r, ref) => JsxRuntime.jsx("div", {
+  children: r.x,
+  ref: Primitive_option.some(ref)
+}));
+
+let ForwardRef = {
+  input: input
+};
+
+function Hooks$Poly$polymorphicComponent(props) {
+  return props.p[0].name;
+}
+
+let Poly = {
+  polymorphicComponent: Hooks$Poly$polymorphicComponent
+};
+
+function Hooks$Fun$functionReturningReactElement(props) {
+  return props.name;
+}
+
+let Fun = {
+  functionReturningReactElement: Hooks$Fun$functionReturningReactElement
+};
+
+function Hooks$RenderPropRequiresConversion(props) {
+  return props.renderVehicle({
+    vehicle: {
+      name: "Car"
+    },
+    number: 42
+  });
+}
+
+let RenderPropRequiresConversion = {
+  make: Hooks$RenderPropRequiresConversion
+};
+
+function Hooks$WithChildren$aComponentWithChildren(props) {
+  return JsxRuntime.jsxs("div", {
+    children: [
+      "Another Hook " + props.vehicle.name,
+      JsxRuntime.jsx("div", {
+        children: props.children
+      })
+    ]
+  });
+}
+
+let WithChildren = {
+  aComponentWithChildren: Hooks$WithChildren$aComponentWithChildren
+};
+
+function Hooks$DD(props) {
+  return props.name;
+}
+
+let DD = {
+  make: Hooks$DD
+};
+
+let make = Hooks;
+
+let $$default = Hooks;
+
+export {
+  make,
+  $$default as default,
+  Another,
+  Inner,
+  NoProps,
+  functionWithRenamedArgs,
+  WithRename,
+  WithRef,
+  testForwardRef,
+  ForwardRef,
+  Poly,
+  Fun,
+  RenderPropRequiresConversion,
+  WithChildren,
+  DD,
+}
+/* testForwardRef Not a pure module */
diff --git a/tests/gentype_tests/typescript-react-example/src/ImportHookDefault.gen.tsx b/tests/gentype_tests/typescript-react-example/src/ImportHookDefault.gen.tsx
new file mode 100644
index 0000000000..8552188b0e
--- /dev/null
+++ b/tests/gentype_tests/typescript-react-example/src/ImportHookDefault.gen.tsx
@@ -0,0 +1,54 @@
+/* TypeScript file generated from ImportHookDefault.res by genType. */
+
+/* eslint-disable */
+/* tslint:disable */
+
+import {default as makeNotChecked} from './hookExample';
+
+import {default as defaultNotChecked} from './hookExample';
+
+// In case of type error, check the type of 'make' in 'ImportHookDefault.res' and './hookExample'.
+export const makeTypeChecked: React.ComponentType<{
+  readonly person: person; 
+  readonly children: React.ReactNode; 
+  readonly renderMe: ImportHooks_renderMe<string>
+}> = makeNotChecked as any;
+
+// Export 'make' early to allow circular import from the '.bs.js' file.
+export const make: unknown = makeTypeChecked as React.ComponentType<{
+  readonly person: person; 
+  readonly children: React.ReactNode; 
+  readonly renderMe: ImportHooks_renderMe<string>
+}> as any;
+
+// In case of type error, check the type of 'default' in 'ImportHookDefault.res' and './hookExample'.
+export const defaultTypeChecked: React.ComponentType<{
+  readonly person: person; 
+  readonly children: React.ReactNode; 
+  readonly renderMe: ImportHooks_renderMe<string>
+}> = defaultNotChecked as any;
+
+// Export '$$default' early to allow circular import from the '.bs.js' file.
+export const $$default: unknown = defaultTypeChecked as React.ComponentType<{
+  readonly person: person; 
+  readonly children: React.ReactNode; 
+  readonly renderMe: ImportHooks_renderMe<string>
+}> as any;
+
+import type {renderMe as ImportHooks_renderMe} from './ImportHooks.gen';
+
+export type person = { readonly name: string; readonly age: number };
+
+export type props<person,children,renderMe> = {
+  readonly person: person; 
+  readonly children: children; 
+  readonly renderMe: renderMe
+};
+
+export type MM_props<person,children,renderMe> = {
+  readonly person: person; 
+  readonly children: children; 
+  readonly renderMe: renderMe
+};
+
+export default $$default;
diff --git a/tests/gentype_tests/typescript-react-example/src/ImportHookDefault.res.js b/tests/gentype_tests/typescript-react-example/src/ImportHookDefault.res.js
new file mode 100644
index 0000000000..8b5cb1e464
--- /dev/null
+++ b/tests/gentype_tests/typescript-react-example/src/ImportHookDefault.res.js
@@ -0,0 +1,18 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+import ImportHookDefaultGen from "./ImportHookDefault.gen";
+import * as ImportHookDefaultGen$1 from "./ImportHookDefault.gen";
+
+let make = ImportHookDefaultGen$1.make;
+
+let make2 = ImportHookDefaultGen;
+
+let MM = {
+  make2: make2
+};
+
+export {
+  make,
+  MM,
+}
+/* make Not a pure module */
diff --git a/tests/gentype_tests/typescript-react-example/src/ImportHooks.gen.tsx b/tests/gentype_tests/typescript-react-example/src/ImportHooks.gen.tsx
new file mode 100644
index 0000000000..fc7dd23a2e
--- /dev/null
+++ b/tests/gentype_tests/typescript-react-example/src/ImportHooks.gen.tsx
@@ -0,0 +1,41 @@
+/* TypeScript file generated from ImportHooks.res by genType. */
+
+/* eslint-disable */
+/* tslint:disable */
+
+import {makeRenamed as makeRenamedNotChecked} from './hookExample';
+
+import {foo as fooNotChecked} from './hookExample';
+
+// In case of type error, check the type of 'makeRenamed' in 'ImportHooks.res' and './hookExample'.
+export const makeRenamedTypeChecked: React.ComponentType<{
+  readonly actions?: JSX.Element; 
+  readonly person: person; 
+  readonly children: React.ReactNode; 
+  readonly renderMe: renderMe<any>
+}> = makeRenamedNotChecked as any;
+
+// Export 'makeRenamed' early to allow circular import from the '.bs.js' file.
+export const makeRenamed: unknown = makeRenamedTypeChecked as React.ComponentType<{
+  readonly actions?: JSX.Element; 
+  readonly person: person; 
+  readonly children: React.ReactNode; 
+  readonly renderMe: renderMe<any>
+}> as any;
+
+// In case of type error, check the type of 'foo' in 'ImportHooks.res' and './hookExample'.
+export const fooTypeChecked: (person:person) => string = fooNotChecked as any;
+
+// Export 'foo' early to allow circular import from the '.bs.js' file.
+export const foo: unknown = fooTypeChecked as (person:person) => string as any;
+
+export type person = { readonly name: string; readonly age: number };
+
+export type renderMe<a> = React.ComponentType<{ readonly randomString: string; readonly poly: a }>;
+
+export type props<actions,person,children,renderMe> = {
+  readonly actions?: actions; 
+  readonly person: person; 
+  readonly children: children; 
+  readonly renderMe: renderMe
+};
diff --git a/tests/gentype_tests/typescript-react-example/src/ImportHooks.res.js b/tests/gentype_tests/typescript-react-example/src/ImportHooks.res.js
new file mode 100644
index 0000000000..8bcba0f408
--- /dev/null
+++ b/tests/gentype_tests/typescript-react-example/src/ImportHooks.res.js
@@ -0,0 +1,15 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+import * as ImportHooksGen from "./ImportHooks.gen";
+
+let make = ImportHooksGen.makeRenamed;
+
+function foo(prim) {
+  return ImportHooksGen.foo(prim);
+}
+
+export {
+  make,
+  foo,
+}
+/* make Not a pure module */
diff --git a/tests/gentype_tests/typescript-react-example/src/ImportIndex.gen.tsx b/tests/gentype_tests/typescript-react-example/src/ImportIndex.gen.tsx
new file mode 100644
index 0000000000..31f142f075
--- /dev/null
+++ b/tests/gentype_tests/typescript-react-example/src/ImportIndex.gen.tsx
@@ -0,0 +1,16 @@
+/* TypeScript file generated from ImportIndex.res by genType. */
+
+/* eslint-disable */
+/* tslint:disable */
+
+import {default as defaultNotChecked} from './';
+
+// In case of type error, check the type of 'default' in 'ImportIndex.res' and './'.
+export const defaultTypeChecked: React.ComponentType<{ readonly method?: "push" | "replace" }> = defaultNotChecked as any;
+
+// Export '$$default' early to allow circular import from the '.bs.js' file.
+export const $$default: unknown = defaultTypeChecked as React.ComponentType<{ readonly method?: "push" | "replace" }> as any;
+
+export type props<method> = { readonly method?: method };
+
+export default $$default;
diff --git a/tests/gentype_tests/typescript-react-example/src/ImportIndex.res.js b/tests/gentype_tests/typescript-react-example/src/ImportIndex.res.js
new file mode 100644
index 0000000000..34ab9cf267
--- /dev/null
+++ b/tests/gentype_tests/typescript-react-example/src/ImportIndex.res.js
@@ -0,0 +1,10 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+import ImportIndexGen from "./ImportIndex.gen";
+
+let make = ImportIndexGen;
+
+export {
+  make,
+}
+/* make Not a pure module */
diff --git a/tests/gentype_tests/typescript-react-example/src/JSXV4.gen.tsx b/tests/gentype_tests/typescript-react-example/src/JSXV4.gen.tsx
new file mode 100644
index 0000000000..5d138887bf
--- /dev/null
+++ b/tests/gentype_tests/typescript-react-example/src/JSXV4.gen.tsx
@@ -0,0 +1,43 @@
+/* TypeScript file generated from JSXV4.res by genType. */
+
+/* eslint-disable */
+/* tslint:disable */
+
+import {make as makeNotChecked} from './hookExample';
+
+// In case of type error, check the type of 'make' in 'JSXV4.res' and './hookExample'.
+export const makeTypeChecked: React.ComponentType<{
+  readonly actions?: JSX.Element; 
+  readonly person: person; 
+  readonly children: React.ReactNode; 
+  readonly renderMe: renderMe<any>
+}> = makeNotChecked as any;
+
+// Export 'make' early to allow circular import from the '.bs.js' file.
+export const make: unknown = makeTypeChecked as React.ComponentType<{
+  readonly actions?: JSX.Element; 
+  readonly person: person; 
+  readonly children: React.ReactNode; 
+  readonly renderMe: renderMe<any>
+}> as any;
+
+const JSXV4JS = require('./JSXV4.res.js');
+
+export type CompV4_props<x,y> = { readonly x: x; readonly y: y };
+
+export type person = { readonly name: string; readonly age: number };
+
+export type props2<a> = { readonly randomString: string; readonly poly: a };
+
+export type renderMe<a> = (_1:props2<a>) => JSX.Element;
+
+export type props<actions,person,children,renderMe> = {
+  readonly actions?: actions; 
+  readonly person: person; 
+  readonly children: children; 
+  readonly renderMe: renderMe
+};
+
+export const CompV4_make: React.ComponentType<{ readonly x: string; readonly y: string }> = JSXV4JS.CompV4.make as any;
+
+export const CompV4: { make: React.ComponentType<{ readonly x: string; readonly y: string }> } = JSXV4JS.CompV4 as any;
diff --git a/tests/gentype_tests/typescript-react-example/src/JSXV4.res.js b/tests/gentype_tests/typescript-react-example/src/JSXV4.res.js
new file mode 100644
index 0000000000..016dda6790
--- /dev/null
+++ b/tests/gentype_tests/typescript-react-example/src/JSXV4.res.js
@@ -0,0 +1,19 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+import * as JSXV4Gen from "./JSXV4.gen";
+
+function JSXV4$CompV4(props) {
+  return props.x + props.y;
+}
+
+let CompV4 = {
+  make: JSXV4$CompV4
+};
+
+let make = JSXV4Gen.make;
+
+export {
+  CompV4,
+  make,
+}
+/* make Not a pure module */
diff --git a/tests/gentype_tests/typescript-react-example/src/MyInput.gen.tsx b/tests/gentype_tests/typescript-react-example/src/MyInput.gen.tsx
new file mode 100644
index 0000000000..9e9e897357
--- /dev/null
+++ b/tests/gentype_tests/typescript-react-example/src/MyInput.gen.tsx
@@ -0,0 +1,20 @@
+/* TypeScript file generated from MyInput.res by genType. */
+
+/* eslint-disable */
+/* tslint:disable */
+
+import {default as defaultNotChecked} from './MyInput';
+
+// In case of type error, check the type of 'default' in 'MyInput.res' and './MyInput'.
+export const defaultTypeChecked: React.ComponentType<{ readonly onFocus?: (_1:inputFocusEvent) => void }> = defaultNotChecked as any;
+
+// Export '$$default' early to allow circular import from the '.bs.js' file.
+export const $$default: unknown = defaultTypeChecked as React.ComponentType<{ readonly onFocus?: (_1:inputFocusEvent) => void }> as any;
+
+import type {inputFocusEvent as $$inputFocusEvent} from './shims/JsxEvent.shim';
+
+export type inputFocusEvent = $$inputFocusEvent;
+
+export type props<onFocus> = { readonly onFocus?: onFocus };
+
+export default $$default;
diff --git a/tests/gentype_tests/typescript-react-example/src/MyInput.res.js b/tests/gentype_tests/typescript-react-example/src/MyInput.res.js
new file mode 100644
index 0000000000..6fdab560cb
--- /dev/null
+++ b/tests/gentype_tests/typescript-react-example/src/MyInput.res.js
@@ -0,0 +1,10 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+import MyInputGen from "./MyInput.gen";
+
+let make = MyInputGen;
+
+export {
+  make,
+}
+/* make Not a pure module */
diff --git a/tests/gentype_tests/typescript-react-example/src/OnClick2.gen.tsx b/tests/gentype_tests/typescript-react-example/src/OnClick2.gen.tsx
new file mode 100644
index 0000000000..a804d5483d
--- /dev/null
+++ b/tests/gentype_tests/typescript-react-example/src/OnClick2.gen.tsx
@@ -0,0 +1,12 @@
+/* TypeScript file generated from OnClick2.res by genType. */
+
+/* eslint-disable */
+/* tslint:disable */
+
+import * as OnClick2JS from './OnClick2.res.js';
+
+import type {Mouse_t as JsxEvent_Mouse_t} from '../src/shims/JsxEvent.shim';
+
+export type props<onClick> = { readonly onClick: onClick };
+
+export const make: React.ComponentType<{ readonly onClick: (_1:JsxEvent_Mouse_t) => void }> = OnClick2JS.make as any;
diff --git a/tests/gentype_tests/typescript-react-example/src/OnClick2.res.js b/tests/gentype_tests/typescript-react-example/src/OnClick2.res.js
new file mode 100644
index 0000000000..1106cd2f83
--- /dev/null
+++ b/tests/gentype_tests/typescript-react-example/src/OnClick2.res.js
@@ -0,0 +1,16 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+import * as JsxRuntime from "react/jsx-runtime";
+
+function OnClick2(props) {
+  return JsxRuntime.jsx("div", {
+    onClick: props.onClick
+  });
+}
+
+let make = OnClick2;
+
+export {
+  make,
+}
+/* react/jsx-runtime Not a pure module */