doc: update demo ts type

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,6 +64,7 @@ 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: {
@@ -71,7 +72,7 @@ export default defineComponent({
   },
   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[]>([]),
+      value6: ref<[Dayjs, Dayjs]>(),
-      value7: ref<Dayjs[]>([]),
+      value7: ref<[Dayjs, Dayjs]>(),
-      value8: ref<Dayjs[]>([]),
+      value8: ref<[Dayjs, Dayjs]>(),
-      value9: ref<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 { DescriptionsProps } from 'ant-design-vue';
-import type { RadioChangeEvent } from 'ant-design-vue/es/radio/interface';
-
 export default defineComponent({
   setup() {
-    const size = ref('default');
+    const size = ref<DescriptionsProps['size']>('default');
-    const onChange = (e: RadioChangeEvent) => {
+    const onChange = (e: any) => {
       console.log('size checked', e.target.value);
       size.value = e.target.value;
     };

components/descriptions/demo/vertical.vue

@@ -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: '',
     });
 

components/drawer/demo/placement.vue

@@ -38,9 +38,10 @@ The Drawer can appear from any edge of the screen.
 </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/size.vue

@@ -33,12 +33,13 @@ The default width (or height) of Drawer is `378px`, and there is a presetted lar
 </template>
 <script lang="ts">
 import { defineComponent, ref } from 'vue';
+import type { DrawerProps } from 'ant-design-vue';
 export default defineComponent({
   setup() {
     const visible = ref<boolean>(false);
-    const size = ref<string>('default');
+    const size = ref<DrawerProps['size']>('default');
 
-    const showDrawer = (val: string) => {
+    const showDrawer = (val: DrawerProps['size']) => {
       size.value = val;
       visible.value = true;
     };

components/dropdown/demo/dropdown-button.vue

@@ -103,6 +103,7 @@ A button is on the left, and a related functional menu is on the right. You can
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { UserOutlined, DownOutlined } from '@ant-design/icons-vue';
+import type { MenuProps } from 'ant-design-vue';
 
 export default defineComponent({
   components: {
@@ -113,7 +114,7 @@ export default defineComponent({
     const handleButtonClick = (e: Event) => {
       console.log('click left button', e);
     };
-    const handleMenuClick = (e: Event) => {
+    const handleMenuClick: MenuProps['onClick'] = e => {
       console.log('click', e);
     };
     return {

components/dropdown/demo/event.vue

@@ -34,20 +34,14 @@ An event will be triggered when you click menu items, in which you can make diff
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { DownOutlined } from '@ant-design/icons-vue';
-
+import type { MenuProps } from 'ant-design-vue';
-interface MenuInfo {
-  key: string;
-  keyPath: string[];
-  item: any;
-  domEvent: MouseEvent;
-}
 
 export default defineComponent({
   components: {
     DownOutlined,
   },
   setup() {
-    const onClick = ({ key }: MenuInfo) => {
+    const onClick: MenuProps['onClick'] = ({ key }) => {
       console.log(`Click on item ${key}`);
     };
     return {

components/dropdown/demo/overlay-visible.vue

@@ -34,20 +34,15 @@ The default is to close the menu when you click on menu items, this feature can
 <script lang="ts">
 import { defineComponent, ref } from 'vue';
 import { DownOutlined } from '@ant-design/icons-vue';
+import { MenuProps } from 'ant-design-vue';
 
-interface MenuInfo {
-  key: string;
-  keyPath: string[];
-  item: any;
-  domEvent: MouseEvent;
-}
 export default defineComponent({
   components: {
     DownOutlined,
   },
   setup() {
     const visible = ref(false);
-    const handleMenuClick = (e: MenuInfo) => {
+    const handleMenuClick: MenuProps['onClick'] = e => {
       if (e.key === '3') {
         visible.value = false;
       }

components/dropdown/demo/placement.vue

@@ -47,10 +47,18 @@ Support 6 placements.
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue';
+import type { DropdownProps } from 'ant-design-vue';
 export default defineComponent({
   setup() {
     return {
-      placements: ['bottomLeft', 'bottomCenter', 'bottomRight', 'topLeft', 'topCenter', 'topRight'],
+      placements: [
+        'bottomLeft',
+        'bottomCenter',
+        'bottomRight',
+        'topLeft',
+        'topCenter',
+        'topRight',
+      ] as DropdownProps['placement'][],
     };
   },
 });

components/mentions/demo/async.vue

@@ -31,7 +31,7 @@ export default defineComponent({
   setup() {
     const value = ref<string>('');
     const loading = ref<boolean>(false);
-    const users = ref<string[]>([]);
+    const users = ref<{ login: string; avatar_url: string }[]>([]);
     const search = ref<string>('');
     const loadGithubUsers = debounce((key: string) => {
       if (!key) {

components/menu/demo/inline.vue

@@ -69,6 +69,7 @@ Vertical menu with inline submenus.
 <script lang="ts">
 import { defineComponent, ref, watch } from 'vue';
 import { MailOutlined, QqOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons-vue';
+import type { MenuProps } from 'ant-design-vue';
 export default defineComponent({
   components: {
     MailOutlined,
@@ -79,7 +80,7 @@ export default defineComponent({
   setup() {
     const selectedKeys = ref<string[]>(['1']);
     const openKeys = ref<string[]>(['sub1']);
-    const handleClick = (e: Event) => {
+    const handleClick: MenuProps['onClick'] = e => {
       console.log('click', e);
     };
     const titleClick = (e: Event) => {

components/modal/demo/modal-render.vue

@@ -48,6 +48,7 @@ Custom modal content render. use `react-draggable` implements draggable.
 </template>
 <script lang="ts">
 import { defineComponent, ref } from 'vue';
+import type { CSSProperties } from 'vue';
 import VueDragResize from 'vue-drag-resize';
 export default defineComponent({
   components: {
@@ -57,7 +58,7 @@ export default defineComponent({
     const visible = ref<boolean>(false);
     const draggleRef = ref();
     const disabled = ref(true);
-    const bounds = ref({ left: 0, top: 0, width: 520, height: 0 });
+    const bounds = ref<CSSProperties>({ left: 0, top: 0, width: 520, height: 0 });
     const showModal = () => {
       visible.value = true;
     };
@@ -67,7 +68,7 @@ export default defineComponent({
       visible.value = false;
     };
 
-    const onStart = (event, uiData) => {
+    const onStart = (_event, uiData) => {
       const { clientWidth, clientHeight } = window.document.documentElement;
       const targetRect = draggleRef.value?.getBoundingClientRect();
       if (!targetRect) {

components/pagination/demo/custom-changer.vue

@@ -40,7 +40,7 @@ export default defineComponent({
     const pageSizeRef = ref(10);
     const total = ref(50);
     const onShowSizeChange = (current: number, pageSize: number) => {
-      console.log(pageSize);
+      console.log(current, pageSize);
       pageSizeRef.value = pageSize;
     };
 

components/radio/demo/radioGroup-options.vue

@@ -33,13 +33,14 @@ Render radios by configuring `options`.
 </template>
 <script lang="ts">
 import { defineComponent, ref } from 'vue';
+import { RadioGroupProps } from 'ant-design-vue';
 const plainOptions = ['Apple', 'Pear', 'Orange'];
 const options = [
   { label: 'Apple', value: 'Apple' },
   { label: 'Pear', value: 'Pear' },
   { label: 'Orange', value: 'Orange' },
 ];
-const optionsWithDisabled = [
+const optionsWithDisabled: RadioGroupProps['options'] = [
   { label: 'Apple', value: 'Apple' },
   { label: 'Pear', value: 'Pear' },
   { label: 'Orange', value: 'Orange', disabled: true },

components/select/demo/label-in-value.vue

@@ -31,11 +31,6 @@ The label of the selected item will be packed as an object for passing to the on
 import type { SelectProps } from 'ant-design-vue';
 import { defineComponent, ref } from 'vue';
 
-interface Value {
-  value?: string;
-  label?: string;
-}
-
 export default defineComponent({
   setup() {
     const options = ref<SelectProps['options']>([
@@ -48,11 +43,11 @@ export default defineComponent({
         label: 'Lucy (101)',
       },
     ]);
-    const handleChange = (value: Value) => {
+    const handleChange: SelectProps['onChange'] = value => {
       console.log(value); // { key: "lucy", label: "Lucy (101)" }
     };
     return {
-      value: ref<Value>({ value: 'lucy' }),
+      value: ref({ value: 'lucy' }),
       options,
       handleChange,
     };

components/select/demo/size.vue

@@ -51,6 +51,7 @@ The height of the input field for the select defaults to 32px. If size is set to
   </a-space>
 </template>
 <script lang="ts">
+import type { SelectProps } from 'ant-design-vue';
 import { defineComponent, ref } from 'vue';
 export default defineComponent({
   setup() {
@@ -60,7 +61,7 @@ export default defineComponent({
 
     return {
       popupScroll,
-      size: ref('default'),
+      size: ref<SelectProps['size']>('default'),
       value1: ref('a1'),
       value2: ref(['a1', 'b2']),
       value3: ref(['a1', 'b2']),

components/slider/demo/basic.vue

@@ -29,7 +29,7 @@ import { defineComponent, ref } from 'vue';
 export default defineComponent({
   setup() {
     const value1 = ref<number>(0);
-    const value2 = ref<number[]>([20, 50]);
+    const value2 = ref<[number, number]>([20, 50]);
     const disabled = ref<boolean>(false);
 
     return {

components/slider/demo/event.vue

@@ -27,7 +27,7 @@ import { defineComponent, ref } from 'vue';
 export default defineComponent({
   setup() {
     const value1 = ref<number>(30);
-    const value2 = ref<number[]>([20, 50]);
+    const value2 = ref<[number, number]>([20, 50]);
 
     const onAfterChange = (value: number) => {
       console.log('afterChange: ', value);

components/slider/demo/mark.vue

@@ -72,7 +72,7 @@ import { defineComponent, ref } from 'vue';
 export default defineComponent({
   setup() {
     const value1 = ref<number>(37);
-    const value2 = ref<number[]>([26, 37]);
+    const value2 = ref<[number, number]>([26, 37]);
     const value3 = ref<number>(37);
     const value4 = ref<number>(37);
     const value5 = ref<number>(37);

components/slider/demo/reverse.vue

@@ -29,7 +29,7 @@ import { defineComponent, ref } from 'vue';
 export default defineComponent({
   setup() {
     const value1 = ref<number>(30);
-    const value2 = ref<number[]>([20, 50]);
+    const value2 = ref<[number, number]>([20, 50]);
     const reverse = ref<boolean>(true);
 
     return {

components/slider/demo/vertical.vue

@@ -33,8 +33,8 @@ import { defineComponent, ref, createVNode } from 'vue';
 export default defineComponent({
   setup() {
     const value1 = ref<number>(30);
-    const value2 = ref<number[]>([20, 50]);
+    const value2 = ref<[number, number]>([20, 50]);
-    const value3 = ref<number[]>([26, 37]);
+    const value3 = ref<[number, number]>([26, 37]);
     const marks = ref<Record<number, any>>({
       0: '0°C',
       26: '26°C',

components/steps/demo/step-next.vue

@@ -27,7 +27,7 @@ Cooperate with the content and buttons, to represent the progress of a process.
       <a-button
         v-if="current == steps.length - 1"
         type="primary"
-        @click="$message.success('Processing complete!')"
+        @click="message.success('Processing complete!')"
       >
         Done
       </a-button>
@@ -37,6 +37,7 @@ Cooperate with the content and buttons, to represent the progress of a process.
 </template>
 <script lang="ts">
 import { defineComponent, ref } from 'vue';
+import { message } from 'ant-design-vue';
 
 export default defineComponent({
   setup() {
@@ -48,6 +49,7 @@ export default defineComponent({
       current.value--;
     };
     return {
+      message,
       current,
       steps: [
         {

components/table/demo/fixed-columns-header.vue

@@ -33,9 +33,10 @@ A Solution for displaying large amounts of data with long columns.
   </a-table>
 </template>
 <script lang="ts">
+import type { TableColumnsType } from 'ant-design-vue';
 import { defineComponent } from 'vue';
 
-const columns = [
+const columns: TableColumnsType = [
   { title: 'Full Name', width: 100, dataIndex: 'name', key: 'name', fixed: 'left' },
   { title: 'Age', width: 100, dataIndex: 'age', key: 'age', fixed: 'left' },
   { title: 'Column 1', dataIndex: 'address', key: '1', width: 150 },

components/table/demo/fixed-columns.vue

@@ -34,9 +34,10 @@ To fix some columns and scroll inside other columns, and you must set `scroll.x`
   </a-table>
 </template>
 <script lang="ts">
+import type { TableColumnsType } from 'ant-design-vue';
 import { defineComponent } from 'vue';
 
-const columns = [
+const columns: TableColumnsType = [
   { title: 'Full Name', width: 100, dataIndex: 'name', key: 'name', fixed: 'left' },
   { title: 'Age', width: 100, dataIndex: 'age', key: 'age', fixed: 'left' },
   { title: 'Column 1', dataIndex: 'address', key: '1' },

components/table/demo/grouping-columns.vue

@@ -26,6 +26,7 @@ Group table head with `columns[n].children`.
   />
 </template>
 <script lang="ts">
+import type { TableColumnsType } from 'ant-design-vue';
 import { defineComponent } from 'vue';
 type TableDataType = {
   key: number;
@@ -38,7 +39,7 @@ type TableDataType = {
   companyName: string;
   gender: string;
 };
-const columns = [
+const columns: TableColumnsType = [
   {
     title: 'Name',
     dataIndex: 'name',

components/table/demo/resizable-column.vue

@@ -62,6 +62,7 @@ set resizable for drag column
 </template>
 <script lang="ts">
 import { SmileOutlined, DownOutlined } from '@ant-design/icons-vue';
+import type { TableColumnsType } from 'ant-design-vue';
 import { defineComponent, ref } from 'vue';
 
 const data = [
@@ -94,9 +95,8 @@ export default defineComponent({
     DownOutlined,
   },
   setup() {
-    const columns = ref([
+    const columns = ref<TableColumnsType>([
       {
-        name: 'Name',
         dataIndex: 'name',
         key: 'name',
         resizable: true,

components/table/demo/summary.vue

@@ -58,11 +58,12 @@ Set summary content by `summary` prop. Sync column fixed status with `a-table-su
 </template>
 
 <script lang="ts">
+import type { TableColumnsType } from 'ant-design-vue';
 import { computed, defineComponent, ref } from 'vue';
 
 export default defineComponent({
   setup() {
-    const columns = ref([
+    const columns = ref<TableColumnsType>([
       {
         title: 'Name',
         dataIndex: 'name',
@@ -104,7 +105,7 @@ export default defineComponent({
       },
     ]);
 
-    const fixedColumns = ref([
+    const fixedColumns = ref<TableColumnsType>([
       {
         title: 'Name',
         dataIndex: 'name',

components/tabs/demo/editable-card.vue

@@ -19,7 +19,7 @@ Only card type Tabs support adding & closable.
 
 <template>
   <a-tabs v-model:activeKey="activeKey" type="editable-card" @edit="onEdit">
-    <a-tab-pane v-for="pane in panes" :key="pane.key" :tab="pane.title" :closable="pane.closable">
+    <a-tab-pane v-for="pane in panes" :key="pane.key" :tab="pane.title" :closable="!!pane.closable">
       {{ pane.content }}
     </a-tab-pane>
   </a-tabs>
@@ -29,7 +29,7 @@ import { defineComponent, ref } from 'vue';
 
 export default defineComponent({
   setup() {
-    const panes = ref([
+    const panes = ref<{ title: string; content: string; key: string; closable?: boolean }[]>([
       { title: 'Tab 1', content: 'Content of Tab 1', key: '1' },
       { title: 'Tab 2', content: 'Content of Tab 2', key: '2' },
       { title: 'Tab 3', content: 'Content of Tab 3', key: '3', closable: false },

components/tabs/demo/position.vue

@@ -31,10 +31,11 @@ Tab's position: left, right, top or bottom.  Will auto switch to `top` in mobile
 </template>
 <script lang="ts">
 import { defineComponent, ref } from 'vue';
+import { TabsProps } from '..';
 
 export default defineComponent({
   setup() {
-    const tabPosition = ref('top');
+    const tabPosition = ref<TabsProps['tabPosition']>('top');
     const activeKey = ref('1');
 
     return {

components/tabs/demo/size.vue

@@ -31,10 +31,11 @@ Large size tabs are usally used in page header, and small size could be used in
 </template>
 <script lang="ts">
 import { defineComponent, ref } from 'vue';
+import type { TabsProps } from 'ant-design-vue';
 
 export default defineComponent({
   setup() {
-    const size = ref('small');
+    const size = ref<TabsProps['size']>('small');
     const activeKey = ref('1');
     return {
       size,

components/tabs/demo/slide.vue

@@ -34,10 +34,11 @@ In order to fit in more tabs, they can slide left and right (or up and down).
 </template>
 <script lang="ts">
 import { defineComponent, ref } from 'vue';
+import type { TabsProps } from 'ant-design-vue';
 
 export default defineComponent({
   setup() {
-    const mode = ref('top');
+    const mode = ref<TabsProps['tabPosition']>('top');
     const activeKey = ref('1');
     const callback = (val: string) => {
       console.log(val);

components/timeline/demo/label.vue

@@ -34,10 +34,11 @@ Use `label` show time alone.
 </template>
 <script lang="ts">
 import { defineComponent, ref } from 'vue';
+import type { TimelineProps } from 'ant-design-vue';
 export default defineComponent({
   setup() {
     return {
-      mode: ref('left'),
+      mode: ref<TimelineProps['mode']>('left'),
     };
   },
 });

components/tree/demo/context-menu.vue

@@ -64,7 +64,7 @@ const treeData = [
 ];
 export default defineComponent({
   setup() {
-    const onContextMenuClick = (treeKey: string, menuKey: string) => {
+    const onContextMenuClick = (treeKey: string, menuKey: string | number) => {
       console.log(`treeKey: ${treeKey}, menuKey: ${menuKey}`);
     };
     const expandedKeys = ref<string[]>(['0-0-0', '0-0-1']);

components/typography/demo/interactive.vue

@@ -40,7 +40,7 @@ Provide additional interactive capacity of editable and copyable.
       <span v-else key="copied-tooltip">you clicked!!</span>
     </template>
   </a-typography-paragraph>
-  <a-typography-paragraph :copyable="{ tooltips: false }">
+  <a-typography-paragraph :copyable="{ tooltip: false }">
     Hide Copy tooltips.
   </a-typography-paragraph>
 </template>

package.json

@@ -51,6 +51,7 @@
     "codecov": "codecov",
     "routes": "node site/scripts/genrateRoutes.js",
     "tsc": "tsc --noEmit",
+    "vue-tsc": "vue-tsc --noEmit",
     "site": "yarn routes && ./node_modules/vite/bin/vite.js build site --base=https://next.antdv.com/",
     "pub:site": "npm run site && node site/scripts/pushToOSS.js",
     "prepare": "husky install"
@@ -232,6 +233,7 @@
     "vue-router": "^4.0.0",
     "vue-server-renderer": "^2.6.11",
     "vue-style-loader": "^4.1.2",
+    "vue-tsc": "^0.30.2",
     "vuex": "^4.0.0-beta.2",
     "webpack": "^5.0.0",
     "webpack-bundle-analyzer": "^4.4.2",