diff --git a/site/src/components/codesandbox/content.js b/site/src/components/codesandbox/content.js
index 8e7db0976..09db21f60 100644
--- a/site/src/components/codesandbox/content.js
+++ b/site/src/components/codesandbox/content.js
@@ -36,13 +36,41 @@ export const styleContent = `
   }
 `;
 
+export const tsconfigContent = `{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "src"
+  ]
+}
+`;
+
 export const pkgContent = JSON.stringify(
   {
     name: 'tdesign-react-demo',
     version: '1.0.0',
     description: 'React example starter project',
     keywords: ['react', 'starter'],
-    main: 'src/main.jsx',
+    main: 'src/main.tsx',
     dependencies: {
       dayjs: orgPkg.dependencies.dayjs,
       react: orgPkg.devDependencies.react,
@@ -50,6 +78,8 @@ export const pkgContent = JSON.stringify(
       'tdesign-react': orgPkg.version,
       'tdesign-icons-react': orgPkg.dependencies['tdesign-icons-react'],
       'react-scripts': '^5.0.0',
+      '@types/react': orgPkg.devDependencies['@types/react'],
+      '@types/react-dom': orgPkg.devDependencies['@types/react-dom'],
     },
     devDependencies: {
       typescript: '^4.4.4',
diff --git a/site/src/components/codesandbox/index.jsx b/site/src/components/codesandbox/index.jsx
index 44dd8610b..3c29cd007 100644
--- a/site/src/components/codesandbox/index.jsx
+++ b/site/src/components/codesandbox/index.jsx
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import Tooltip from 'tdesign-react/tooltip';
 import Loading from 'tdesign-react/loading';
 
-import { mainJsContent, htmlContent, pkgContent, styleContent } from './content';
+import { mainJsContent, htmlContent, pkgContent, styleContent, tsconfigContent } from './content';
 import '../../styles/Codesandbox.less';
 
 export default function Codesandbox(props) {
@@ -35,6 +35,9 @@ export default function Codesandbox(props) {
           'src/demo.tsx': {
             content: code,
           },
+          'tsconfig.json': {
+            content: tsconfigContent,
+          },
         },
       }),
     })
diff --git a/site/src/components/stackblitz/content.js b/site/src/components/stackblitz/content.js
index 4fefb5f9f..c70c8b56d 100644
--- a/site/src/components/stackblitz/content.js
+++ b/site/src/components/stackblitz/content.js
@@ -38,10 +38,40 @@ export const styleContent = `
   }
 `;
 
+export const tsconfigContent = `{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "src"
+  ]
+}
+`;
+
 export const dependenciesContent = JSON.stringify({
   'tdesign-react': orgPkg.version,
   'tdesign-icons-react': orgPkg.dependencies['tdesign-icons-react'],
   dayjs: orgPkg.dependencies.dayjs,
   react: orgPkg.devDependencies.react,
   'react-dom': orgPkg.devDependencies['react-dom'],
+  '@types/react': orgPkg.devDependencies['@types/react'],
+  '@types/react-dom': orgPkg.devDependencies['@types/react-dom'],
 });
diff --git a/site/src/components/stackblitz/index.jsx b/site/src/components/stackblitz/index.jsx
index 03c0e4e58..cf39fe6c7 100644
--- a/site/src/components/stackblitz/index.jsx
+++ b/site/src/components/stackblitz/index.jsx
@@ -1,7 +1,7 @@
 import React, { useRef } from 'react';
 import Tooltip from 'tdesign-react/tooltip';
 
-import { htmlContent, mainJsContent, styleContent, dependenciesContent } from './content';
+import { htmlContent, mainJsContent, styleContent, dependenciesContent, tsconfigContent } from './content';
 
 export default function Stackblitz(props) {
   const { code } = props;
@@ -14,9 +14,10 @@ export default function Stackblitz(props) {
   return (
     <Tooltip content="在 Stackblitz 中打开">
       <form ref={formRef} method="post" action="https://stackblitz.com/run" target="_blank" onClick={submit}>
-        <input type="hidden" name="project[files][src/demo.jsx]" value={code} />
+        <input type="hidden" name="project[files][src/demo.tsx]" value={code} />
         <input type="hidden" name="project[files][src/index.css]" value={styleContent} />
         <input type="hidden" name="project[files][src/index.js]" value={mainJsContent} />
+        <input type="hidden" name="project[tsconfig.json]" value={tsconfigContent} />
         <input type="hidden" name="project[files][public/index.html]" value={htmlContent} />
         <input type="hidden" name="project[dependencies]" value={dependenciesContent} />
         <input type="hidden" name="project[template]" value="create-react-app" />