chore: demo ts (#8160)

* chore: demo ts

* chore: fix

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);
     };
 

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);
     };
 

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)

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;
     };

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;
     };

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;
     };

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);
     };
 

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: {