diff --git a/rsbuild/module-federation-enhanced/consumer/.gitignore b/rsbuild/module-federation-enhanced/consumer/.gitignore
new file mode 100644
index 00000000..76f30320
--- /dev/null
+++ b/rsbuild/module-federation-enhanced/consumer/.gitignore
@@ -0,0 +1 @@
+@mf-types
diff --git a/rsbuild/module-federation-enhanced/consumer/package.json b/rsbuild/module-federation-enhanced/consumer/package.json
index bc04a68b..1418c775 100644
--- a/rsbuild/module-federation-enhanced/consumer/package.json
+++ b/rsbuild/module-federation-enhanced/consumer/package.json
@@ -13,6 +13,9 @@
   "devDependencies": {
     "@module-federation/enhanced": "^0.1.10",
     "@rsbuild/core": "^0.6.0",
-    "@rsbuild/plugin-react": "^0.6.0"
+    "@rsbuild/plugin-react": "^0.6.0",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.0",
+    "typescript": "^5.4.5"
   }
 }
diff --git a/rsbuild/module-federation-enhanced/consumer/src/App.css b/rsbuild/module-federation-enhanced/consumer/src/App.css
new file mode 100644
index 00000000..164c0a6a
--- /dev/null
+++ b/rsbuild/module-federation-enhanced/consumer/src/App.css
@@ -0,0 +1,26 @@
+body {
+  margin: 0;
+  color: #fff;
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  background-image: linear-gradient(to bottom, #020917, #101725);
+}
+
+.content {
+  display: flex;
+  min-height: 100vh;
+  line-height: 1.1;
+  text-align: center;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.content h1 {
+  font-size: 3.6rem;
+  font-weight: 700;
+}
+
+.content p {
+  font-size: 1.2rem;
+  font-weight: 400;
+  opacity: 0.5;
+}
diff --git a/rsbuild/module-federation-enhanced/consumer/src/App.js b/rsbuild/module-federation-enhanced/consumer/src/App.tsx
similarity index 100%
rename from rsbuild/module-federation-enhanced/consumer/src/App.js
rename to rsbuild/module-federation-enhanced/consumer/src/App.tsx
diff --git a/rsbuild/module-federation-enhanced/consumer/src/bootstrap.js b/rsbuild/module-federation-enhanced/consumer/src/bootstrap.js
deleted file mode 100644
index 2aa6943f..00000000
--- a/rsbuild/module-federation-enhanced/consumer/src/bootstrap.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './App';
-
-const container = document.getElementById('root');
-const root = createRoot(container);
-root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-);
diff --git a/rsbuild/module-federation-enhanced/consumer/src/bootstrap.tsx b/rsbuild/module-federation-enhanced/consumer/src/bootstrap.tsx
new file mode 100644
index 00000000..e79d101f
--- /dev/null
+++ b/rsbuild/module-federation-enhanced/consumer/src/bootstrap.tsx
@@ -0,0 +1,14 @@
+import React from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App";
+
+const container = document.getElementById("root");
+
+if (container) {
+  const root = createRoot(container);
+  root.render(
+    <React.StrictMode>
+      <App />
+    </React.StrictMode>
+  );
+}
diff --git a/rsbuild/module-federation-enhanced/consumer/src/index.js b/rsbuild/module-federation-enhanced/consumer/src/index.ts
similarity index 100%
rename from rsbuild/module-federation-enhanced/consumer/src/index.js
rename to rsbuild/module-federation-enhanced/consumer/src/index.ts
diff --git a/rsbuild/module-federation-enhanced/consumer/tsconfig.json b/rsbuild/module-federation-enhanced/consumer/tsconfig.json
new file mode 100644
index 00000000..0bc9551b
--- /dev/null
+++ b/rsbuild/module-federation-enhanced/consumer/tsconfig.json
@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["DOM", "ES2020"],
+    "module": "ESNext",
+    "jsx": "react-jsx",
+    "strict": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "resolveJsonModule": true,
+    "moduleResolution": "bundler",
+    "paths": {
+      "*": ["./@mf-types/*"]
+    }
+  },
+  "include": ["src"]
+}
diff --git a/rsbuild/module-federation-enhanced/provider/package.json b/rsbuild/module-federation-enhanced/provider/package.json
index 80d6a7c1..84053c2b 100644
--- a/rsbuild/module-federation-enhanced/provider/package.json
+++ b/rsbuild/module-federation-enhanced/provider/package.json
@@ -13,6 +13,9 @@
   "devDependencies": {
     "@module-federation/enhanced": "^0.1.10",
     "@rsbuild/core": "^0.6.0",
-    "@rsbuild/plugin-react": "^0.6.0"
+    "@rsbuild/plugin-react": "^0.6.0",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.0",
+    "typescript": "^5.4.5"
   }
 }
