feat: update ts type

components/_util/transButton.tsx

@@ -5,7 +5,6 @@ import { defineComponent, ref, onMounted } from 'vue';
  * This helps accessibility reader to tread as a interactive button to operation.
  */
 import KeyCode from './KeyCode';
-import PropTypes from './vue-types';
 
 const inlineStyle = {
   border: 0,

components/components.ts

@@ -105,7 +105,14 @@ export { default as List, ListItem, ListItemMeta } from './list';
 export type { MessageArgsProps } from './message';
 export { default as message } from './message';
 
-export type { MenuProps, MenuTheme, SubMenuProps, MenuItemProps, MenuMode } from './menu';
+export type {
+  MenuProps,
+  MenuTheme,
+  SubMenuProps,
+  MenuItemProps,
+  MenuMode,
+  MenuDividerProps,
+} from './menu';
 export { default as Menu, MenuDivider, MenuItem, MenuItemGroup, SubMenu } from './menu';
 
 export type { MentionsProps } from './mentions';

components/input/ClearableLabeledInput.tsx

@@ -21,7 +21,7 @@ export default defineComponent({
     defaultValue: PropTypes.any,
     allowClear: { type: Boolean, default: undefined },
     element: PropTypes.any,
-    handleReset: Function,
+    handleReset: Function as PropType<MouseEventHandler>,
     disabled: { type: Boolean, default: undefined },
     direction: { type: String as PropType<Direction> },
     size: { type: String as PropType<SizeType> },

components/menu/index.tsx

@@ -7,6 +7,7 @@ import SubMenu from './src/SubMenu';
 import type { MenuItemGroupProps } from './src/ItemGroup';
 import ItemGroup from './src/ItemGroup';
 import Divider from './src/Divider';
+import type { MenuDividerProps } from './src/Divider';
 import type { App, Plugin } from 'vue';
 import type { MenuTheme, MenuMode } from './src/interface';
 /* istanbul ignore next */
@@ -23,7 +24,15 @@ Menu.Item = MenuItem;
 Menu.Divider = Divider;
 Menu.SubMenu = SubMenu;
 Menu.ItemGroup = ItemGroup;
-export type { MenuProps, SubMenuProps, MenuItemProps, MenuItemGroupProps, MenuTheme, MenuMode };
+export type {
+  MenuProps,
+  SubMenuProps,
+  MenuItemProps,
+  MenuItemGroupProps,
+  MenuTheme,
+  MenuMode,
+  MenuDividerProps,
+};
 export {
   SubMenu,
   MenuItem as Item,

components/menu/src/Divider.tsx

@@ -1,12 +1,17 @@
 import useConfigInject from '../../_util/hooks/useConfigInject';
+import type { ExtractPropTypes } from 'vue';
 import { computed, defineComponent } from 'vue';
 
+export const menuDividerProps = () => ({
+  prefixCls: String,
+  dashed: Boolean,
+});
+
+export type MenuDividerProps = Partial<ExtractPropTypes<ReturnType<typeof menuDividerProps>>>;
+
 export default defineComponent({
   name: 'AMenuDivider',
-  props: {
+  props: menuDividerProps(),
-    prefixCls: String,
-    dashed: Boolean,
-  },
   setup(props) {
     const { prefixCls } = useConfigInject('menu', props);
     const cls = computed(() => {

components/menu/src/ItemGroup.tsx

@@ -5,16 +5,16 @@ import PropTypes from '../../_util/vue-types';
 import { useInjectMenu } from './hooks/useMenuContext';
 import { useMeasure } from './hooks/useKeyPath';
 
-export const menuItemGroupProps = {
+export const menuItemGroupProps = () => ({
   title: PropTypes.any,
-};
+});
 
-export type MenuItemGroupProps = Partial<ExtractPropTypes<typeof menuItemGroupProps>>;
+export type MenuItemGroupProps = Partial<ExtractPropTypes<ReturnType<typeof menuItemGroupProps>>>;
 
 export default defineComponent({
   name: 'AMenuItemGroup',
   inheritAttrs: false,
-  props: menuItemGroupProps,
+  props: menuItemGroupProps(),
   slots: ['title'],
   setup(props, { slots, attrs }) {
     const { prefixCls } = useInjectMenu();

components/menu/src/Menu.tsx

@@ -29,15 +29,15 @@ import { OVERFLOW_KEY, PathContext } from './hooks/useKeyPath';
 import type { FocusEventHandler, MouseEventHandler } from '../../_util/EventInterface';
 import collapseMotion from '../../_util/collapseMotion';
 
-export const menuProps = {
+export const menuProps = () => ({
   id: String,
   prefixCls: String,
   disabled: Boolean,
   inlineCollapsed: Boolean,
   disabledOverflow: Boolean,
   forceSubMenuRender: Boolean,
-  openKeys: Array,
+  openKeys: Array as PropType<Key[]>,
-  selectedKeys: Array,
+  selectedKeys: Array as PropType<Key[]>,
   activeKey: String, // 内部组件使用
   selectable: { type: Boolean, default: true },
   multiple: { type: Boolean, default: false },
@@ -68,15 +68,15 @@ export const menuProps = {
   'onUpdate:openKeys': Function as PropType<(keys: Key[]) => void>,
   'onUpdate:selectedKeys': Function as PropType<(keys: Key[]) => void>,
   'onUpdate:activeKey': Function as PropType<(key: Key) => void>,
-};
+});
 
-export type MenuProps = Partial<ExtractPropTypes<typeof menuProps>>;
+export type MenuProps = Partial<ExtractPropTypes<ReturnType<typeof menuProps>>>;
 
 const EMPTY_LIST: string[] = [];
 export default defineComponent({
   name: 'AMenu',
   inheritAttrs: false,
-  props: menuProps,
+  props: menuProps(),
   slots: ['expandIcon', 'overflowedIndicator'],
   setup(props, { slots, emit, attrs }) {
     const { prefixCls, direction, getPrefixCls } = useConfigInject('menu', props);

components/menu/src/MenuItem.tsx

@@ -1,6 +1,6 @@
 import { flattenChildren, getPropsSlot, isValidElement } from '../../_util/props-util';
 import PropTypes from '../../_util/vue-types';
-import type { ExtractPropTypes } from 'vue';
+import type { ExtractPropTypes, PropType } from 'vue';
 import { computed, defineComponent, getCurrentInstance, onBeforeUnmount, ref, watch } from 'vue';
 import { useInjectKeyPath, useMeasure } from './hooks/useKeyPath';
 import { useInjectFirstLevel, useInjectMenu } from './hooks/useMenuContext';
@@ -11,24 +11,30 @@ import KeyCode from '../../_util/KeyCode';
 import useDirectionStyle from './hooks/useDirectionStyle';
 import Overflow from '../../vc-overflow';
 import devWarning from '../../vc-util/devWarning';
+import type { MouseEventHandler } from '../../_util/EventInterface';
 
 let indexGuid = 0;
-export const menuItemProps = {
+export const menuItemProps = () => ({
   id: String,
   role: String,
   disabled: Boolean,
   danger: Boolean,
   title: { type: [String, Boolean], default: undefined },
   icon: PropTypes.any,
-};
+  onMouseenter: Function as PropType<MouseEventHandler>,
+  onMouseleave: Function as PropType<MouseEventHandler>,
+  onClick: Function as PropType<MouseEventHandler>,
+  onKeydown: Function as PropType<MouseEventHandler>,
+  onFocus: Function as PropType<MouseEventHandler>,
+});
 
-export type MenuItemProps = Partial<ExtractPropTypes<typeof menuItemProps>>;
+export type MenuItemProps = Partial<ExtractPropTypes<ReturnType<typeof menuItemProps>>>;
 
 export default defineComponent({
   name: 'AMenuItem',
   inheritAttrs: false,
-  props: menuItemProps,
+  props: menuItemProps(),
-  emits: ['mouseenter', 'mouseleave', 'click', 'keydown', 'focus'],
+  // emits: ['mouseenter', 'mouseleave', 'click', 'keydown', 'focus'],
   slots: ['icon', 'title'],
   setup(props, { slots, emit, attrs }) {
     const instance = getCurrentInstance();

components/menu/src/SubMenu.tsx

@@ -19,10 +19,12 @@ import { cloneElement } from '../../_util/vnode';
 import Overflow from '../../vc-overflow';
 import devWarning from '../../vc-util/devWarning';
 import isValid from '../../_util/isValid';
+import type { MouseEventHandler } from '../../_util/EventInterface';
+import type { Key } from 'ant-design-vue/es/_util/type';
 
 let indexGuid = 0;
 
-export const subMenuProps = {
+export const subMenuProps = () => ({
   icon: PropTypes.any,
   title: PropTypes.any,
   disabled: Boolean,
@@ -32,16 +34,19 @@ export const subMenuProps = {
   internalPopupClose: Boolean,
   eventKey: String,
   expandIcon: Function as PropType<(p?: { isOpen: boolean; [key: string]: any }) => any>,
-};
+  onMouseenter: Function as PropType<MouseEventHandler>,
+  onMouseleave: Function as PropType<MouseEventHandler>,
+  onTitleClick: Function as PropType<(e: MouseEvent, key: Key) => void>,
+});
 
-export type SubMenuProps = Partial<ExtractPropTypes<typeof subMenuProps>>;
+export type SubMenuProps = Partial<ExtractPropTypes<ReturnType<typeof subMenuProps>>>;
 
 export default defineComponent({
   name: 'ASubMenu',
   inheritAttrs: false,
-  props: subMenuProps,
+  props: subMenuProps(),
   slots: ['icon', 'title', 'expandIcon'],
-  emits: ['titleClick', 'mouseenter', 'mouseleave'],
+  // emits: ['titleClick', 'mouseenter', 'mouseleave'],
   setup(props, { slots, attrs, emit }) {
     useProvideFirstLevel(false);
     const isMeasure = useMeasure();

components/page-header/index.tsx

@@ -1,4 +1,4 @@
-import type { ExtractPropTypes } from 'vue';
+import type { ExtractPropTypes, PropType } from 'vue';
 import { defineComponent, ref, computed } from 'vue';
 import PropTypes from '../_util/vue-types';
 import { filterEmpty, flattenChildren, isEmptyContent } from '../_util/props-util';
@@ -13,8 +13,9 @@ import useConfigInject from '../_util/hooks/useConfigInject';
 import classNames from '../_util/classNames';
 import ResizeObserver from '../vc-resize-observer';
 import useDestroyed from '../_util/hooks/useDestroyed';
+import type { MouseEventHandler } from '../_util/EventInterface';
 
-export const pageHeaderProps = {
+export const pageHeaderProps = () => ({
   backIcon: PropTypes.any,
   prefixCls: String,
   title: PropTypes.any,
@@ -25,15 +26,15 @@ export const pageHeaderProps = {
   extra: PropTypes.any,
   avatar: PropTypes.object,
   ghost: { type: Boolean, default: undefined },
-  onBack: Function,
+  onBack: Function as PropType<MouseEventHandler>,
-};
+});
 
-export type PageHeaderProps = Partial<ExtractPropTypes<typeof pageHeaderProps>>;
+export type PageHeaderProps = Partial<ExtractPropTypes<ReturnType<typeof pageHeaderProps>>>;
 
 const PageHeader = defineComponent({
   name: 'APageHeader',
-  props: pageHeaderProps,
+  props: pageHeaderProps(),
-  emits: ['back'],
+  // emits: ['back'],
   slots: ['backIcon', 'avatar', 'breadcrumb', 'title', 'subTitle', 'tags', 'extra', 'footer'],
   setup(props, { emit, slots }) {
     const { prefixCls, direction, pageHeader } = useConfigInject('page-header', props);

components/pagination/Pagination.tsx

@@ -78,7 +78,7 @@ export default defineComponent({
   name: 'APagination',
   inheritAttrs: false,
   props: paginationProps(),
-  emits: ['change', 'showSizeChange', 'update:current', 'update:pageSize'],
+  // emits: ['change', 'showSizeChange', 'update:current', 'update:pageSize'],
   setup(props, { slots, attrs }) {
     const { prefixCls, configProvider, direction } = useConfigInject('pagination', props);
     const selectPrefixCls = computed(() =>

components/popconfirm/index.tsx

@@ -1,4 +1,4 @@
-import type { ExtractPropTypes, PropType } from 'vue';
+import type { ExtractPropTypes, HTMLAttributes, PropType } from 'vue';
 import { computed, onMounted, ref, toRef, defineComponent } from 'vue';
 import Tooltip from '../tooltip';
 import abstractTooltipProps from '../tooltip/abstractTooltipProps';
@@ -35,8 +35,14 @@ export const popconfirmProps = () => ({
   okText: PropTypes.any,
   cancelText: PropTypes.any,
   icon: PropTypes.any,
-  okButtonProps: PropTypes.object,
+  okButtonProps: {
-  cancelButtonProps: PropTypes.object,
+    type: Object as PropType<ButtonProps & HTMLAttributes>,
+    default: undefined as ButtonProps & HTMLAttributes,
+  },
+  cancelButtonProps: {
+    type: Object as PropType<ButtonProps & HTMLAttributes>,
+    default: undefined as ButtonProps & HTMLAttributes,
+  },
   showCancel: { type: Boolean, default: true },
   onConfirm: Function as PropType<(e: MouseEvent) => void>,
   onCancel: Function as PropType<(e: MouseEvent) => void>,
@@ -52,10 +58,9 @@ export interface PopconfirmLocale {
 const Popconfirm = defineComponent({
   name: 'APopconfirm',
   props: initDefaultProps(popconfirmProps(), {
-    ...tooltipDefaultProps,
+    ...tooltipDefaultProps(),
     trigger: 'click',
     transitionName: 'zoom-big',
-    align: () => ({}),
     placement: 'top',
     mouseEnterDelay: 0.1,
     mouseLeaveDelay: 0.1,

components/popover/index.tsx

@@ -21,7 +21,7 @@ export type PopoverProps = Partial<ExtractPropTypes<ReturnType<typeof popoverPro
 const Popover = defineComponent({
   name: 'APopover',
   props: initDefaultProps(popoverProps(), {
-    ...tooltipDefaultProps,
+    ...tooltipDefaultProps(),
     trigger: 'hover',
     transitionName: 'zoom-big',
     placement: 'top',

components/progress/Circle.tsx

@@ -22,6 +22,7 @@ function getStrokeColor({
 }
 
 export default defineComponent({
+  name: 'Circle',
   inheritAttrs: false,
   props: progressProps(),
   setup(props, { slots }) {

components/progress/Line.tsx

@@ -6,15 +6,15 @@ import type { StringGradients, ProgressGradient } from './props';
 import { progressProps } from './props';
 import { getSuccessPercent, validProgress } from './utils';
 
-export const lineProps = {
+export const lineProps = () => ({
   ...progressProps(),
   prefixCls: String,
   direction: {
     type: String as PropType<Direction>,
   },
-};
+});
 
-export type LineProps = Partial<ExtractPropTypes<typeof lineProps>>;
+export type LineProps = Partial<ExtractPropTypes<ReturnType<typeof lineProps>>>;
 
 /**
  * {
@@ -69,7 +69,7 @@ export const handleGradient = (strokeColor: ProgressGradient, directionConfig: D
 
 export default defineComponent({
   name: 'Line',
-  props: lineProps,
+  props: lineProps(),
   setup(props, { slots }) {
     const backgroundProps = computed(() => {
       const { strokeColor, direction } = props;

components/progress/Steps.tsx

@@ -4,7 +4,7 @@ import type { VueNode } from '../_util/type';
 import type { ProgressSize } from './props';
 import { progressProps } from './props';
 
-export const stepsProps = {
+export const stepsProps = () => ({
   ...progressProps(),
   steps: Number,
   size: {
@@ -12,12 +12,13 @@ export const stepsProps = {
   },
   strokeColor: String,
   trailColor: String,
-};
+});
 
 export type StepsProps = Partial<ExtractPropTypes<typeof stepsProps>>;
 
 export default defineComponent({
-  props: stepsProps,
+  name: 'Steps',
+  props: stepsProps(),
   setup(props, { slots }) {
     const current = computed(() => Math.round(props.steps * ((props.percent || 0) / 100)));
     const stepWidth = computed(() => (props.size === 'small' ? 2 : 14));

components/progress/props.ts

@@ -26,9 +26,10 @@ export const progressProps = () => ({
   status: PropTypes.oneOf(progressStatuses),
   showInfo: { type: Boolean, default: undefined },
   strokeWidth: Number,
-  strokeLinecap: PropTypes.oneOf(tuple('butt', 'round', 'square')),
+  strokeLinecap: String as PropType<'butt' | 'square' | 'round'>,
   strokeColor: {
     type: [String, Object] as PropType<string | ProgressGradient>,
+    default: undefined as string | ProgressGradient,
   },
   trailColor: String,
   width: Number,
@@ -37,7 +38,7 @@ export const progressProps = () => ({
     default: (): SuccessProps => ({}),
   },
   gapDegree: Number,
-  gapPosition: PropTypes.oneOf(tuple('top', 'bottom', 'left', 'right')),
+  gapPosition: String as PropType<'top' | 'bottom' | 'left' | 'right'>,
   size: PropTypes.oneOf(ProgressSize),
   steps: Number,
   /** @deprecated Use `success` instead */

components/radio/Group.tsx

@@ -5,16 +5,14 @@ import PropTypes from '../_util/vue-types';
 import Radio from './Radio';
 import useConfigInject from '../_util/hooks/useConfigInject';
 import { tuple } from '../_util/type';
-import type { RadioChangeEvent } from './interface';
+import type { RadioChangeEvent, RadioGroupButtonStyle, RadioGroupOptionType } from './interface';
 import { useInjectFormItemContext } from '../form/FormItemContext';
 
 const RadioGroupSizeTypes = tuple('large', 'default', 'small');
 
 export type RadioGroupSize = typeof RadioGroupSizeTypes[number];
 
-const RadioGroupOptionTypes = tuple('default', 'button');
+export type RadioGroupOption = RadioGroupOptionType;
-
-export type RadioGroupOption = typeof RadioGroupOptionTypes[number];
 
 export type RadioGroupChildOption = {
   label?: any;
@@ -22,7 +20,7 @@ export type RadioGroupChildOption = {
   disabled?: boolean;
 };
 
-export const radioGroupProps = {
+export const radioGroupProps = () => ({
   prefixCls: String,
   value: PropTypes.any,
   size: PropTypes.oneOf(RadioGroupSizeTypes).def('default'),
@@ -31,17 +29,19 @@ export const radioGroupProps = {
   },
   disabled: { type: Boolean, default: undefined },
   name: String,
-  buttonStyle: PropTypes.string.def('outline'),
+  buttonStyle: { type: String as PropType<RadioGroupButtonStyle>, default: 'outline' },
   id: String,
-  optionType: PropTypes.oneOf(RadioGroupOptionTypes).def('default'),
+  optionType: { type: String as PropType<RadioGroupOptionType>, default: 'default' },
-};
+  onChange: Function as PropType<(e: RadioChangeEvent) => void>,
+  'onUpdate:value': Function as PropType<(val: any) => void>,
+});
 
-export type RadioGroupProps = Partial<ExtractPropTypes<typeof radioGroupProps>>;
+export type RadioGroupProps = Partial<ExtractPropTypes<ReturnType<typeof radioGroupProps>>>;
 
 export default defineComponent({
   name: 'ARadioGroup',
-  props: radioGroupProps,
+  props: radioGroupProps(),
-  emits: ['update:value', 'change'],
+  // emits: ['update:value', 'change'],
   setup(props, { slots, emit }) {
     const formItemContext = useInjectFormItemContext();
     const { prefixCls, direction, size } = useConfigInject('radio', props);

components/radio/Radio.tsx

@@ -1,4 +1,4 @@
-import type { ExtractPropTypes } from 'vue';
+import type { ExtractPropTypes, PropType } from 'vue';
 import { defineComponent, inject, ref } from 'vue';
 import PropTypes from '../_util/vue-types';
 import VcCheckbox from '../vc-checkbox/Checkbox';
@@ -6,8 +6,10 @@ import classNames from '../_util/classNames';
 import useConfigInject from '../_util/hooks/useConfigInject';
 import type { RadioChangeEvent, RadioGroupContext } from './interface';
 import { useInjectFormItemContext } from '../form/FormItemContext';
+import omit from '../_util/omit';
+import type { FocusEventHandler, MouseEventHandler } from '../_util/EventInterface';
 
-export const radioProps = {
+export const radioProps = () => ({
   prefixCls: String,
   checked: { type: Boolean, default: undefined },
   disabled: { type: Boolean, default: undefined },
@@ -16,18 +18,20 @@ export const radioProps = {
   name: String,
   id: String,
   autofocus: { type: Boolean, default: undefined },
-  onChange: Function,
+  onChange: Function as PropType<(event: RadioChangeEvent) => void>,
-  onFocus: Function,
+  onFocus: Function as PropType<FocusEventHandler>,
-  onBlur: Function,
+  onBlur: Function as PropType<FocusEventHandler>,
-  onClick: Function,
+  onClick: Function as PropType<MouseEventHandler>,
-};
+  'onUpdate:checked': Function as PropType<(checked: boolean) => void>,
+  'onUpdate:value': Function as PropType<(checked: boolean) => void>,
+});
 
-export type RadioProps = Partial<ExtractPropTypes<typeof radioProps>>;
+export type RadioProps = Partial<ExtractPropTypes<ReturnType<typeof radioProps>>>;
 
 export default defineComponent({
   name: 'ARadio',
-  props: radioProps,
+  props: radioProps(),
-  emits: ['update:checked', 'update:value', 'change', 'blur', 'focus'],
+  // emits: ['update:checked', 'update:value', 'change', 'blur', 'focus'],
   setup(props, { emit, expose, slots }) {
     const formItemContext = useInjectFormItemContext();
     const vcCheckbox = ref<HTMLElement>();
@@ -66,7 +70,7 @@ export default defineComponent({
       const rProps: RadioProps = {
         prefixCls: prefixCls.value,
         id,
-        ...restProps,
+        ...omit(restProps, ['onUpdate:checked', 'onUpdate:value']),
       };
 
       if (radioGroup) {

components/radio/RadioButton.tsx

@@ -6,8 +6,8 @@ import type { RadioGroupContext } from './interface';
 
 export default defineComponent({
   name: 'ARadioButton',
-  props: radioProps,
+  props: radioProps(),
-  setup(props: RadioProps, { slots }) {
+  setup(props, { slots }) {
     const { prefixCls } = useConfigInject('radio-button', props);
     const radioGroupContext = inject<RadioGroupContext>('radioGroupContext', undefined);
 

components/radio/demo/radioGroup-options.vue

@@ -16,20 +16,14 @@ Render radios by configuring `options`.
 
 </docs>
 <template>
-  <div>
+  <a-space direction="vertical">
     <a-radio-group v-model:value="value1" :options="plainOptions" />
-    <br />
     <a-radio-group v-model:value="value2" :options="optionsWithDisabled" />
-    <br />
     <a-radio-group v-model:value="value3" :options="plainOptions" disabled />
-    <br />
     <a-radio-group v-model:value="value1" option-type="button" :options="plainOptions" />
-    <br />
     <a-radio-group v-model:value="value2" option-type="button" :options="optionsWithDisabled" />
-    <br />
     <a-radio-group v-model:value="value3" option-type="button" :options="plainOptions" disabled />
-    <br />
+  </a-space>
-  </div>
 </template>
 <script lang="ts">
 import { defineComponent, ref } from 'vue';

components/radio/interface.ts

@@ -4,6 +4,9 @@ export interface RadioChangeEventTarget extends RadioProps {
   checked: boolean;
 }
 
+export type RadioGroupButtonStyle = 'outline' | 'solid';
+export type RadioGroupOptionType = 'default' | 'button';
+
 export interface RadioChangeEvent {
   target: RadioChangeEventTarget;
   stopPropagation: () => void;

components/rate/index.tsx

@@ -1,4 +1,4 @@
-import type { ExtractPropTypes, VNode } from 'vue';
+import type { ExtractPropTypes, PropType, VNode } from 'vue';
 import { watch, defineComponent, ref, reactive, onMounted } from 'vue';
 import { initDefaultProps, getPropsSlot, findDOMNode } from '../_util/props-util';
 import { withInstall } from '../_util/type';
@@ -13,28 +13,36 @@ import useConfigInject from '../_util/hooks/useConfigInject';
 import Star from './Star';
 import useRefs from '../_util/hooks/useRefs';
 import { useInjectFormItemContext } from '../form/FormItemContext';
+import type { Direction } from '../config-provider';
+import type { FocusEventHandler, KeyboardEventHandler } from '../_util/EventInterface';
 
-export const rateProps = {
+export const rateProps = () => ({
   prefixCls: String,
   count: Number,
   value: Number,
   allowHalf: { type: Boolean, default: undefined },
   allowClear: { type: Boolean, default: undefined },
-  tooltips: PropTypes.arrayOf(PropTypes.string),
+  tooltips: Array as PropType<string[]>,
   disabled: { type: Boolean, default: undefined },
   character: PropTypes.any,
   autofocus: { type: Boolean, default: undefined },
   tabindex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  direction: String,
+  direction: String as PropType<Direction>,
   id: String,
-};
+  onChange: Function as PropType<(value: number) => void>,
+  onHoverChange: Function as PropType<(value: number) => void>,
+  'onUpdate:value': Function as PropType<(value: number) => void>,
+  onFocus: Function as PropType<FocusEventHandler>,
+  onBlur: Function as PropType<FocusEventHandler>,
+  onKeydown: Function as PropType<KeyboardEventHandler>,
+});
 
-export type RateProps = Partial<ExtractPropTypes<typeof rateProps>>;
+export type RateProps = Partial<ExtractPropTypes<ReturnType<typeof rateProps>>>;
 
 const Rate = defineComponent({
   name: 'ARate',
   inheritAttrs: false,
-  props: initDefaultProps(rateProps, {
+  props: initDefaultProps(rateProps(), {
     value: 0,
     count: 5,
     allowHalf: false,
@@ -42,7 +50,7 @@ const Rate = defineComponent({
     tabindex: 0,
     direction: 'ltr',
   }),
-  emits: ['hoverChange', 'update:value', 'change', 'focus', 'blur', 'keydown'],
+  // emits: ['hoverChange', 'update:value', 'change', 'focus', 'blur', 'keydown'],
   setup(props, { slots, attrs, emit, expose }) {
     const { prefixCls, direction } = useConfigInject('rate', props);
     const formItemContext = useInjectFormItemContext();

components/result/index.tsx

@@ -1,7 +1,6 @@
-import type { App, VNodeTypes, Plugin, ExtractPropTypes } from 'vue';
+import type { App, VNodeTypes, Plugin, ExtractPropTypes, PropType } from 'vue';
 import { defineComponent, computed } from 'vue';
 import PropTypes from '../_util/vue-types';
-import { tuple } from '../_util/type';
 import CheckCircleFilled from '@ant-design/icons-vue/CheckCircleFilled';
 import CloseCircleFilled from '@ant-design/icons-vue/CloseCircleFilled';
 import ExclamationCircleFilled from '@ant-design/icons-vue/ExclamationCircleFilled';
@@ -25,21 +24,22 @@ export const ExceptionMap = {
   '403': unauthorized,
 };
 
+export type ExceptionStatusType = 403 | 404 | 500 | '403' | '404' | '500';
+export type ResultStatusType = ExceptionStatusType | keyof typeof IconMap;
+
 // ExceptionImageMap keys
 const ExceptionStatus = Object.keys(ExceptionMap);
 
-export const resultProps = {
+export const resultProps = () => ({
   prefixCls: String,
   icon: PropTypes.any,
-  status: PropTypes.oneOf(tuple('success', 'error', 'info', 'warning', '404', '403', '500')).def(
+  status: { type: [Number, String] as PropType<ResultStatusType>, default: 'info' },
-    'info',
-  ),
   title: PropTypes.any,
   subTitle: PropTypes.any,
   extra: PropTypes.any,
-};
+});
 
-export type ResultProps = Partial<ExtractPropTypes<typeof resultProps>>;
+export type ResultProps = Partial<ExtractPropTypes<ReturnType<typeof resultProps>>>;
 
 const renderIcon = (prefixCls: string, { status, icon }) => {
   if (ExceptionStatus.includes(`${status}`)) {
@@ -60,7 +60,7 @@ const renderExtra = (prefixCls: string, extra: VNodeTypes) =>
 
 const Result = defineComponent({
   name: 'AResult',
-  props: resultProps,
+  props: resultProps(),
   slots: ['title', 'subTitle', 'icon', 'extra'],
   setup(props, { slots }) {
     const { prefixCls, direction } = useConfigInject('result', props);

components/slider/index.tsx

@@ -10,6 +10,7 @@ import useConfigInject from '../_util/hooks/useConfigInject';
 import SliderTooltip from './SliderTooltip';
 import classNames from '../_util/classNames';
 import { useInjectFormItemContext } from '../form/FormItemContext';
+import type { FocusEventHandler } from '../_util/EventInterface';
 
 export type SliderValue = number | [number, number];
 
@@ -64,10 +65,13 @@ export const sliderProps = () => ({
     type: Function as PropType<(triggerNode: HTMLElement) => HTMLElement>,
   },
   autofocus: { type: Boolean, default: undefined },
-  onChange: { type: Function as PropType<(value: Value) => void> },
-  onAfterChange: { type: Function as PropType<(value: Value) => void> },
   handleStyle: { type: [Object, Array] as PropType<CSSProperties[] | CSSProperties> },
   trackStyle: { type: [Object, Array] as PropType<CSSProperties[] | CSSProperties> },
+  onChange: { type: Function as PropType<(value: Value) => void> },
+  onAfterChange: { type: Function as PropType<(value: Value) => void> },
+  onFocus: { type: Function as PropType<FocusEventHandler> },
+  onBlur: { type: Function as PropType<FocusEventHandler> },
+  'onUpdate:value': { type: Function as PropType<(value: Value) => void> },
 });
 
 export type SliderProps = Partial<ExtractPropTypes<ReturnType<typeof sliderProps>>>;
@@ -77,7 +81,7 @@ const Slider = defineComponent({
   name: 'ASlider',
   inheritAttrs: false,
   props: sliderProps(),
-  emits: ['update:value', 'change', 'afterChange', 'blur'],
+  // emits: ['update:value', 'change', 'afterChange', 'blur'],
   slots: ['mark'],
   setup(props, { attrs, slots, emit, expose }) {
     const { prefixCls, rootPrefixCls, direction, getPopupContainer, configProvider } =
@@ -173,7 +177,7 @@ const Slider = defineComponent({
             step={restProps.step!}
             draggableTrack={draggableTrack}
             class={cls}
-            ref={ref}
+            ref={sliderRef}
             handle={(info: HandleGeneratorInfo) =>
               handleWithTooltip({
                 tooltipPrefixCls,
@@ -183,6 +187,7 @@ const Slider = defineComponent({
             }
             prefixCls={prefixCls.value}
             onChange={handleChange}
+            onBlur={handleBlur}
             v-slots={{ mark: slots.mark }}
           />
         );
@@ -193,7 +198,7 @@ const Slider = defineComponent({
           id={id}
           step={restProps.step!}
           class={cls}
-          ref={ref}
+          ref={sliderRef}
           handle={(info: HandleGeneratorInfo) =>
             handleWithTooltip({
               tooltipPrefixCls,

components/space/index.tsx

@@ -14,7 +14,7 @@ const spaceSize = {
   middle: 16,
   large: 24,
 };
-export const spaceProps = {
+export const spaceProps = () => ({
   prefixCls: String,
   size: {
     type: [String, Number, Array] as PropType<SpaceSize | [SpaceSize, SpaceSize]>,
@@ -22,9 +22,9 @@ export const spaceProps = {
   direction: PropTypes.oneOf(tuple('horizontal', 'vertical')).def('horizontal'),
   align: PropTypes.oneOf(tuple('start', 'end', 'center', 'baseline')),
   wrap: { type: Boolean, default: undefined },
-};
+});
 
-export type SpaceProps = Partial<ExtractPropTypes<typeof spaceProps>>;
+export type SpaceProps = Partial<ExtractPropTypes<ReturnType<typeof spaceProps>>>;
 
 function getNumberSize(size: SpaceSize) {
   return typeof size === 'string' ? spaceSize[size] : size || 0;
@@ -32,7 +32,7 @@ function getNumberSize(size: SpaceSize) {
 
 const Space = defineComponent({
   name: 'ASpace',
-  props: spaceProps,
+  props: spaceProps(),
   slots: ['split'],
   setup(props, { slots }) {
     const { prefixCls, space, direction: directionConfig } = useConfigInject('space', props);

components/spin/Spin.tsx

@@ -1,19 +1,16 @@
-import type { VNode, ExtractPropTypes } from 'vue';
+import type { VNode, ExtractPropTypes, PropType } from 'vue';
 import { inject, cloneVNode, isVNode, defineComponent, nextTick } from 'vue';
 import debounce from 'lodash-es/debounce';
-import { tuple } from '../_util/type';
 import PropTypes from '../_util/vue-types';
-import BaseMixin from '../_util/BaseMixin';
 import { getComponent, getSlot } from '../_util/props-util';
 import initDefaultProps from '../_util/props-util/initDefaultProps';
 import { defaultConfigProvider } from '../config-provider';
 
-export const SpinSize = PropTypes.oneOf(tuple('small', 'default', 'large'));
+export type SpinSize = 'small' | 'default' | 'large';
-
 export const spinProps = () => ({
   prefixCls: String,
   spinning: { type: Boolean, default: undefined },
-  size: SpinSize,
+  size: String as PropType<SpinSize>,
   wrapperClassName: String,
   tip: PropTypes.any,
   delay: Number,
@@ -36,7 +33,6 @@ export function setDefaultIndicator(Content: any) {
 
 export default defineComponent({
   name: 'ASpin',
-  mixins: [BaseMixin],
   inheritAttrs: false,
   props: initDefaultProps(spinProps(), {
     size: 'default',
@@ -83,7 +79,7 @@ export default defineComponent({
     updateSpinning() {
       const { spinning, sSpinning } = this;
       if (sSpinning !== spinning) {
-        this.setState({ sSpinning: spinning });
+        this.sSpinning = spinning;
       }
     },
     cancelExistingSpin() {

components/statistic/Countdown.tsx

@@ -1,4 +1,6 @@
+import type { ExtractPropTypes, PropType } from 'vue';
 import { defineComponent, onBeforeUnmount, onMounted, onUpdated, ref } from 'vue';
+import omit from '../_util/omit';
 import initDefaultProps from '../_util/props-util/initDefaultProps';
 import Statistic, { statisticProps } from './Statistic';
 import type { countdownValueType, FormatConfig } from './utils';
@@ -9,13 +11,23 @@ const REFRESH_INTERVAL = 1000 / 30;
 function getTime(value?: countdownValueType) {
   return new Date(value as any).getTime();
 }
+export const countdownProps = () => {
+  return {
+    ...statisticProps(),
+    value: [Number, String],
+    format: String,
+    onFinish: Function as PropType<() => void>,
+    onChange: Function as PropType<(value?: countdownValueType) => void>,
+  };
+};
 
+export type CountdownProps = Partial<ExtractPropTypes<ReturnType<typeof countdownProps>>>;
 export default defineComponent({
   name: 'AStatisticCountdown',
-  props: initDefaultProps(statisticProps, {
+  props: initDefaultProps(countdownProps(), {
     format: 'HH:mm:ss',
   }),
-  emits: ['finish', 'change'],
+  // emits: ['finish', 'change'],
   setup(props, { emit, slots }) {
     const countdownId = ref<any>();
     const statistic = ref();
@@ -80,7 +92,7 @@ export default defineComponent({
         <Statistic
           ref={statistic}
           {...{
-            ...props,
+            ...omit(props, ['onFinish', 'onChange']),
             valueRender: valueRenderHtml,
             formatter: formatCountdown,
           }}

components/statistic/Statistic.tsx

@@ -7,7 +7,7 @@ import type { countdownValueType } from './utils';
 import Skeleton from '../skeleton/Skeleton';
 import useConfigInject from '../_util/hooks/useConfigInject';
 
-export const statisticProps = {
+export const statisticProps = () => ({
   prefixCls: String,
   decimalSeparator: String,
   groupSeparator: String,
@@ -22,15 +22,14 @@ export const statisticProps = {
   prefix: PropTypes.any,
   suffix: PropTypes.any,
   title: PropTypes.any,
-  onFinish: Function,
   loading: { type: Boolean, default: undefined },
-};
+});
 
-export type StatisticProps = Partial<ExtractPropTypes<typeof statisticProps>>;
+export type StatisticProps = Partial<ExtractPropTypes<ReturnType<typeof statisticProps>>>;
 
 export default defineComponent({
   name: 'AStatistic',
-  props: initDefaultProps(statisticProps, {
+  props: initDefaultProps(statisticProps(), {
     decimalSeparator: '.',
     groupSeparator: ',',
     loading: false,

components/steps/index.tsx

@@ -57,7 +57,7 @@ const Steps = defineComponent({
     labelPlacement: 'horizontal',
   }),
   slots: ['progressDot'],
-  emits: ['update:current', 'change'],
+  // emits: ['update:current', 'change'],
   setup(props, { attrs, slots, emit }) {
     const { prefixCls, direction: rtlDirection, configProvider } = useConfigInject('steps', props);
     const screens = useBreakpoint();

components/switch/index.tsx

@@ -10,10 +10,11 @@ import { getPropsSlot } from '../_util/props-util';
 import useConfigInject from '../_util/hooks/useConfigInject';
 import { useInjectFormItemContext } from '../form/FormItemContext';
 import omit from '../_util/omit';
+import type { FocusEventHandler } from '../_util/EventInterface';
 
 export const SwitchSizes = tuple('small', 'default');
 type CheckedType = boolean | string | number;
-export const switchProps = {
+export const switchProps = () => ({
   id: String,
   prefixCls: String,
   size: PropTypes.oneOf(SwitchSizes),
@@ -47,17 +48,19 @@ export const switchProps = {
   'onUpdate:checked': {
     type: Function as PropType<(checked: CheckedType) => void>,
   },
-};
+  onBlur: Function as PropType<FocusEventHandler>,
+  onFocus: Function as PropType<FocusEventHandler>,
+});
 
-export type SwitchProps = Partial<ExtractPropTypes<typeof switchProps>>;
+export type SwitchProps = Partial<ExtractPropTypes<ReturnType<typeof switchProps>>>;
 
 const Switch = defineComponent({
   name: 'ASwitch',
   __ANT_SWITCH: true,
   inheritAttrs: false,
-  props: switchProps,
+  props: switchProps(),
   slots: ['checkedChildren', 'unCheckedChildren'],
-  emits: ['update:checked', 'mouseup', 'change', 'click', 'keydown', 'blur'],
+  // emits: ['update:checked', 'mouseup', 'change', 'click', 'keydown', 'blur'],
   setup(props, { attrs, slots, expose, emit }) {
     const formItemContext = useInjectFormItemContext();
     onBeforeMount(() => {
@@ -158,6 +161,8 @@ const Switch = defineComponent({
             'checkedValue',
             'unCheckedValue',
             'id',
+            'onChange',
+            'onUpdate:checked',
           ])}
           {...attrs}
           id={props.id ?? formItemContext.id.value}

components/tabs/src/TabNavList/OperationNode.tsx

@@ -14,7 +14,7 @@ import { EllipsisOutlined } from '@ant-design/icons-vue';
 export const operationNodeProps = {
   prefixCls: { type: String },
   id: { type: String },
-  tabs: { type: Object as PropType<Tab[]> },
+  tabs: { type: Object as PropType<(Tab & { closeIcon?: () => any })[]> },
   rtl: { type: Boolean },
   tabBarGutter: { type: Number },
   activeKey: { type: [String, Number] },

components/tabs/src/TabNavList/TabNode.tsx

@@ -25,7 +25,7 @@ export default defineComponent({
   props: {
     id: { type: String as PropType<string> },
     prefixCls: { type: String as PropType<string> },
-    tab: { type: Object as PropType<Tab> },
+    tab: { type: Object as PropType<Tab & { closeIcon?: () => any }> },
     active: { type: Boolean },
     closable: { type: Boolean },
     editable: { type: Object as PropType<EditableConfig> },

components/tabs/src/TabPanelList/TabPane.tsx

@@ -1,42 +1,30 @@
 import { defineComponent, ref, watch, computed } from 'vue';
-import type { CSSProperties } from 'vue';
+import type { CSSProperties, ExtractPropTypes } from 'vue';
-import type { VueNode, Key } from '../../../_util/type';
 import PropTypes from '../../../_util/vue-types';
 
-export interface TabPaneProps {
+const tabPaneProps = () => ({
-  tab?: VueNode | (() => VueNode);
+  tab: PropTypes.any,
-  disabled?: boolean;
+  disabled: { type: Boolean },
-  forceRender?: boolean;
+  forceRender: { type: Boolean },
-  closable?: boolean;
+  closable: { type: Boolean },
-  closeIcon?: () => VueNode;
+  animated: { type: Boolean },
+  active: { type: Boolean },
+  destroyInactiveTabPane: { type: Boolean },
 
   // Pass by TabPaneList
-  prefixCls?: string;
+  prefixCls: { type: String },
-  tabKey?: Key;
+  tabKey: { type: [String, Number] },
-  id?: string;
+  id: { type: String },
-  animated?: boolean;
+  // closeIcon: PropTypes.any,
-  active?: boolean;
+});
-  destroyInactiveTabPane?: boolean;
+
-}
+export type TabPaneProps = Partial<ExtractPropTypes<ReturnType<typeof tabPaneProps>>>;
 
 export default defineComponent({
   name: 'ATabPane',
   inheritAttrs: false,
   __ANT_TAB_PANE: true,
-  props: {
+  props: tabPaneProps(),
-    tab: PropTypes.any,
-    disabled: { type: Boolean },
-    forceRender: { type: Boolean },
-    closable: { type: Boolean },
-    animated: { type: Boolean },
-    active: { type: Boolean },
-    destroyInactiveTabPane: { type: Boolean },
-
-    // Pass by TabPaneList
-    prefixCls: { type: String },
-    tabKey: { type: [String, Number] },
-    id: { type: String },
-  },
   slots: ['closeIcon', 'tab'],
   setup(props, { attrs, slots }) {
     const visited = ref(props.forceRender);

components/tabs/src/Tabs.tsx

@@ -25,6 +25,8 @@ import { useProvideTabs } from './TabContext';
 import type { Key } from '../../_util/type';
 import pick from 'lodash-es/pick';
 import PropTypes from '../../_util/vue-types';
+import type { MouseEventHandler } from '../../_util/EventInterface';
+import omit from '../../_util/omit';
 
 export type TabsType = 'line' | 'card' | 'editable-card';
 export type TabsPosition = 'top' | 'right' | 'bottom' | 'left';
@@ -61,11 +63,11 @@ export const tabsProps = () => {
       type: Function as PropType<(activeKey: Key, e: KeyboardEvent | MouseEvent) => void>,
     },
     onTabScroll: { type: Function as PropType<OnTabScroll> },
-
+    'onUpdate:activeKey': { type: Function as PropType<(activeKey: Key) => void> },
     // Accessibility
     locale: { type: Object as PropType<TabsLocale>, default: undefined as TabsLocale },
-    onPrevClick: Function,
+    onPrevClick: Function as PropType<MouseEventHandler>,
-    onNextClick: Function,
+    onNextClick: Function as PropType<MouseEventHandler>,
     tabBarExtraContent: PropTypes.any,
   };
 };
@@ -133,7 +135,7 @@ const InternalTabs = defineComponent({
     'removeIcon',
     'renderTabBar',
   ],
-  emits: ['tabClick', 'tabScroll', 'change', 'update:activeKey'],
+  // emits: ['tabClick', 'tabScroll', 'change', 'update:activeKey'],
   setup(props, { attrs, slots }) {
     devWarning(
       !(props.onPrevClick !== undefined) && !(props.onNextClick !== undefined),
@@ -343,7 +345,7 @@ export default defineComponent({
     'removeIcon',
     'renderTabBar',
   ],
-  emits: ['tabClick', 'tabScroll', 'change', 'update:activeKey'],
+  // emits: ['tabClick', 'tabScroll', 'change', 'update:activeKey'],
   setup(props, { attrs, slots, emit }) {
     const handleChange = (key: string) => {
       emit('update:activeKey', key);
@@ -352,7 +354,13 @@ export default defineComponent({
     return () => {
       const tabs = parseTabList(flattenChildren(slots.default?.()));
       return (
-        <InternalTabs {...props} {...attrs} onChange={handleChange} tabs={tabs} v-slots={slots} />
+        <InternalTabs
+          {...omit(props, ['onUpdate:activeKey'])}
+          {...attrs}
+          onChange={handleChange}
+          tabs={tabs}
+          v-slots={slots}
+        />
       );
     };
   },

components/tag/CheckableTag.tsx

@@ -1,21 +1,25 @@
-import type { PropType } from 'vue';
+import type { ExtractPropTypes, PropType } from 'vue';
 import { defineComponent, computed } from 'vue';
 import classNames from '../_util/classNames';
 import useConfigInject from '../_util/hooks/useConfigInject';
 
+const checkableTagProps = () => ({
+  prefixCls: String,
+  checked: { type: Boolean, default: undefined },
+  onChange: {
+    type: Function as PropType<(checked: boolean) => void>,
+  },
+  onClick: {
+    type: Function as PropType<(e: MouseEvent) => void>,
+  },
+  'onUpdate:checked': Function as PropType<(checked: boolean) => void>,
+});
+export type CheckableTagProps = Partial<ExtractPropTypes<ReturnType<typeof checkableTagProps>>>;
+
 const CheckableTag = defineComponent({
   name: 'ACheckableTag',
-  props: {
+  props: checkableTagProps(),
-    prefixCls: String,
+  // emits: ['update:checked', 'change', 'click'],
-    checked: { type: Boolean, default: undefined },
-    onChange: {
-      type: Function as PropType<(checked: boolean) => void>,
-    },
-    onClick: {
-      type: Function as PropType<(e: MouseEvent) => void>,
-    },
-  },
-  emits: ['update:checked', 'change', 'click'],
   setup(props, { slots, emit }) {
     const { prefixCls } = useConfigInject('tag', props);
     const handleClick = (e: MouseEvent) => {

components/tag/index.tsx

@@ -13,7 +13,7 @@ import useConfigInject from '../_util/hooks/useConfigInject';
 const PresetColorRegex = new RegExp(`^(${PresetColorTypes.join('|')})(-inverse)?$`);
 const PresetStatusColorRegex = new RegExp(`^(${PresetStatusColorTypes.join('|')})$`);
 
-export const tagProps = {
+export const tagProps = () => ({
   prefixCls: String,
   color: {
     type: String as PropType<LiteralUnion<PresetColorType | PresetStatusColorType, string>>,
@@ -24,15 +24,16 @@ export const tagProps = {
   onClose: {
     type: Function as PropType<(e: MouseEvent) => void>,
   },
+  'onUpdate:visible': Function as PropType<(vis: boolean) => void>,
   icon: PropTypes.any,
-};
+});
 
-export type TagProps = HTMLAttributes & Partial<ExtractPropTypes<typeof tagProps>>;
+export type TagProps = HTMLAttributes & Partial<ExtractPropTypes<ReturnType<typeof tagProps>>>;
 
 const Tag = defineComponent({
   name: 'ATag',
-  props: tagProps,
+  props: tagProps(),
-  emits: ['update:visible', 'close'],
+  // emits: ['update:visible', 'close'],
   slots: ['closeIcon', 'icon'],
   setup(props: TagProps, { slots, emit, attrs }) {
     const { prefixCls, direction } = useConfigInject('tag', props);

components/time-picker/time-picker.tsx

@@ -19,7 +19,7 @@ export interface TimePickerLocale {
   rangePlaceholder?: [string, string];
 }
 
-export const timePickerProps = {
+export const timePickerProps = () => ({
   format: String,
   showNow: { type: Boolean, default: undefined },
   showHour: { type: Boolean, default: undefined },
@@ -31,7 +31,7 @@ export const timePickerProps = {
   secondStep: Number,
   hideDisabledOptions: { type: Boolean, default: undefined },
   popupClassName: String,
-};
+});
 
 export interface CommonTimePickerProps {
   format?: string;
@@ -64,7 +64,7 @@ function createTimePicker<
   DTimeRangePickerProps extends TimeRangePickerProps<DateType> = TimeRangePickerProps<DateType>,
 >(generateConfig: GenerateConfig<DateType>) {
   const DatePicker = generatePicker<DateType>(generateConfig, {
-    ...timePickerProps,
+    ...timePickerProps(),
     order: { type: Boolean, default: true },
   });
 
@@ -75,7 +75,7 @@ function createTimePicker<
     props: {
       ...commonProps<DateType>(),
       ...datePickerProps<DateType>(),
-      ...timePickerProps,
+      ...timePickerProps(),
       addon: { type: Function },
     } as any,
     slot: ['addon', 'renderExtraFooter', 'suffixIcon', 'clearIcon'],
@@ -145,7 +145,7 @@ function createTimePicker<
     props: {
       ...commonProps<DateType>(),
       ...rangePickerProps<DateType>(),
-      ...timePickerProps,
+      ...timePickerProps(),
       order: { type: Boolean, default: true },
     } as any,
     slot: ['renderExtraFooter', 'suffixIcon', 'clearIcon'],

components/tooltip/Tooltip.tsx

@@ -7,7 +7,7 @@ import { PresetColorTypes } from '../_util/colors';
 import warning from '../_util/warning';
 import { getStyle, filterEmpty, isValidElement, initDefaultProps } from '../_util/props-util';
 import { cloneElement } from '../_util/vnode';
-import type { triggerTypes, placementTypes } from './abstractTooltipProps';
+export type { TriggerType, TooltipPlacement } from './abstractTooltipProps';
 import abstractTooltipProps from './abstractTooltipProps';
 import useConfigInject from '../_util/hooks/useConfigInject';
 import getPlacements from './placements';
@@ -15,8 +15,6 @@ import firstNotUndefined from '../_util/firstNotUndefined';
 import raf from '../_util/raf';
 export type { AdjustOverflow, PlacementsConfig } from './placements';
 
-export type TooltipPlacement = typeof placementTypes[number];
-
 // https://github.com/react-component/tooltip
 // https://github.com/yiminghe/dom-align
 export interface TooltipAlignConfig {
@@ -48,20 +46,16 @@ export const tooltipProps = () => ({
   title: PropTypes.any,
 });
 
-export const tooltipDefaultProps = {
+export const tooltipDefaultProps = () => ({
   trigger: 'hover',
   transitionName: 'zoom-big-fast',
-  align: () => ({}),
+  align: {},
   placement: 'top',
   mouseEnterDelay: 0.1,
   mouseLeaveDelay: 0.1,
   arrowPointAtCenter: false,
   autoAdjustOverflow: true,
-};
+});
-
-export type TriggerTypes = typeof triggerTypes[number];
-
-export type PlacementTypes = typeof placementTypes[number];
 
 export type TooltipProps = Partial<ExtractPropTypes<ReturnType<typeof tooltipProps>>>;
 
@@ -71,7 +65,7 @@ export default defineComponent({
   props: initDefaultProps(tooltipProps(), {
     trigger: 'hover',
     transitionName: 'zoom-big-fast',
-    align: () => ({}),
+    align: {},
     placement: 'top',
     mouseEnterDelay: 0.1,
     mouseLeaveDelay: 0.1,
@@ -79,7 +73,7 @@ export default defineComponent({
     autoAdjustOverflow: true,
   }),
   slots: ['title'],
-  emits: ['update:visible', 'visibleChange'],
+  // emits: ['update:visible', 'visibleChange'],
   setup(props, { slots, emit, attrs, expose }) {
     const { prefixCls, getTargetContainer } = useConfigInject('tooltip', props);
 

components/tooltip/abstractTooltipProps.ts

@@ -1,31 +1,27 @@
-import PropTypes from '../_util/vue-types';
-import { tuple } from '../_util/type';
 import type { CSSProperties, PropType } from 'vue';
-export const triggerTypes = tuple('hover', 'focus', 'click', 'contextmenu');
+import type { AlignType, BuildInPlacements } from '../vc-trigger/interface';
+import type { AdjustOverflow } from './placements';
+export type TriggerType = 'hover' | 'focus' | 'click' | 'contextmenu';
 
-export const placementTypes = tuple(
+export type TooltipPlacement =
-  'top',
+  | 'top'
-  'left',
+  | 'left'
-  'right',
+  | 'right'
-  'bottom',
+  | 'bottom'
-  'topLeft',
+  | 'topLeft'
-  'topRight',
+  | 'topRight'
-  'bottomLeft',
+  | 'bottomLeft'
-  'bottomRight',
+  | 'bottomRight'
-  'leftTop',
+  | 'leftTop'
-  'leftBottom',
+  | 'leftBottom'
-  'rightTop',
+  | 'rightTop'
-  'rightBottom',
+  | 'rightBottom';
-);
 
 export default () => ({
-  trigger: PropTypes.oneOfType([
+  trigger: [String, Array] as PropType<TriggerType | TriggerType[]>,
-    PropTypes.oneOf(triggerTypes),
-    PropTypes.arrayOf(PropTypes.oneOf(triggerTypes)),
-  ]),
   visible: { type: Boolean, default: undefined },
   defaultVisible: { type: Boolean, default: undefined },
-  placement: PropTypes.oneOf(placementTypes),
+  placement: String as PropType<TooltipPlacement>,
   color: String,
   transitionName: String,
   overlayStyle: { type: Object as PropType<CSSProperties>, default: undefined as CSSProperties },
@@ -34,13 +30,22 @@ export default () => ({
   prefixCls: String,
   mouseEnterDelay: Number,
   mouseLeaveDelay: Number,
-  getPopupContainer: Function,
+  getPopupContainer: Function as PropType<(triggerNode: HTMLElement) => HTMLElement>,
   arrowPointAtCenter: { type: Boolean, default: undefined },
-  autoAdjustOverflow: PropTypes.oneOfType([PropTypes.looseBool, PropTypes.object]),
+  autoAdjustOverflow: {
+    type: [Boolean, Object] as PropType<boolean | AdjustOverflow>,
+    default: undefined as boolean | AdjustOverflow,
+  },
   destroyTooltipOnHide: { type: Boolean, default: undefined },
-  align: PropTypes.object,
+  align: {
-  builtinPlacements: PropTypes.object,
+    type: Object as PropType<AlignType>,
-  children: PropTypes.array,
+    default: undefined as AlignType,
-  onVisibleChange: Function,
+  },
-  'onUpdate:visible': Function,
+  builtinPlacements: {
+    type: Object as PropType<BuildInPlacements>,
+    default: undefined as BuildInPlacements,
+  },
+  children: Array,
+  onVisibleChange: Function as PropType<(vis: boolean) => void>,
+  'onUpdate:visible': Function as PropType<(vis: boolean) => void>,
 });

components/tooltip/index.ts

@@ -6,7 +6,7 @@ export type {
   AdjustOverflow,
   PlacementsConfig,
   TooltipAlignConfig,
-  PlacementTypes,
+  TooltipPlacement,
 } from './Tooltip';
 
 export { tooltipProps };

components/transfer/index.tsx

@@ -64,7 +64,7 @@ export interface TransferLocale {
   removeCurrent: string;
 }
 
-export const transferProps = {
+export const transferProps = () => ({
   id: String,
   prefixCls: String,
   dataSource: { type: Array as PropType<TransferItem[]>, default: [] },
@@ -90,14 +90,24 @@ export const transferProps = {
   children: { type: Function as PropType<(props: TransferListBodyProps) => VueNode> },
   oneWay: { type: Boolean, default: undefined },
   pagination: { type: [Object, Boolean] as PropType<PaginationType>, default: undefined },
-};
+  onChange: Function as PropType<
+    (targetKeys: string[], direction: TransferDirection, moveKeys: string[]) => void
+  >,
+  onSelectChange: Function as PropType<
+    (sourceSelectedKeys: string[], targetSelectedKeys: string[]) => void
+  >,
+  onSearch: Function as PropType<(direction: TransferDirection, value: string) => void>,
+  onScroll: Function as PropType<(direction: TransferDirection, e: UIEvent) => void>,
+  'onUpdate:targetKeys': Function as PropType<(keys: string[]) => void>,
+  'onUpdate:selectedKeys': Function as PropType<(keys: string[]) => void>,
+});
 
-export type TransferProps = Partial<ExtractPropTypes<typeof transferProps>>;
+export type TransferProps = Partial<ExtractPropTypes<ReturnType<typeof transferProps>>>;
 
 const Transfer = defineComponent({
   name: 'ATransfer',
   inheritAttrs: false,
-  props: transferProps,
+  props: transferProps(),
   slots: [
     'leftTitle',
     'rightTitle',
@@ -108,7 +118,7 @@ const Transfer = defineComponent({
     'rightSelectAllLabel',
     'footer',
   ],
-  emits: ['update:targetKeys', 'update:selectedKeys', 'change', 'search', 'scroll', 'selectChange'],
+  // emits: ['update:targetKeys', 'update:selectedKeys', 'change', 'search', 'scroll', 'selectChange'],
   setup(props, { emit, attrs, slots, expose }) {
     const { configProvider, prefixCls, direction } = useConfigInject('transfer', props);
     const sourceSelectedKeys = ref([]);
@@ -249,14 +259,14 @@ const Transfer = defineComponent({
       emit('change', newTargetKeys, 'left', [...targetedKeys]);
     };
 
-    const handleScroll = (direction: TransferDirection, e: Event) => {
+    const handleScroll = (direction: TransferDirection, e: UIEvent) => {
       emit('scroll', direction, e);
     };
 
-    const handleLeftScroll = (e: Event) => {
+    const handleLeftScroll = (e: UIEvent) => {
       handleScroll('left', e);
     };
-    const handleRightScroll = (e: Event) => {
+    const handleRightScroll = (e: UIEvent) => {
       handleScroll('right', e);
     };
     const handleListStyle = (

components/transfer/list.tsx

@@ -65,7 +65,7 @@ export default defineComponent({
   name: 'TransferList',
   inheritAttrs: false,
   props: transferListProps,
-  emits: ['scroll', 'itemSelectAll', 'itemRemove', 'itemSelect'],
+  // emits: ['scroll', 'itemSelectAll', 'itemRemove', 'itemSelect'],
   slots: ['footer', 'titleText'],
   setup(props, { attrs, slots }) {
     const filterValue = ref('');

components/tree/DirectoryTree.tsx

@@ -21,12 +21,12 @@ import { filterEmpty } from '../_util/props-util';
 
 export type ExpandAction = false | 'click' | 'doubleclick' | 'dblclick';
 
-export const directoryTreeProps = {
+export const directoryTreeProps = () => ({
   ...treeProps(),
   expandAction: { type: [Boolean, String] as PropType<ExpandAction> },
-};
+});
 
-export type DirectoryTreeProps = Partial<ExtractPropTypes<typeof directoryTreeProps>>;
+export type DirectoryTreeProps = Partial<ExtractPropTypes<ReturnType<typeof directoryTreeProps>>>;
 
 function getIcon(props: AntdTreeNodeAttribute) {
   const { isLeaf, expanded } = props;
@@ -39,22 +39,22 @@ function getIcon(props: AntdTreeNodeAttribute) {
 export default defineComponent({
   name: 'ADirectoryTree',
   inheritAttrs: false,
-  props: initDefaultProps(directoryTreeProps, {
+  props: initDefaultProps(directoryTreeProps(), {
     showIcon: true,
     expandAction: 'click',
   }),
   slots: ['icon', 'title', 'switcherIcon', 'titleRender'],
-  emits: [
+  // emits: [
-    'update:selectedKeys',
+  //   'update:selectedKeys',
-    'update:checkedKeys',
+  //   'update:checkedKeys',
-    'update:expandedKeys',
+  //   'update:expandedKeys',
-    'expand',
+  //   'expand',
-    'select',
+  //   'select',
-    'check',
+  //   'check',
-    'doubleclick',
+  //   'doubleclick',
-    'dblclick',
+  //   'dblclick',
-    'click',
+  //   'click',
-  ],
+  // ],
   setup(props, { attrs, slots, emit, expose }) {
     // convertTreeToData 兼容 a-tree-node 历史写法，未来a-tree-node移除后，删除相关代码，不要再render中调用 treeData，否则死循环
     const treeData = ref<DataNode[]>(

components/tree/Tree.tsx

@@ -13,6 +13,7 @@ import renderSwitcherIcon from './utils/iconUtil';
 import dropIndicatorRender from './utils/dropIndicator';
 import devWarning from '../vc-util/devWarning';
 import { warning } from '../vc-util/warning';
+import omit from '../_util/omit';
 
 export interface AntdTreeNodeAttribute {
   eventKey: string;
@@ -79,8 +80,9 @@ export interface AntTreeNodeDropEvent {
 }
 
 export const treeProps = () => {
+  const baseTreeProps = vcTreeProps();
   return {
-    ...vcTreeProps(),
+    ...baseTreeProps,
     showLine: {
       type: [Boolean, Object] as PropType<boolean | { showLeafIcon: boolean }>,
       default: undefined,
@@ -129,6 +131,10 @@ export const treeProps = () => {
     replaceFields: { type: Object as PropType<FieldNames> },
     blockNode: { type: Boolean, default: undefined },
     openAnimation: PropTypes.any,
+    onDoubleclick: baseTreeProps.onDblclick,
+    'onUpdate:selectedKeys': Function as PropType<(keys: Key[]) => void>,
+    'onUpdate:checkedKeys': Function as PropType<(keys: Key[]) => void>,
+    'onUpdate:expandedKeys': Function as PropType<(keys: Key[]) => void>,
   };
 };
 
@@ -144,16 +150,16 @@ export default defineComponent({
     blockNode: false,
   }),
   slots: ['icon', 'title', 'switcherIcon', 'titleRender'],
-  emits: [
+  // emits: [
-    'update:selectedKeys',
+  //   'update:selectedKeys',
-    'update:checkedKeys',
+  //   'update:checkedKeys',
-    'update:expandedKeys',
+  //   'update:expandedKeys',
-    'expand',
+  //   'expand',
-    'select',
+  //   'select',
-    'check',
+  //   'check',
-    'doubleclick',
+  //   'doubleclick',
-    'dblclick',
+  //   'dblclick',
-  ],
+  // ],
   setup(props, { attrs, expose, emit, slots }) {
     warning(
       !(props.treeData === undefined && slots.default),
@@ -206,10 +212,17 @@ export default defineComponent({
         fieldNames = props.replaceFields,
         motion = props.openAnimation,
         itemHeight = 28,
+        onDoubleclick,
+        onDblclick,
       } = props as TreeProps;
       const newProps = {
         ...attrs,
-        ...props,
+        ...omit(props, [
+          'onUpdate:checkedKeys',
+          'onUpdate:expandedKeys',
+          'onUpdate:selectedKeys',
+          'onDoubleclick',
+        ]),
         showLine: Boolean(showLine),
         dropIndicatorRender,
         fieldNames,
@@ -242,6 +255,7 @@ export default defineComponent({
           onCheck={handleCheck}
           onExpand={handleExpand}
           onSelect={handleSelect}
+          onDblclick={onDblclick || onDoubleclick}
           v-slots={{
             ...slots,
             checkable: () => <span class={`${prefixCls.value}-checkbox-inner`} />,

components/typography/Base.tsx

@@ -5,7 +5,6 @@ import raf from '../_util/raf';
 import { isStyleSupport } from '../_util/styleChecker';
 import Editable from './Editable';
 import measure from './util';
-import PropTypes from '../_util/vue-types';
 import type { TypographyProps } from './Typography';
 import Typography from './Typography';
 import ResizeObserver from '../vc-resize-observer';
@@ -14,7 +13,7 @@ import copy from '../_util/copy-to-clipboard';
 import CheckOutlined from '@ant-design/icons-vue/CheckOutlined';
 import CopyOutlined from '@ant-design/icons-vue/CopyOutlined';
 import EditOutlined from '@ant-design/icons-vue/EditOutlined';
-import type { VNodeTypes, CSSProperties } from 'vue';
+import type { VNodeTypes, CSSProperties, PropType, HTMLAttributes } from 'vue';
 import {
   defineComponent,
   reactive,
@@ -95,10 +94,38 @@ interface InternalBlockProps extends BlockProps {
 
 const ELLIPSIS_STR = '...';
 
-const Base = defineComponent<InternalBlockProps>({
+export const baseProps = () => ({
+  editable: {
+    type: [Boolean, Object] as PropType<InternalBlockProps['editable']>,
+    default: undefined as InternalBlockProps['editable'],
+  },
+  copyable: {
+    type: [Boolean, Object] as PropType<InternalBlockProps['copyable']>,
+    default: undefined as InternalBlockProps['copyable'],
+  },
+  prefixCls: String,
+  component: String,
+  type: String as PropType<BaseType>,
+  disabled: { type: Boolean, default: undefined },
+  ellipsis: {
+    type: [Boolean, Object] as PropType<InternalBlockProps['ellipsis']>,
+    default: undefined as InternalBlockProps['ellipsis'],
+  },
+  code: { type: Boolean, default: undefined },
+  mark: { type: Boolean, default: undefined },
+  underline: { type: Boolean, default: undefined },
+  delete: { type: Boolean, default: undefined },
+  strong: { type: Boolean, default: undefined },
+  keyboard: { type: Boolean, default: undefined },
+  content: String,
+  'onUpdate:content': Function as PropType<(content: string) => void>,
+});
+
+const Base = defineComponent({
   name: 'Base',
   inheritAttrs: false,
-  emits: ['update:content'],
+  props: baseProps(),
+  // emits: ['update:content'],
   setup(props, { slots, attrs, emit }) {
     const { prefixCls, direction } = useConfigInject('typography', props);
 
@@ -466,7 +493,7 @@ const Base = defineComponent<InternalBlockProps>({
               ...restProps
             } = {
               ...props,
-              ...attrs,
+              ...(attrs as HTMLAttributes),
             };
             const { rows, suffix, tooltip } = ellipsis.value;
 
@@ -488,6 +515,7 @@ const Base = defineComponent<InternalBlockProps>({
               'underline',
               'strong',
               'keyboard',
+              'onUpdate:content',
             ]);
 
             const cssEllipsis = canUseCSSEllipsis.value;
@@ -574,22 +602,4 @@ const Base = defineComponent<InternalBlockProps>({
   },
 });
 
-export const baseProps = () => ({
-  editable: PropTypes.oneOfType([PropTypes.looseBool, PropTypes.object]),
-  copyable: PropTypes.oneOfType([PropTypes.looseBool, PropTypes.object]),
-  prefixCls: String,
-  component: String,
-  type: PropTypes.oneOf(['secondary', 'success', 'danger', 'warning']),
-  disabled: { type: Boolean, default: undefined },
-  ellipsis: PropTypes.oneOfType([PropTypes.looseBool, PropTypes.object]),
-  code: { type: Boolean, default: undefined },
-  mark: { type: Boolean, default: undefined },
-  underline: { type: Boolean, default: undefined },
-  delete: { type: Boolean, default: undefined },
-  strong: { type: Boolean, default: undefined },
-  keyboard: { type: Boolean, default: undefined },
-  content: String,
-});
-
-Base.props = baseProps();
 export default Base;

components/typography/Editable.tsx

@@ -1,26 +1,29 @@
 import KeyCode from '../_util/KeyCode';
-import PropTypes from '../_util/vue-types';
 import TextArea from '../input/TextArea';
 import EnterOutlined from '@ant-design/icons-vue/EnterOutlined';
-import type { PropType } from 'vue';
+import type { ExtractPropTypes, PropType } from 'vue';
 import { defineComponent, ref, reactive, watch, onMounted, computed } from 'vue';
 import type { Direction } from '../config-provider';
+import type { ChangeEventHandler } from '../_util/EventInterface';
+import type { AutoSizeType } from '../input/inputProps';
 
+const editableProps = () => ({
+  prefixCls: String,
+  value: String,
+  maxlength: Number,
+  autoSize: { type: [Boolean, Object] as PropType<boolean | AutoSizeType> },
+  onSave: Function as PropType<(val: string) => void>,
+  onCancel: Function as PropType<() => void>,
+  onEnd: Function as PropType<() => void>,
+  onChange: Function as PropType<(val: string) => void>,
+  originContent: String,
+  direction: String as PropType<Direction>,
+});
+export type EditableProps = Partial<ExtractPropTypes<ReturnType<typeof editableProps>>>;
 const Editable = defineComponent({
   name: 'Editable',
-  props: {
+  props: editableProps(),
-    prefixCls: String,
+  // emits: ['save', 'cancel', 'end', 'change'],
-    value: String,
-    maxlength: Number,
-    autoSize: PropTypes.oneOfType([PropTypes.looseBool, PropTypes.object]),
-    onSave: Function,
-    onCancel: Function,
-    onEnd: Function,
-    onChange: Function,
-    originContent: String,
-    direction: String as PropType<Direction>,
-  },
-  emits: ['save', 'cancel', 'end', 'change'],
   setup(props, { emit, slots }) {
     const state = reactive({
       current: props.value || '',
@@ -116,7 +119,7 @@ const Editable = defineComponent({
           ref={saveTextAreaRef}
           maxlength={props.maxlength}
           value={state.current}
-          onChange={onChange}
+          onChange={onChange as ChangeEventHandler}
           onKeydown={onKeyDown}
           onKeyup={onKeyUp}
           onCompositionstart={onCompositionStart}

components/typography/Link.tsx

@@ -1,13 +1,13 @@
-import type { AnchorHTMLAttributes, FunctionalComponent } from 'vue';
+import type { AnchorHTMLAttributes, ExtractPropTypes, FunctionalComponent } from 'vue';
 import warning from '../_util/warning';
-import type { BlockProps } from './Base';
 import Base, { baseProps } from './Base';
-import PropTypes from '../_util/vue-types';
 import omit from '../_util/omit';
 
-export interface LinkProps extends BlockProps, Omit<AnchorHTMLAttributes, 'type'> {
+export const linkProps = () =>
-  ellipsis?: boolean;
+  omit({ ...baseProps(), ellipsis: { type: Boolean, default: undefined } }, ['component']);
-}
+
+export type LinkProps = Partial<ExtractPropTypes<ReturnType<typeof linkProps>>> &
+  AnchorHTMLAttributes;
 
 const Link: FunctionalComponent<LinkProps> = (props, { slots, attrs }) => {
   const { ellipsis, rel, ...restProps } = { ...props, ...attrs };
@@ -31,6 +31,6 @@ const Link: FunctionalComponent<LinkProps> = (props, { slots, attrs }) => {
 
 Link.displayName = 'ATypographyLink';
 Link.inheritAttrs = false;
-Link.props = omit({ ...baseProps(), ellipsis: PropTypes.looseBool }, ['component']) as any;
+Link.props = linkProps();
 
 export default Link;

components/typography/Paragraph.tsx

@@ -1,9 +1,12 @@
-import type { FunctionalComponent } from 'vue';
+import type { ExtractPropTypes, FunctionalComponent } from 'vue';
 import omit from '../_util/omit';
-import type { BlockProps } from './Base';
 import Base, { baseProps } from './Base';
 
-const Paragraph: FunctionalComponent<BlockProps> = (props, { slots, attrs }) => {
+export const paragraphProps = () => omit(baseProps(), ['component']);
+
+export type ParagraphProps = Partial<ExtractPropTypes<ReturnType<typeof paragraphProps>>>;
+
+const Paragraph: FunctionalComponent<ParagraphProps> = (props, { slots, attrs }) => {
   const paragraphProps = {
     ...props,
     component: 'div',
@@ -15,6 +18,6 @@ const Paragraph: FunctionalComponent<BlockProps> = (props, { slots, attrs }) =>
 
 Paragraph.displayName = 'ATypographyParagraph';
 Paragraph.inheritAttrs = false;
-Paragraph.props = omit(baseProps(), ['component']) as any;
+Paragraph.props = paragraphProps();
 
 export default Paragraph;

components/typography/Text.tsx

@@ -1,12 +1,20 @@
-import type { FunctionalComponent } from 'vue';
+import type { ExtractPropTypes, FunctionalComponent, PropType } from 'vue';
 import omit from '../_util/omit';
 import warning from '../_util/warning';
-import type { BlockProps, EllipsisConfig } from './Base';
+import type { EllipsisConfig } from './Base';
 import Base, { baseProps } from './Base';
 
-export interface TextProps extends BlockProps {
+export const textProps = () => ({
-  ellipsis?: boolean | Omit<EllipsisConfig, 'expandable' | 'rows' | 'onExpand'>;
+  ...omit(baseProps(), ['component']),
-}
+  ellipsis: {
+    type: [Boolean, Object] as PropType<
+      boolean | Omit<EllipsisConfig, 'expandable' | 'rows' | 'onExpand'>
+    >,
+    default: undefined as boolean | Omit<EllipsisConfig, 'expandable' | 'rows' | 'onExpand'>,
+  },
+});
+
+export type TextProps = Partial<ExtractPropTypes<ReturnType<typeof textProps>>>;
 
 const Text: FunctionalComponent<TextProps> = (props, { slots, attrs }) => {
   const { ellipsis } = props;
@@ -31,6 +39,6 @@ const Text: FunctionalComponent<TextProps> = (props, { slots, attrs }) => {
 
 Text.displayName = 'ATypographyText';
 Text.inheritAttrs = false;
-Text.props = omit(baseProps(), ['component']) as any;
+Text.props = textProps();
 
 export default Text;

components/typography/Title.tsx

@@ -1,14 +1,17 @@
-import type { FunctionalComponent } from 'vue';
+import type { ExtractPropTypes, FunctionalComponent, PropType } from 'vue';
 import omit from '../_util/omit';
 import { tupleNum } from '../_util/type';
-import PropTypes from '../_util/vue-types';
 import warning from '../_util/warning';
-import type { BlockProps } from './Base';
 import Base, { baseProps } from './Base';
 
 const TITLE_ELE_LIST = tupleNum(1, 2, 3, 4, 5);
 
-export type TitleProps = Omit<BlockProps & { level?: typeof TITLE_ELE_LIST[number] }, 'strong'>;
+export const titleProps = () => ({
+  ...omit(baseProps(), ['component', 'strong']),
+  level: Number as PropType<typeof TITLE_ELE_LIST[number]>,
+});
+
+export type TitleProps = Partial<ExtractPropTypes<ReturnType<typeof titleProps>>>;
 
 const Title: FunctionalComponent<TitleProps> = (props, { slots, attrs }) => {
   const { level = 1, ...restProps } = props;
@@ -31,6 +34,6 @@ const Title: FunctionalComponent<TitleProps> = (props, { slots, attrs }) => {
 
 Title.displayName = 'ATypographyTitle';
 Title.inheritAttrs = false;
-Title.props = omit({ ...baseProps(), level: PropTypes.number }, ['component', 'strong']) as any;
+Title.props = titleProps();
 
 export default Title;

components/typography/Typography.tsx

@@ -1,4 +1,4 @@
-import type { HTMLAttributes } from 'vue';
+import type { HTMLAttributes, PropType } from 'vue';
 import { defineComponent } from 'vue';
 import useConfigInject from '../_util/hooks/useConfigInject';
 import classNames from '../_util/classNames';
@@ -12,10 +12,16 @@ export interface TypographyProps extends HTMLAttributes {
 export interface InternalTypographyProps extends TypographyProps {
   component?: string;
 }
-
+export const typographyProps = () => ({
+  prefixCls: String,
+  direction: String as PropType<Direction>,
+  // Form Internal use
+  component: String,
+});
 const Typography = defineComponent<InternalTypographyProps>({
   name: 'ATypography',
   inheritAttrs: false,
+  props: typographyProps() as any,
   setup(props, { slots, attrs }) {
     const { prefixCls, direction } = useConfigInject('typography', props);
     return () => {
@@ -42,9 +48,4 @@ const Typography = defineComponent<InternalTypographyProps>({
   },
 });
 
-Typography.props = {
-  prefixCls: String,
-  component: String,
-};
-
 export default Typography;

components/vc-dialog/Dialog.tsx

@@ -70,7 +70,7 @@ export default defineComponent({
       }
     };
 
-    const onInternalClose = (e: Event) => {
+    const onInternalClose = (e: MouseEvent | KeyboardEvent) => {
       props.onClose?.(e);
     };
 

components/vc-dialog/IDialogPropTypes.ts

@@ -1,5 +1,4 @@
 import type { CSSProperties, ExtractPropTypes, PropType } from 'vue';
-import type { MouseEventHandler } from '../_util/EventInterface';
 import PropTypes from '../_util/vue-types';
 
 function dialogPropTypes() {
@@ -37,11 +36,11 @@ function dialogPropTypes() {
     dialogClass: String,
     closeIcon: PropTypes.any,
     forceRender: { type: Boolean, default: undefined },
-    getOpenCount: Function,
+    getOpenCount: Function as PropType<() => number>,
     // https://github.com/ant-design/ant-design/issues/19771
     // https://github.com/react-component/dialog/issues/95
     focusTriggerAfterClose: { type: Boolean, default: undefined },
-    onClose: Function as PropType<MouseEventHandler>,
+    onClose: Function as PropType<(e: MouseEvent | KeyboardEvent) => void>,
     modalRender: Function,
   };
 }

components/vc-drawer/src/IDrawerPropTypes.ts

@@ -48,7 +48,7 @@ const drawerProps = () => ({
 const drawerChildProps = () => ({
   ...props(),
   getContainer: Function,
-  getOpenCount: Function,
+  getOpenCount: Function as PropType<() => number>,
   scrollLocker: PropTypes.any,
   switchScrollingEffect: Function,
 });

components/vc-select/SelectTrigger.tsx

@@ -1,7 +1,7 @@
 import Trigger from '../vc-trigger';
 import PropTypes from '../_util/vue-types';
 import classNames from '../_util/classNames';
-import type { CSSProperties } from 'vue';
+import type { CSSProperties, PropType } from 'vue';
 import { computed, ref, defineComponent } from 'vue';
 import type { VueNode } from '../_util/type';
 import type { DropdownRender, Placement, RenderDOMFunc } from './BaseSelect';
@@ -102,7 +102,7 @@ const SelectTrigger = defineComponent<SelectTriggerProps, { popupRef: any }>({
     popupElement: PropTypes.any,
     direction: String,
     getTriggerDOMNode: Function,
-    onPopupVisibleChange: Function,
+    onPopupVisibleChange: Function as PropType<(open: boolean) => void>,
     onPopupMouseEnter: Function,
   } as any,
   setup(props, { slots, attrs, expose }) {

components/vc-select/TransBtn.tsx

@@ -1,4 +1,5 @@
-import type { FunctionalComponent } from 'vue';
+import type { FunctionalComponent, PropType } from 'vue';
+import type { MouseEventHandler } from '../_util/EventInterface';
 import type { VueNode } from '../_util/type';
 import PropTypes from '../_util/vue-types';
 import type { RenderNode } from './BaseSelect';
@@ -59,8 +60,8 @@ TransBtn.props = {
   class: String,
   customizeIcon: PropTypes.any,
   customizeIconProps: PropTypes.any,
-  onMousedown: Function,
+  onMousedown: Function as PropType<MouseEventHandler>,
-  onClick: Function,
+  onClick: Function as PropType<MouseEventHandler>,
 };
 
 export default TransBtn;

components/vc-tooltip/src/Tooltip.tsx

@@ -121,7 +121,7 @@ export default defineComponent({
         mouseEnterDelay,
         ...extraProps,
         ...attrs,
-        onPopupVisibleChange: props.onVisibleChange || noop,
+        onPopupVisibleChange: props.onVisibleChange || (noop as any),
         onPopupAlign: props.onPopupAlign || noop,
         ref: triggerDOM,
         popup: getPopupElement(),

components/vc-trigger/Trigger.tsx

@@ -53,7 +53,7 @@ export default defineComponent({
     showAction: PropTypes.any.def([]),
     hideAction: PropTypes.any.def([]),
     getPopupClassNameFromAlign: PropTypes.any.def(returnEmptyString),
-    onPopupVisibleChange: PropTypes.func.def(noop),
+    onPopupVisibleChange: Function as PropType<(open: boolean) => void>,
     afterPopupVisibleChange: PropTypes.func.def(noop),
     popup: PropTypes.any,
     popupStyle: { type: Object as PropType<CSSProperties>, default: undefined as CSSProperties },