doc: update demo ts type

Author: tangjinzhou

components/button/demo/multiple.vue

@@ -34,13 +34,14 @@ If you need several buttons, we recommend that you use 1 primary button + n seco
 </template>
 <script lang="ts">
 import { DownOutlined } from '@ant-design/icons-vue';
+import { MenuProps } from 'ant-design-vue';
 import { defineComponent } from 'vue';
 export default defineComponent({
   components: {
     DownOutlined,
   },
   setup() {
-    const handleMenuClick = (e: Event) => {
+    const handleMenuClick: MenuProps['onClick'] = e => {
       console.log('click', e);
     };
     return {

components/button/demo/size.vue

@@ -64,14 +64,15 @@ If a large or small button is desired, set the `size` property to either `large`
 </template>
 <script lang="ts">
 import { DownloadOutlined } from '@ant-design/icons-vue';
+import type { SizeType } from 'ant-design-vue/es/config-provider';
 import { defineComponent, ref } from 'vue';
 export default defineComponent({
   components: {
     DownloadOutlined,
   },
   setup() {
     return {
-      size: ref('large'),
+      size: ref<SizeType>('large'),
     };
   },
 });

components/carousel/demo/position.vue

@@ -31,11 +31,12 @@ There are 4 position options available.
 </template>
 <script lang="ts">
 import { defineComponent, ref } from 'vue';
+import type { CarouselProps } from 'ant-design-vue';
 
 export default defineComponent({
   setup() {
     return {
-      dotPosition: ref('top'),
+      dotPosition: ref<CarouselProps['dotPosition']>('top'),
     };
   },
 });

components/cascader/demo/custom-trigger.vue

@@ -72,7 +72,7 @@ export default defineComponent({
     const value = ref<string[]>([]);
     const text = ref<string>('Unselect');
 
-    const onChange = (value: string, selectedOptions: Option[]) => {
+    const onChange = (_value: string, selectedOptions: Option[]) => {
       text.value = selectedOptions.map(o => o.label).join(', ');
     };
 

components/collapse/demo/extra.vue

@@ -41,6 +41,7 @@ More than one panel can be expanded at a time, the first panel is initialized to
 <script lang="ts">
 import { SettingOutlined } from '@ant-design/icons-vue';
 import { defineComponent, ref, watch } from 'vue';
+import type { CollapseProps } from 'ant-design-vue';
 
 export default defineComponent({
   components: {
@@ -49,7 +50,7 @@ export default defineComponent({
   setup() {
     const text = `A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.`;
     const activeKey = ref(['1']);
-    const expandIconPosition = ref('left');
+    const expandIconPosition = ref<CollapseProps['expandIconPosition']>('left');
 
     const handleClick = (event: MouseEvent) => {
       // If you don't want click extra trigger collapse, you can prevent this:

components/date-picker/demo/bordered.vue

@@ -41,10 +41,10 @@ export default defineComponent({
       value3: ref<Dayjs>(),
       value4: ref<Dayjs>(),
       value5: ref<Dayjs>(),
-      value6: ref<Dayjs[]>([]),
-      value7: ref<Dayjs[]>([]),
-      value8: ref<Dayjs[]>([]),
-      value9: ref<Dayjs[]>([]),
+      value6: ref<[Dayjs, Dayjs]>(),
+      value7: ref<[Dayjs, Dayjs]>(),
+      value8: ref<[Dayjs, Dayjs]>(),
+      value9: ref<[Dayjs, Dayjs]>(),
     };
   },
 });

components/descriptions/demo/size.vue

@@ -67,13 +67,11 @@ Custom sizes to fit in a variety of containers.
 </template>
 <script lang="ts">
 import { defineComponent, ref } from 'vue';
-// TODO
-import type { RadioChangeEvent } from 'ant-design-vue/es/radio/interface';
-
+import type { DescriptionsProps } from 'ant-design-vue';
 export default defineComponent({
   setup() {
-    const size = ref('default');
-    const onChange = (e: RadioChangeEvent) => {
+    const size = ref<DescriptionsProps['size']>('default');
+    const onChange = (e: any) => {
       console.log('size checked', e.target.value);
       size.value = e.target.value;
     };

components/descriptions/demo/vertical.vue

@@ -1,7 +1,7 @@
 <docs>
 ---
 order: 4
-title: 
+title:
   zh-CN: 垂直
   en-US: Vertical
 ---
@@ -21,7 +21,7 @@ Simplest Usage.
     <a-descriptions-item label="UserName">Zhou Maomao</a-descriptions-item>
     <a-descriptions-item label="Telephone">1810000000</a-descriptions-item>
     <a-descriptions-item label="Live">Hangzhou, Zhejiang</a-descriptions-item>
-    <a-descriptions-item label="Address" span="2">
+    <a-descriptions-item label="Address" :span="2">
       No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China
     </a-descriptions-item>
     <a-descriptions-item label="Remark">empty</a-descriptions-item>

components/drawer/demo/extra.vue

@@ -42,9 +42,10 @@ Extra actions should be placed at corner of drawer in Ant Design, you can using
 </template>
 <script lang="ts">
 import { defineComponent, ref } from 'vue';
+import type { DrawerProps } from 'ant-design-vue';
 export default defineComponent({
   setup() {
-    const placement = ref<string>('left');
+    const placement = ref<DrawerProps['placement']>('left');
     const visible = ref<boolean>(false);
 
     const showDrawer = () => {

components/drawer/demo/form-in-drawer.vue

@@ -80,7 +80,7 @@ Use form in drawer with submit button.
             <a-date-picker
               v-model:value="form.dateTime"
               style="width: 100%"
-              :get-popup-container="trigger => trigger.parentNode"
+              :get-popup-container="trigger => trigger.parentElement"
             />
           </a-form-item>
         </a-col>
@@ -117,7 +117,7 @@ export default defineComponent({
       owner: '',
       type: '',
       approver: '',
-      dateTime: '',
+      dateTime: null,
       description: '',
     });