diff --git a/.changeset/grumpy-suits-cough.md b/.changeset/grumpy-suits-cough.md
new file mode 100644
index 0000000000..119ac0e925
--- /dev/null
+++ b/.changeset/grumpy-suits-cough.md
@@ -0,0 +1,5 @@
+---
+'@emotion/use-insertion-effect-with-fallbacks': minor
+---
+
+Source code has been migrated to TypeScript. From now on type declarations will be emitted based on that, instead of being hand-written.
diff --git a/packages/use-insertion-effect-with-fallbacks/package.json b/packages/use-insertion-effect-with-fallbacks/package.json
index 41b1ef4cdb..4bbfedf96b 100644
--- a/packages/use-insertion-effect-with-fallbacks/package.json
+++ b/packages/use-insertion-effect-with-fallbacks/package.json
@@ -4,6 +4,7 @@
   "description": "A wrapper package that uses `useInsertionEffect` or a fallback for it",
   "main": "dist/emotion-use-insertion-effect-with-fallbacks.cjs.js",
   "module": "dist/emotion-use-insertion-effect-with-fallbacks.esm.js",
+  "types": "dist/emotion-use-insertion-effect-with-fallbacks.cjs.d.ts",
   "license": "MIT",
   "repository": "https://github.com/emotion-js/emotion/tree/main/packages/use-insertion-effect-with-fallbacks",
   "publishConfig": {
@@ -53,11 +54,11 @@
   },
   "imports": {
     "#is-browser": {
-      "edge-light": "./src/conditions/false.js",
-      "workerd": "./src/conditions/false.js",
-      "worker": "./src/conditions/false.js",
-      "browser": "./src/conditions/true.js",
-      "default": "./src/conditions/is-browser.js"
+      "edge-light": "./src/conditions/false.ts",
+      "workerd": "./src/conditions/false.ts",
+      "worker": "./src/conditions/false.ts",
+      "browser": "./src/conditions/true.ts",
+      "default": "./src/conditions/is-browser.ts"
     }
   }
 }
diff --git a/packages/use-insertion-effect-with-fallbacks/src/conditions/false.js b/packages/use-insertion-effect-with-fallbacks/src/conditions/false.ts
similarity index 100%
rename from packages/use-insertion-effect-with-fallbacks/src/conditions/false.js
rename to packages/use-insertion-effect-with-fallbacks/src/conditions/false.ts
diff --git a/packages/use-insertion-effect-with-fallbacks/src/conditions/is-browser.js b/packages/use-insertion-effect-with-fallbacks/src/conditions/is-browser.ts
similarity index 100%
rename from packages/use-insertion-effect-with-fallbacks/src/conditions/is-browser.js
rename to packages/use-insertion-effect-with-fallbacks/src/conditions/is-browser.ts
diff --git a/packages/use-insertion-effect-with-fallbacks/src/conditions/true.js b/packages/use-insertion-effect-with-fallbacks/src/conditions/true.ts
similarity index 100%
rename from packages/use-insertion-effect-with-fallbacks/src/conditions/true.js
rename to packages/use-insertion-effect-with-fallbacks/src/conditions/true.ts
diff --git a/packages/use-insertion-effect-with-fallbacks/src/index.js b/packages/use-insertion-effect-with-fallbacks/src/index.js
deleted file mode 100644
index 92f21d16ec..0000000000
--- a/packages/use-insertion-effect-with-fallbacks/src/index.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import * as React from 'react'
-import isBrowser from '#is-browser'
-
-const syncFallback = create => create()
-
-const useInsertionEffect = React['useInsertion' + 'Effect']
-  ? React['useInsertion' + 'Effect']
-  : false
-
-export const useInsertionEffectAlwaysWithSyncFallback = !isBrowser
-  ? syncFallback
-  : useInsertionEffect || syncFallback
-
-export const useInsertionEffectWithLayoutFallback =
-  useInsertionEffect || React.useLayoutEffect
diff --git a/packages/use-insertion-effect-with-fallbacks/src/index.ts b/packages/use-insertion-effect-with-fallbacks/src/index.ts
new file mode 100644
index 0000000000..617335f6ef
--- /dev/null
+++ b/packages/use-insertion-effect-with-fallbacks/src/index.ts
@@ -0,0 +1,21 @@
+import * as React from 'react'
+import isBrowser from '#is-browser'
+
+const syncFallback = <T>(create: () => T) => create()
+
+const useInsertionEffect = React[
+  ('useInsertion' + 'Effect') as 'useInsertionEffect'
+]
+  ? (React[('useInsertion' + 'Effect') as 'useInsertionEffect'] as <T>(
+      create: () => T
+    ) => T | undefined)
+  : false
+
+export const useInsertionEffectAlwaysWithSyncFallback: <T>(
+  create: () => T
+) => T | undefined = !isBrowser
+  ? syncFallback
+  : useInsertionEffect || syncFallback
+
+export const useInsertionEffectWithLayoutFallback: typeof React.useLayoutEffect =
+  useInsertionEffect || React.useLayoutEffect