diff --git a/src/checkbox/demo/index.vue b/src/checkbox/demo/index.vue
index f443449fe..a7e147c07 100644
--- a/src/checkbox/demo/index.vue
+++ b/src/checkbox/demo/index.vue
@@ -103,10 +103,11 @@
   </demo-block>
 </template>
 
-<script>
+<script lang="ts">
 import { ref, reactive, toRefs } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 import { useRefs } from '../../composables/use-refs';
+import { ComponentInstance } from 'src/utils';
 
 const i18n = {
   'zh-CN': {
@@ -159,19 +160,19 @@ export default {
       horizontalResult: [],
     });
 
-    const group = ref();
-    const [refs, setRefs] = useRefs();
+    const group = ref<ComponentInstance>();
+    const [refs, setRefs] = useRefs<ComponentInstance>();
 
-    const toggle = (index) => {
+    const toggle = (index: number) => {
       refs.value[index].toggle();
     };
 
     const checkAll = () => {
-      group.value.toggleAll(true);
+      group.value?.toggleAll(true);
     };
 
     const toggleAll = () => {
-      group.value.toggleAll();
+      group.value?.toggleAll();
     };
 
     return {
diff --git a/src/count-down/demo/index.vue b/src/count-down/demo/index.vue
index 9ed385c2f..cd444c620 100644
--- a/src/count-down/demo/index.vue
+++ b/src/count-down/demo/index.vue
@@ -40,9 +40,10 @@
   </demo-block>
 </template>
 
-<script>
+<script lang="ts">
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
+import { ComponentInstance } from '../../utils';
 import Toast from '../../toast';
 
 const i18n = {
@@ -74,16 +75,16 @@ export default {
   setup() {
     const t = useTranslate(i18n);
     const time = ref(30 * 60 * 60 * 1000);
-    const countDown = ref(null);
+    const countDown = ref<ComponentInstance>();
 
     const start = () => {
-      countDown.value.start();
+      countDown.value?.start();
     };
     const pause = () => {
-      countDown.value.pause();
+      countDown.value?.pause();
     };
     const reset = () => {
-      countDown.value.reset();
+      countDown.value?.reset();
     };
     const onFinish = () => Toast(t('finished'));
 
diff --git a/src/dialog/demo/index.vue b/src/dialog/demo/index.vue
index 2e762b92c..8e1c6a6f9 100644
--- a/src/dialog/demo/index.vue
+++ b/src/dialog/demo/index.vue
@@ -27,10 +27,11 @@
   </demo-block>
 </template>
 
-<script>
+<script lang="ts">
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 import Dialog from '..';
+import { DialogAction } from 'types/dialog';
 
 const i18n = {
   'zh-CN': {
@@ -93,8 +94,8 @@ export default {
     };
 
     const onClickBeforeClose = () => {
-      const beforeClose = (action) =>
-        new Promise((resolve) => {
+      const beforeClose = (action: DialogAction) =>
+        new Promise<boolean>((resolve) => {
           setTimeout(() => resolve(action === 'confirm'), 1000);
         });
 
diff --git a/src/field/demo/index.vue b/src/field/demo/index.vue
index 1a5266d1c..136deea84 100644
--- a/src/field/demo/index.vue
+++ b/src/field/demo/index.vue
@@ -11,17 +11,17 @@
   <input-align />
 </template>
 
-<script>
-import BasicUsage from './BasicUsage';
-import CustomType from './CustomType';
-import Disabled from './Disabled';
-import ShowIcon from './ShowIcon';
-import ErrorInfo from './ErrorInfo';
-import InsertButton from './InsertButton';
-import FormatValue from './FormatValue';
-import Autosize from './Autosize';
-import ShowWordLimit from './ShowWordLimit';
-import InputAlign from './InputAlign';
+<script lang="ts">
+import BasicUsage from './BasicUsage.vue';
+import CustomType from './CustomType.vue';
+import Disabled from './Disabled.vue';
+import ShowIcon from './ShowIcon.vue';
+import ErrorInfo from './ErrorInfo.vue';
+import InsertButton from './InsertButton.vue';
+import FormatValue from './FormatValue.vue';
+import Autosize from './Autosize.vue';
+import ShowWordLimit from './ShowWordLimit.vue';
+import InputAlign from './InputAlign.vue';
 
 export default {
   components: {
diff --git a/src/form/demo/BasicUsage.vue b/src/form/demo/BasicUsage.vue
index c6f15be04..b8168ad9a 100644
--- a/src/form/demo/BasicUsage.vue
+++ b/src/form/demo/BasicUsage.vue
@@ -25,9 +25,10 @@
   </demo-block>
 </template>
 
-<script>
+<script lang="ts">
 import { reactive, toRefs } from 'vue';
 import { useTranslate } from '@demo/use-translate';
+import { FieldValidateError } from '../../field/types';
 
 const i18n = {
   'zh-CN': {
@@ -54,10 +55,14 @@ export default {
       password: '',
     });
 
-    const onSubmit = (values) => {
+    const onSubmit = (values: Record<string, string>) => {
       console.log('submit', values);
     };
-    const onFailed = (errorInfo) => {
+
+    const onFailed = (errorInfo: {
+      values: Record<string, string>;
+      errors: FieldValidateError[];
+    }) => {
       console.log('failed', errorInfo);
     };
 
diff --git a/src/form/demo/FieldType.vue b/src/form/demo/FieldType.vue
index 1b3be6f5c..e48db2cfe 100644
--- a/src/form/demo/FieldType.vue
+++ b/src/form/demo/FieldType.vue
@@ -73,13 +73,13 @@
   </demo-block>
 </template>
 
-<script>
+<script lang="ts">
 import { reactive, toRefs } from 'vue';
 import { useTranslate } from '@demo/use-translate';
-import FieldTypeArea from './FieldTypeArea';
-import FieldTypePicker from './FieldTypePicker';
-import FieldTypeCalendar from './FieldTypeCalendar';
-import FieldTypeDatetimePicker from './FieldTypeDatetimePicker';
+import FieldTypeArea from './FieldTypeArea.vue';
+import FieldTypePicker from './FieldTypePicker.vue';
+import FieldTypeCalendar from './FieldTypeCalendar.vue';
+import FieldTypeDatetimePicker from './FieldTypeDatetimePicker.vue';
 
 const i18n = {
   'zh-CN': {
@@ -133,7 +133,7 @@ export default {
       switchChecked: false,
     });
 
-    const onSubmit = (values) => {
+    const onSubmit = (values: Record<string, string>) => {
       console.log(values);
     };
 
diff --git a/src/form/demo/FieldTypeArea.vue b/src/form/demo/FieldTypeArea.vue
index bfea83879..21850673c 100644
--- a/src/form/demo/FieldTypeArea.vue
+++ b/src/form/demo/FieldTypeArea.vue
@@ -17,9 +17,10 @@
   </van-popup>
 </template>
 
-<script>
+<script lang="ts">
 import { reactive, toRefs } from 'vue';
 import { useTranslate } from '@demo/use-translate';
+import { AreaColumnOption } from '../../area';
 import AreaList from '../../area/demo/area';
 import AreaListEn from '../../area/demo/area-en';
 
@@ -44,7 +45,7 @@ export default {
       showArea: false,
     });
 
-    const onConfirm = (values) => {
+    const onConfirm = (values: AreaColumnOption[]) => {
       state.value = values
         .filter((item) => !!item)
         .map((item) => item.name)
diff --git a/src/form/demo/FieldTypeCalendar.vue b/src/form/demo/FieldTypeCalendar.vue
index a3589423b..d1dabdac1 100644
--- a/src/form/demo/FieldTypeCalendar.vue
+++ b/src/form/demo/FieldTypeCalendar.vue
@@ -16,7 +16,7 @@
   />
 </template>
 
-<script>
+<script lang="ts">
 import { reactive, toRefs } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 
@@ -39,9 +39,10 @@ export default {
       showCalendar: false,
     });
 
-    const formatDate = (date) => `${date.getMonth() + 1}/${date.getDate()}`;
+    const formatDate = (date: Date) =>
+      `${date.getMonth() + 1}/${date.getDate()}`;
 
-    const onConfirm = (date) => {
+    const onConfirm = (date: Date) => {
       state.value = formatDate(date);
       state.showCalendar = false;
     };
diff --git a/src/form/demo/FieldTypeDatetimePicker.vue b/src/form/demo/FieldTypeDatetimePicker.vue
index 5098db847..7b502f496 100644
--- a/src/form/demo/FieldTypeDatetimePicker.vue
+++ b/src/form/demo/FieldTypeDatetimePicker.vue
@@ -13,7 +13,7 @@
   </van-popup>
 </template>
 
-<script>
+<script lang="ts">
 import { reactive, toRefs } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 
@@ -36,10 +36,11 @@ export default {
       showPicker: false,
     });
 
-    const onConfirm = (time) => {
+    const onConfirm = (time: string) => {
       state.value = time;
       state.showPicker = false;
     };
+
     const onCancel = () => {
       state.showPicker = false;
     };
diff --git a/src/form/demo/FieldTypePicker.vue b/src/form/demo/FieldTypePicker.vue
index 6efd3378d..c47620e25 100644
--- a/src/form/demo/FieldTypePicker.vue
+++ b/src/form/demo/FieldTypePicker.vue
@@ -17,7 +17,7 @@
   </van-popup>
 </template>
 
-<script>
+<script lang="ts">
 import { reactive, toRefs } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 
@@ -42,7 +42,7 @@ export default {
       showPicker: false,
     });
 
-    const onConfirm = (value) => {
+    const onConfirm = (value: string) => {
       state.value = value;
       state.showPicker = false;
     };
diff --git a/src/form/demo/ValidateRules.vue b/src/form/demo/ValidateRules.vue
index b1cfe4813..d957e034a 100644
--- a/src/form/demo/ValidateRules.vue
+++ b/src/form/demo/ValidateRules.vue
@@ -38,9 +38,10 @@
   </demo-block>
 </template>
 
-<script>
+<script lang="ts">
 import { reactive, toRefs } from 'vue';
 import { useTranslate } from '@demo/use-translate';
+import { FieldValidateError } from '../../field/types';
 import Toast from '../../toast';
 
 const i18n = {
@@ -49,7 +50,7 @@ const i18n = {
     title: '校验规则',
     submit: '提交',
     message: '请输入正确内容',
-    invalid: (val) => `${val} 不合法，请重新输入`,
+    invalid: (val: string) => `${val} 不合法，请重新输入`,
     pattern: '正则校验',
     validator: '函数校验',
     validating: '验证中...',
@@ -61,7 +62,7 @@ const i18n = {
     title: 'Validate Rules',
     submit: 'Submit',
     message: 'Error message',
-    invalid: (val) => `${val} is invalid`,
+    invalid: (val: string) => `${val} is invalid`,
     pattern: 'Use pattern',
     validator: 'Use validator',
     validating: 'Validating...',
@@ -80,11 +81,11 @@ export default {
       value4: '',
     });
 
-    const validator = (val) => /1\d{10}/.test(val);
+    const validator = (val: string) => /1\d{10}/.test(val);
 
-    const validatorMessage = (val) => t('invalid', val);
+    const validatorMessage = (val: string) => t('invalid', val);
 
-    const asyncValidator = (val) =>
+    const asyncValidator = (val: string) =>
       new Promise((resolve) => {
         Toast.loading(t('validating'));
 
@@ -94,11 +95,14 @@ export default {
         }, 1000);
       });
 
-    const onSubmit = (values) => {
+    const onSubmit = (values: Record<string, string>) => {
       console.log('submit', values);
     };
 
-    const onFailed = (errorInfo) => {
+    const onFailed = (errorInfo: {
+      values: Record<string, string>;
+      errors: FieldValidateError[];
+    }) => {
       console.log('failed', errorInfo);
     };
 
diff --git a/src/form/demo/index.vue b/src/form/demo/index.vue
index 4e519a2b1..3e5ee9ed6 100644
--- a/src/form/demo/index.vue
+++ b/src/form/demo/index.vue
@@ -4,10 +4,10 @@
   <field-type />
 </template>
 
-<script>
-import BasicUsage from './BasicUsage';
-import ValidateRules from './ValidateRules';
-import FieldType from './FieldType';
+<script lang="ts">
+import BasicUsage from './BasicUsage.vue';
+import ValidateRules from './ValidateRules.vue';
+import FieldType from './FieldType.vue';
 
 export default {
   components: {
diff --git a/src/picker/demo/index.vue b/src/picker/demo/index.vue
index 2bc31235d..677c62c04 100644
--- a/src/picker/demo/index.vue
+++ b/src/picker/demo/index.vue
@@ -73,7 +73,7 @@
   </demo-block>
 </template>
 
-<script>
+<script lang="ts">
 import { ref, computed, reactive, toRefs } from 'vue';
 import { dateColumns, cascadeColumns, cascadeColumnsCustomKey } from './data';
 import { useTranslate } from '@demo/use-translate';
@@ -92,7 +92,7 @@ const i18n = {
     cascadeColumns: cascadeColumns['zh-CN'],
     multipleColumns: '多列选择',
     setColumnValues: '动态设置选项',
-    customChildrenKey: '自定义Columns字段',
+    customChildrenKey: '自定义 Columns 结构',
     customChildrenColumns: cascadeColumnsCustomKey['zh-CN'],
     textColumns: [
       '杭州',
@@ -113,7 +113,8 @@ const i18n = {
       浙江: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
       福建: ['福州', '厦门', '莆田', '三明', '泉州'],
     },
-    toastContent: (value, index) => `当前值：${value}, 当前索引：${index}`,
+    toastContent: (value: string, index: number) =>
+      `当前值：${value}, 当前索引：${index}`,
   },
   'en-US': {
     city: 'City',
@@ -139,7 +140,8 @@ const i18n = {
       Group1: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
       Group2: ['Alabama', 'Kansas', 'Louisiana', 'Texas'],
     },
-    toastContent: (value, index) => `Value: ${value}, Index：${index}`,
+    toastContent: (value: string, index: number) =>
+      `Value: ${value}, Index：${index}`,
   },
 };
 
@@ -171,15 +173,15 @@ export default {
       ];
     });
 
-    const onChange1 = (value, index) => {
+    const onChange1 = (value: string, index: number) => {
       Toast(t('toastContent', value, index));
     };
 
-    const onChange2 = (values) => {
+    const onChange2 = (values: string[]) => {
       picker.value.setColumnValues(1, t('column3')[values[0]]);
     };
 
-    const onConfirm = (value, index) => {
+    const onConfirm = (value: string, index: number) => {
       Toast(t('toastContent', value, index));
     };
 
@@ -193,7 +195,7 @@ export default {
       state.showPicker = true;
     };
 
-    const onConfirm2 = (value) => {
+    const onConfirm2 = (value: string) => {
       state.showPicker = false;
       state.fieldValue = value;
     };
diff --git a/src/pull-refresh/demo/index.vue b/src/pull-refresh/demo/index.vue
index b19b63cf9..055f71f80 100644
--- a/src/pull-refresh/demo/index.vue
+++ b/src/pull-refresh/demo/index.vue
@@ -41,7 +41,7 @@
   </van-tabs>
 </template>
 
-<script>
+<script lang="ts">
 import { computed, onMounted, reactive, toRefs } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 import Toast from '../../toast';
@@ -78,7 +78,7 @@ export default {
       return t('try');
     });
 
-    const onRefresh = (showToast) => {
+    const onRefresh = (showToast: boolean) => {
       setTimeout(() => {
         if (showToast) {
           Toast(t('success'));
diff --git a/src/rate/demo/index.vue b/src/rate/demo/index.vue
index 371a823cb..c3526f069 100644
--- a/src/rate/demo/index.vue
+++ b/src/rate/demo/index.vue
@@ -44,7 +44,7 @@
   </demo-block>
 </template>
 
-<script>
+<script lang="ts">
 import { toRefs, reactive } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 import Toast from '../../toast';
@@ -58,7 +58,7 @@ const i18n = {
     customCount: '自定义数量',
     readonly: '只读状态',
     changeEvent: '监听 change 事件',
-    toastContent: (value) => `当前值：${value}`,
+    toastContent: (value: number) => `当前值：${value}`,
   },
   'en-US': {
     halfStar: 'Half Star',
@@ -68,7 +68,7 @@ const i18n = {
     customCount: 'Custom Count',
     readonly: 'Readonly',
     changeEvent: 'Change Event',
-    toastContent: (value) => `current value：${value}`,
+    toastContent: (value: number) => `current value：${value}`,
   },
 };
 
@@ -85,7 +85,7 @@ export default {
       value7: 2,
     });
 
-    const onChange = (value) => Toast(t('toastContent', value));
+    const onChange = (value: number) => Toast(t('toastContent', value));
 
     return {
       ...toRefs(state),
diff --git a/src/search/demo/index.vue b/src/search/demo/index.vue
index 11e863310..083b7095a 100644
--- a/src/search/demo/index.vue
+++ b/src/search/demo/index.vue
@@ -51,7 +51,7 @@
   </demo-block>
 </template>
 
-<script>
+<script lang="ts">
 import { reactive, toRefs } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 import Toast from '../../toast';
@@ -89,7 +89,7 @@ export default {
       value6: '',
     });
 
-    const onSearch = (val) => Toast(val);
+    const onSearch = (val: string) => Toast(val);
     const onCancel = () => Toast(t('cancel'));
 
     return {
diff --git a/src/slider/demo/index.vue b/src/slider/demo/index.vue
index f6e32fa11..9602cf0e9 100644
--- a/src/slider/demo/index.vue
+++ b/src/slider/demo/index.vue
@@ -50,7 +50,7 @@
   </demo-block>
 </template>
 
-<script>
+<script lang="ts">
 import { reactive, toRefs } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 import Toast from '../../toast';
@@ -95,7 +95,7 @@ export default {
       value9: [20, 60],
     });
 
-    const onChange = (value) => Toast(t('text') + value);
+    const onChange = (value: string) => Toast(t('text') + value);
 
     return {
       ...toRefs(state),
diff --git a/src/stepper/demo/index.vue b/src/stepper/demo/index.vue
index 82c4515b2..7cfb18cb5 100644
--- a/src/stepper/demo/index.vue
+++ b/src/stepper/demo/index.vue
@@ -45,7 +45,7 @@
   </van-cell>
 </template>
 
-<script>
+<script lang="ts">
 import { reactive, toRefs } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 import Toast from '../../toast';
diff --git a/src/swipe/demo/index.vue b/src/swipe/demo/index.vue
index 8183abb72..646256629 100644
--- a/src/swipe/demo/index.vue
+++ b/src/swipe/demo/index.vue
@@ -63,7 +63,7 @@
   </demo-block>
 </template>
 
-<script>
+<script lang="ts">
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 import Toast from '../../toast';
@@ -98,8 +98,8 @@ export default {
       'https://img01.yzcdn.cn/vant/apple-4.jpg',
     ];
 
-    const onChange1 = (index) => Toast(t('message') + index);
-    const onChange2 = (index) => {
+    const onChange1 = (index: number) => Toast(t('message') + index);
+    const onChange2 = (index: number) => {
       current.value = index;
     };
 
diff --git a/src/switch/demo/index.vue b/src/switch/demo/index.vue
index dd8dca7de..f9b9b0903 100644
--- a/src/switch/demo/index.vue
+++ b/src/switch/demo/index.vue
@@ -36,7 +36,7 @@
   </demo-block>
 </template>
 
-<script>
+<script lang="ts">
 import { reactive, toRefs } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 import Dialog from '../../dialog';
@@ -74,7 +74,7 @@ export default {
       checked6: false,
     });
 
-    const onUpdateValue = (checked) => {
+    const onUpdateValue = (checked: boolean) => {
       Dialog.confirm({
         title: t('title'),
         message: t('message'),