diff --git a/rsbuild/module-federation-enhanced/provider/rsbuild.config.ts b/rsbuild/module-federation-enhanced/provider/rsbuild.config.ts
index 43cfcd90..991f7bd7 100644
--- a/rsbuild/module-federation-enhanced/provider/rsbuild.config.ts
+++ b/rsbuild/module-federation-enhanced/provider/rsbuild.config.ts
@@ -7,7 +7,7 @@ export default defineConfig({
     port: 3000,
   },
   dev: {
-    // It is necessary to configure assetPrefix, and in the production environment, you need to configure output.assetPrefix
+    // It is necessary to configure assetPrefix, and in the production build, you need to configure output.assetPrefix
     assetPrefix: "http://localhost:3000",
   },
   tools: {
@@ -18,7 +18,7 @@ export default defineConfig({
         new ModuleFederationPlugin({
           name: "federation_provider",
           exposes: {
-            "./button": "./src/button.jsx",
+            "./button": "./src/Button.tsx",
           },
           shared: ["react", "react-dom"],
         }),
diff --git a/rsbuild/module-federation-enhanced/provider/src/App.jsx b/rsbuild/module-federation-enhanced/provider/src/App.tsx
similarity index 100%
rename from rsbuild/module-federation-enhanced/provider/src/App.jsx
rename to rsbuild/module-federation-enhanced/provider/src/App.tsx
diff --git a/rsbuild/module-federation-enhanced/provider/src/Button.tsx b/rsbuild/module-federation-enhanced/provider/src/Button.tsx
new file mode 100644
index 00000000..9428c61c
--- /dev/null
+++ b/rsbuild/module-federation-enhanced/provider/src/Button.tsx
@@ -0,0 +1,3 @@
+export default function Button() {
+  return <div>Provider button</div>;
+}
diff --git a/rsbuild/module-federation-enhanced/provider/src/bootstrap.jsx b/rsbuild/module-federation-enhanced/provider/src/bootstrap.jsx
deleted file mode 100644
index 2aa6943f..00000000
--- a/rsbuild/module-federation-enhanced/provider/src/bootstrap.jsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './App';
-
-const container = document.getElementById('root');
-const root = createRoot(container);
-root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-);
diff --git a/rsbuild/module-federation-enhanced/provider/src/bootstrap.tsx b/rsbuild/module-federation-enhanced/provider/src/bootstrap.tsx
new file mode 100644
index 00000000..e79d101f
--- /dev/null
+++ b/rsbuild/module-federation-enhanced/provider/src/bootstrap.tsx
@@ -0,0 +1,14 @@
+import React from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App";
+
+const container = document.getElementById("root");
+
+if (container) {
+  const root = createRoot(container);
+  root.render(
+    <React.StrictMode>
+      <App />
+    </React.StrictMode>
+  );
+}
diff --git a/rsbuild/module-federation-enhanced/provider/src/index.js b/rsbuild/module-federation-enhanced/provider/src/index.ts
similarity index 100%
rename from rsbuild/module-federation-enhanced/provider/src/index.js
rename to rsbuild/module-federation-enhanced/provider/src/index.ts
diff --git a/rsbuild/module-federation-enhanced/provider/tsconfig.json b/rsbuild/module-federation-enhanced/provider/tsconfig.json
new file mode 100644
index 00000000..c1a7cb53
--- /dev/null
+++ b/rsbuild/module-federation-enhanced/provider/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["DOM", "ES2020"],
+    "module": "ESNext",
+    "jsx": "react-jsx",
+    "strict": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "resolveJsonModule": true,
+    "moduleResolution": "bundler"
+  },
+  "include": ["src"]
+}