diff --git a/examples/with-web-worker/package.json b/examples/with-web-worker/package.json
index f9170ae254fa..02e5f0e4cef7 100644
--- a/examples/with-web-worker/package.json
+++ b/examples/with-web-worker/package.json
@@ -7,7 +7,12 @@
   },
   "dependencies": {
     "next": "latest",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "18.7.18",
+    "@types/react": "16.9.17",
+    "typescript": "4.8.2"
   }
 }
diff --git a/examples/with-web-worker/pages/index.js b/examples/with-web-worker/pages/index.tsx
similarity index 63%
rename from examples/with-web-worker/pages/index.js
rename to examples/with-web-worker/pages/index.tsx
index 2a0a18121992..4337a8226fb1 100644
--- a/examples/with-web-worker/pages/index.js
+++ b/examples/with-web-worker/pages/index.tsx
@@ -1,11 +1,12 @@
 import { useEffect, useRef, useCallback } from 'react'
 
 export default function Index() {
-  const workerRef = useRef()
+  const workerRef = useRef<Worker>()
+
   useEffect(() => {
-    workerRef.current = new Worker(new URL('../worker.js', import.meta.url))
-    workerRef.current.onmessage = (evt) =>
-      alert(`WebWorker Response => ${evt.data}`)
+    workerRef.current = new Worker(new URL('../worker.ts', import.meta.url))
+    workerRef.current.onmessage = (event: MessageEvent<number>) =>
+      alert(`WebWorker Response => ${event.data}`)
     return () => {
       workerRef.current.terminate()
     }
@@ -16,9 +17,9 @@ export default function Index() {
   }, [])
 
   return (
-    <div>
+    <>
       <p>Do work in a WebWorker!</p>
       <button onClick={handleWork}>Calculate PI</button>
-    </div>
+    </>
   )
 }
diff --git a/examples/with-web-worker/tsconfig.json b/examples/with-web-worker/tsconfig.json
new file mode 100644
index 000000000000..50bcb22f653d
--- /dev/null
+++ b/examples/with-web-worker/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "incremental": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve"
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}
diff --git a/examples/with-web-worker/utils/pi.js b/examples/with-web-worker/utils/pi.ts
similarity index 79%
rename from examples/with-web-worker/utils/pi.js
rename to examples/with-web-worker/utils/pi.ts
index 4562bfd3d11d..cec4d8068d38 100644
--- a/examples/with-web-worker/utils/pi.js
+++ b/examples/with-web-worker/utils/pi.ts
@@ -1,6 +1,6 @@
 // https://stackoverflow.com/a/39575124
-export default function pi(n) {
-  var v = 0
+export default function pi(n: number) {
+  let v = 0
   for (let i = 1; i <= n; i += 4) {
     // increment by 4
     v += 1 / i - 1 / (i + 2) // add the value of the series
diff --git a/examples/with-web-worker/worker.js b/examples/with-web-worker/worker.ts
similarity index 68%
rename from examples/with-web-worker/worker.js
rename to examples/with-web-worker/worker.ts
index 728ecd8e316e..4448af2b8879 100644
--- a/examples/with-web-worker/worker.js
+++ b/examples/with-web-worker/worker.ts
@@ -1,6 +1,6 @@
 // This is a module worker, so we can use imports (in the browser too!)
 import pi from './utils/pi'
 
-addEventListener('message', (event) => {
+addEventListener('message', (event: MessageEvent<number>) => {
   postMessage(pi(event.data))
 })