diff --git a/packages/fes-plugin-icon/src/optimizeSvg.js b/packages/fes-plugin-icon/src/optimizeSvg.js
index 09840aad..14111673 100644
--- a/packages/fes-plugin-icon/src/optimizeSvg.js
+++ b/packages/fes-plugin-icon/src/optimizeSvg.js
@@ -1,18 +1,24 @@
 import { extname, basename } from 'path';
 import { statSync, readFileSync } from 'fs';
-import { extendDefaultPlugins, optimize } from 'svgo';
+import { optimize } from 'svgo';
 
-
-const plugins = extendDefaultPlugins([
-    'sortAttrs',
-    'removeDimensions',
+const presetDefault = [
     {
-        name: 'removeAttrs',
+        name: 'preset-default',
         params: {
-            attrs: '(stroke|fill|class)'
+            overrides: {
+                sortAttrs: true,
+                removeDimensions: true,
+                // customize options
+                removeAttrs: {
+                    params: {
+                        attrs: '(stroke|fill|class)'
+                    }
+                }
+            }
         }
     }
-]);
+];
 
 
 export default function optimizeSvg(files) {
@@ -20,7 +26,7 @@ export default function optimizeSvg(files) {
     for (const filePath of files) {
         if (statSync(filePath).isFile() && extname(filePath) === '.svg') {
             const data = readFileSync(filePath, 'utf-8');
-            const svgData = optimize(data, { path: filePath, plugins });
+            const svgData = optimize(data, { path: filePath, plugins: presetDefault });
             optimizedSvgData.push({
                 fileName: basename(filePath),
                 ...svgData
diff --git a/packages/fes-preset-built-in/package.json b/packages/fes-preset-built-in/package.json
index 51efa006..9147f279 100644
--- a/packages/fes-preset-built-in/package.json
+++ b/packages/fes-preset-built-in/package.json
@@ -32,6 +32,7 @@
     "@babel/plugin-proposal-pipeline-operator": "^7.12.13",
     "@babel/plugin-transform-runtime": "^7.12.13",
     "@babel/preset-env": "^7.12.13",
+    "@babel/preset-typescript": "^7.15.0",
     "@fesjs/compiler": "^2.0.2",
     "@fesjs/utils": "^2.0.2",
     "@soda/friendly-errors-webpack-plugin": "^1.8.0",
diff --git a/packages/fes-preset-built-in/src/plugins/commands/webpackConfig/getBabelOpts.js b/packages/fes-preset-built-in/src/plugins/commands/webpackConfig/getBabelOpts.js
index 17d01c89..f49583c8 100644
--- a/packages/fes-preset-built-in/src/plugins/commands/webpackConfig/getBabelOpts.js
+++ b/packages/fes-preset-built-in/src/plugins/commands/webpackConfig/getBabelOpts.js
@@ -21,6 +21,16 @@ function getBabelOpts({
                 modules: false
             }
         ],
+        [
+            // FEATURE 实现类型安全检查
+            require('@babel/preset-typescript').default,
+            {
+                // https://babeljs.io/docs/en/babel-plugin-transform-typescript#impartial-namespace-support
+                allowNamespaces: true,
+                isTSX: true,
+                allExtensions: true
+            }
+        ],
         ...(config.extraBabelPresets || [])
     ];
     const plugins = [
diff --git a/packages/fes-preset-built-in/src/plugins/commands/webpackConfig/index.js b/packages/fes-preset-built-in/src/plugins/commands/webpackConfig/index.js
index 2c6795a9..d0e316a9 100644
--- a/packages/fes-preset-built-in/src/plugins/commands/webpackConfig/index.js
+++ b/packages/fes-preset-built-in/src/plugins/commands/webpackConfig/index.js
@@ -99,7 +99,7 @@ export default async function getConfig({
         .chunkFilename('[name].[contenthash:8].chunk.js');
 
     // --------------- resolve -----------
-    webpackConfig.resolve.extensions.merge(['.mjs', '.js', '.jsx', '.vue', '.json', '.wasm']);
+    webpackConfig.resolve.extensions.merge(['.mjs', '.js', '.jsx', '.vue', '.ts', '.tsx', '.json', '.wasm']);
 
     if (config.alias) {
         Object.keys(config.alias).forEach((key) => {
@@ -173,7 +173,7 @@ export default async function getConfig({
 
     webpackConfig.module
         .rule('js')
-        .test(/\.(js|mjs|jsx)$/)
+        .test(/\.(js|mjs|jsx|ts|tsx)$/)
         .exclude.add((filepath) => {
             // always transpile js in vue files
             if (/\.vue\.jsx?$/.test(filepath)) {
diff --git a/packages/fes-template-h5/src/components/helloTS.ts b/packages/fes-template-h5/src/components/helloTS.ts
new file mode 100644
index 00000000..44f321d6
--- /dev/null
+++ b/packages/fes-template-h5/src/components/helloTS.ts
@@ -0,0 +1,7 @@
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+    setup() {
+        return () => 'hello ts';
+    }
+});
diff --git a/packages/fes-template-h5/src/components/helloTSX.tsx b/packages/fes-template-h5/src/components/helloTSX.tsx
new file mode 100644
index 00000000..8a723c57
--- /dev/null
+++ b/packages/fes-template-h5/src/components/helloTSX.tsx
@@ -0,0 +1,9 @@
+import {defineComponent} from 'vue';
+
+export default defineComponent({
+    setup() {
+        return () => {
+            return 'hello tsx'
+        }
+    }
+})
\ No newline at end of file
diff --git a/packages/fes-template-h5/src/components/helloWorld.vue b/packages/fes-template-h5/src/components/helloWorld.vue
new file mode 100644
index 00000000..72e8d144
--- /dev/null
+++ b/packages/fes-template-h5/src/components/helloWorld.vue
@@ -0,0 +1,14 @@
+<template>
+    <div>{{msg}}</div>
+    <div>{{obj.a}}</div>
+</template>
+
+<script lang="ts" setup>
+// eslint-disable-next-line
+const msg = 'hello world';
+
+// eslint-disable-next-line
+const obj = {
+    a: 1
+};
+</script>
diff --git a/packages/fes-template-h5/src/pages/index.vue b/packages/fes-template-h5/src/pages/index.vue
index 25fef6f8..4ed55e6b 100644
--- a/packages/fes-template-h5/src/pages/index.vue
+++ b/packages/fes-template-h5/src/pages/index.vue
@@ -2,6 +2,9 @@
     <div class="onepiece">
         fes h5 & 拉夫德鲁<br />
         <fes-icon :spin="true" class="one-icon" type="smile" @click="clickIcon" />
+        <HelloWorld />
+        <HelloTSX />
+        <helloTS />
     </div>
 </template>
 <config>
@@ -14,8 +17,16 @@
 <script>
 import { ref } from 'vue';
 import { request } from '@fesjs/fes';
+import HelloWorld from '@/components/helloWorld';
+import HelloTSX from '@/components/helloTSX';
+import helloTS from '@/components/helloTS';
 
 export default {
+    components: {
+        HelloWorld,
+        HelloTSX,
+        helloTS
+    },
     setup() {
         const fes = ref('fes upgrade to vue3');
         const rotate = ref(90);
@@ -35,17 +46,17 @@ export default {
         // }).then((res) => {
         //     console.log(res);
         // });
-        // request('/api', null, {
-        //     mergeRequest: true
-        // }).then((res) => {
-        //     console.log(res);
-        // });
-        // request('/api', null, {
-        //     throttle: 3000,
-        //     cache: true
-        // }).then((res) => {
-        //     console.log(res);
-        // });
+        request('/api', null, {
+            mergeRequest: true
+        }).then((res) => {
+            console.log(res);
+        });
+        request('/api', null, {
+            throttle: 3000,
+            cache: true
+        }).then((res) => {
+            console.log(res);
+        });
 
         // setTimeout(() => {
         //     request('/api', null, {
@@ -71,21 +82,21 @@ export default {
         //     });
         // }, 3200);
 
-        request('/api', null, {
-            cache: true
-        }).then((res) => {
-            console.log(res);
-        });
-        request('/api', null, {
-            cache: true
-        }).then((res) => {
-            console.log(res);
-        });
-        request('/api', null, {
-            cache: true
-        }).then((res) => {
-            console.log(res);
-        });
+        // request('/api', null, {
+        //     cache: true
+        // }).then((res) => {
+        //     console.log(res);
+        // });
+        // request('/api', null, {
+        //     cache: true
+        // }).then((res) => {
+        //     console.log(res);
+        // });
+        // request('/api', null, {
+        //     cache: true
+        // }).then((res) => {
+        //     console.log(res);
+        // });
 
         // request('/api', null, {
         //     // skipErrorHandler: [500]
diff --git a/yarn.lock b/yarn.lock
index a4555ddc..69c4c9c0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -239,7 +239,7 @@
     browserslist "^4.16.6"
     semver "^6.3.0"
 
-"@babel/helper-create-class-features-plugin@^7.14.5":
+"@babel/helper-create-class-features-plugin@^7.14.5", "@babel/helper-create-class-features-plugin@^7.15.0":
   version "7.15.0"
   resolved "http://10.107.103.115:8001/@babel/helper-create-class-features-plugin/download/@babel/helper-create-class-features-plugin-7.15.0.tgz#c9a137a4d137b2d0e2c649acf536d7ba1a76c0f7"
   integrity sha1-yaE3pNE3stDixkms9TbXuhp2wPc=
@@ -742,10 +742,10 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.14.5"
 
-"@babel/plugin-syntax-typescript@^7.7.2":
+"@babel/plugin-syntax-typescript@^7.14.5", "@babel/plugin-syntax-typescript@^7.7.2":
   version "7.14.5"
-  resolved "http://10.107.103.115:8001/@babel/plugin-syntax-typescript/download/@babel/plugin-syntax-typescript-7.14.5.tgz#b82c6ce471b165b5ce420cf92914d6fb46225716"
-  integrity sha1-uCxs5HGxZbXOQgz5KRTW+0YiVxY=
+  resolved "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.14.5.tgz#b82c6ce471b165b5ce420cf92914d6fb46225716"
+  integrity sha512-u6OXzDaIXjEstBRRoBCQ/uKQKlbuaeE5in0RvWdA4pN6AhqxTIwUsnHPU1CFZA/amYObMsuWhYfRl3Ch90HD0Q==
   dependencies:
     "@babel/helper-plugin-utils" "^7.14.5"
 
@@ -994,6 +994,15 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.14.5"
 
+"@babel/plugin-transform-typescript@^7.15.0":
+  version "7.15.0"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.15.0.tgz#553f230b9d5385018716586fc48db10dd228eb7e"
+  integrity sha512-WIIEazmngMEEHDaPTx0IZY48SaAmjVWe3TRSX7cmJXn0bEv9midFzAjxiruOWYIVf5iQ10vFx7ASDpgEO08L5w==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.15.0"
+    "@babel/helper-plugin-utils" "^7.14.5"
+    "@babel/plugin-syntax-typescript" "^7.14.5"
+
 "@babel/plugin-transform-unicode-escapes@^7.14.5":
   version "7.14.5"
   resolved "http://10.107.103.115:8001/@babel/plugin-transform-unicode-escapes/download/@babel/plugin-transform-unicode-escapes-7.14.5.tgz#9d4bd2a681e3c5d7acf4f57fa9e51175d91d0c6b"
@@ -1099,6 +1108,15 @@
     "@babel/types" "^7.4.4"
     esutils "^2.0.2"
 
+"@babel/preset-typescript@^7.15.0":
+  version "7.15.0"
+  resolved "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.15.0.tgz#e8fca638a1a0f64f14e1119f7fe4500277840945"
+  integrity sha512-lt0Y/8V3y06Wq/8H/u0WakrqciZ7Fz7mwPDHWUJAXlABL5hiUG42BNlRXiELNjeWjO5rWmnNKlx+yzJvxezHow==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+    "@babel/helper-validator-option" "^7.14.5"
+    "@babel/plugin-transform-typescript" "^7.15.0"
+
 "@babel/register@^7.15.3":
   version "7.15.3"
   resolved "http://10.107.103.115:8001/@babel/register/download/@babel/register-7.15.3.tgz#6b40a549e06ec06c885b2ec42c3dd711f55fe752"