chore: update ts type (#5408)

* feat: update prop type

* feat: update ts type

* feat: update ts type

* feat: update ts type

* feat: update ts type

* test: update snap

* feat: update ts type

Author: tangjinzhou

components/_util/EventInterface.ts

@@ -4,7 +4,6 @@ export type KeyboardEventHandler = (e: KeyboardEvent) => void;
 export type CompositionEventHandler = (e: CompositionEvent) => void;
 export type ClipboardEventHandler = (e: ClipboardEvent) => void;
 export type ChangeEventHandler = (e: ChangeEvent) => void;
-
 export type ChangeEvent = Event & {
   target: {
     value?: string | undefined;

components/_util/Portal.tsx

@@ -15,7 +15,7 @@ export default defineComponent({
   inheritAttrs: false,
   props: {
     getContainer: PropTypes.func.isRequired,
-    didUpdate: PropTypes.func,
+    didUpdate: Function,
   },
   setup(props, { slots }) {
     let isSSR = true;

components/_util/PortalWrapper.tsx

@@ -52,10 +52,10 @@ export default defineComponent({
   name: 'PortalWrapper',
   inheritAttrs: false,
   props: {
-    wrapperClassName: PropTypes.string,
-    forceRender: PropTypes.looseBool,
+    wrapperClassName: String,
+    forceRender: { type: Boolean, default: undefined },
     getContainer: PropTypes.any,
-    visible: PropTypes.looseBool,
+    visible: { type: Boolean, default: undefined },
   },
 
   setup(props, { slots }) {

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,
@@ -19,10 +18,10 @@ const TransButton = defineComponent({
   name: 'TransButton',
   inheritAttrs: false,
   props: {
-    noStyle: PropTypes.looseBool,
-    onClick: PropTypes.func,
-    disabled: PropTypes.looseBool,
-    autofocus: PropTypes.looseBool,
+    noStyle: { type: Boolean, default: undefined },
+    onClick: Function,
+    disabled: { type: Boolean, default: undefined },
+    autofocus: { type: Boolean, default: undefined },
   },
   setup(props, { slots, emit, attrs, expose }) {
     const domRef = ref();

components/affix/index.tsx

@@ -47,23 +47,22 @@ export const affixProps = () => ({
   offsetTop: Number,
   /** 距离窗口底部达到指定偏移量后触发 */
   offsetBottom: Number,
-  /** 固定状态改变时触发的回调函数 */
-  // onChange?: (affixed?: boolean) => void;
   /** 设置 Affix 需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 */
   target: {
     type: Function as PropType<() => Window | HTMLElement | null>,
     default: getDefaultTarget,
   },
   prefixCls: String,
+  /** 固定状态改变时触发的回调函数 */
   onChange: Function as PropType<AffixEmits['change']>,
   onTestUpdatePosition: Function as PropType<AffixEmits['testUpdatePosition']>,
 });
 
 export type AffixProps = Partial<ExtractPropTypes<ReturnType<typeof affixProps>>>;
 
 export type AffixEmits = {
-  change: (lastAffix: boolean) => boolean;
-  testUpdatePosition: () => boolean;
+  change: (lastAffix: boolean) => void;
+  testUpdatePosition: () => void;
 };
 
 export type AffixExpose = {

components/alert/index.tsx

@@ -18,8 +18,6 @@ import { cloneElement } from '../_util/vnode';
 import type { NodeMouseEventHandler } from '../vc-tree/contextTypes';
 import useConfigInject from '../_util/hooks/useConfigInject';
 
-function noop() {}
-
 const iconMapFilled = {
   success: CheckCircleFilled,
   info: InfoCircleFilled,
@@ -44,19 +42,19 @@ export const alertProps = () => ({
    */
   type: PropTypes.oneOf(AlertTypes),
   /** Whether Alert can be closed */
-  closable: PropTypes.looseBool,
+  closable: { type: Boolean, default: undefined },
   /** Close text to show */
   closeText: PropTypes.any,
   /** Content of Alert */
   message: PropTypes.any,
   /** Additional content of Alert */
   description: PropTypes.any,
   /** Trigger when animation ending of Alert */
-  afterClose: PropTypes.func.def(noop),
+  afterClose: Function as PropType<() => void>,
   /** Whether to show icon */
-  showIcon: PropTypes.looseBool,
-  prefixCls: PropTypes.string,
-  banner: PropTypes.looseBool,
+  showIcon: { type: Boolean, default: undefined },
+  prefixCls: String,
+  banner: { type: Boolean, default: undefined },
   icon: PropTypes.any,
   closeIcon: PropTypes.any,
   onClose: Function as PropType<NodeMouseEventHandler>,

components/anchor/AnchorLink.tsx

@@ -1,23 +1,23 @@
 import type { ExtractPropTypes } from 'vue';
 import { defineComponent, nextTick, onBeforeUnmount, onMounted, watch } from 'vue';
 import PropTypes from '../_util/vue-types';
-import { getPropsSlot } from '../_util/props-util';
+import { getPropsSlot, initDefaultProps } from '../_util/props-util';
 import classNames from '../_util/classNames';
 import useConfigInject from '../_util/hooks/useConfigInject';
 import { useInjectAnchor } from './context';
 
-export const anchorLinkProps = {
-  prefixCls: PropTypes.string,
-  href: PropTypes.string.def('#'),
+export const anchorLinkProps = () => ({
+  prefixCls: String,
+  href: String,
   title: PropTypes.any,
-  target: PropTypes.string,
-};
+  target: String,
+});
 
-export type AnchorLinkProps = Partial<ExtractPropTypes<typeof anchorLinkProps>>;
+export type AnchorLinkProps = Partial<ExtractPropTypes<ReturnType<typeof anchorLinkProps>>>;
 
 export default defineComponent({
   name: 'AAnchorLink',
-  props: anchorLinkProps,
+  props: initDefaultProps(anchorLinkProps(), { href: '#' }),
   slots: ['title'],
   setup(props, { slots }) {
     let mergedTitle = null;

components/anchor/demo/onClick.vue

@@ -28,10 +28,11 @@ Clicking on an anchor does not record history.
 
 <script lang="ts">
 import { defineComponent } from 'vue';
+import type { AnchorProps } from 'ant-design-vue';
 
 export default defineComponent({
   setup() {
-    const handleClick = (e: Event, link: string) => {
+    const handleClick: AnchorProps['onClick'] = (e, link) => {
       e.preventDefault();
       console.log(link);
     };

components/auto-complete/index.tsx

@@ -1,7 +1,6 @@
-import type { App, VNode, ExtractPropTypes } from 'vue';
+import type { App, VNode, ExtractPropTypes, CSSProperties, PropType } from 'vue';
 import { defineComponent, ref } from 'vue';
 import Select, { selectProps } from '../select';
-import PropTypes from '../_util/vue-types';
 import { isValidElement, flattenChildren } from '../_util/props-util';
 import warning from '../_util/warning';
 import Option from './Option';
@@ -13,15 +12,27 @@ function isSelectOptionOrSelectOptGroup(child: any): boolean {
   return child?.type?.isSelectOption || child?.type?.isSelectOptGroup;
 }
 
-export const autoCompleteProps = {
+export const autoCompleteProps = () => ({
   ...omit(selectProps(), ['loading', 'mode', 'optionLabelProp', 'labelInValue']),
-  dataSource: PropTypes.array,
-  dropdownMenuStyle: PropTypes.style,
-  // optionLabelProp: PropTypes.string,
+  dataSource: Array as PropType<{ value: any; text: any }[] | string[]>,
+  dropdownMenuStyle: {
+    type: Object as PropType<CSSProperties>,
+    default: undefined as CSSProperties,
+  },
+  // optionLabelProp: String,
   dropdownMatchSelectWidth: { type: [Number, Boolean], default: true },
-};
+  prefixCls: String,
+  showSearch: { type: Boolean, default: undefined },
+  transitionName: String,
+  choiceTransitionName: { type: String, default: 'zoom' },
+  autofocus: { type: Boolean, default: undefined },
+  backfill: { type: Boolean, default: undefined },
+  // optionLabelProp: PropTypes.string.def('children'),
+  filterOption: { type: [Boolean, Function], default: false },
+  defaultActiveFirstOption: { type: Boolean, default: true },
+});
 
-export type AutoCompleteProps = Partial<ExtractPropTypes<typeof autoCompleteProps>>;
+export type AutoCompleteProps = Partial<ExtractPropTypes<ReturnType<typeof autoCompleteProps>>>;
 
 export const AutoCompleteOption = Option;
 
@@ -30,19 +41,8 @@ export const AutoCompleteOptGroup = OptGroup;
 const AutoComplete = defineComponent({
   name: 'AAutoComplete',
   inheritAttrs: false,
-  props: {
-    ...autoCompleteProps,
-    prefixCls: PropTypes.string,
-    showSearch: PropTypes.looseBool,
-    transitionName: PropTypes.string,
-    choiceTransitionName: PropTypes.string.def('zoom'),
-    autofocus: PropTypes.looseBool,
-    backfill: PropTypes.looseBool,
-    // optionLabelProp: PropTypes.string.def('children'),
-    filterOption: PropTypes.oneOfType([PropTypes.looseBool, PropTypes.func]).def(false),
-    defaultActiveFirstOption: PropTypes.looseBool.def(true),
-  },
-  emits: ['change', 'select', 'focus', 'blur'],
+  props: autoCompleteProps(),
+  // emits: ['change', 'select', 'focus', 'blur'],
   slots: ['option'],
   setup(props, { slots, attrs, expose }) {
     warning(

components/avatar/Avatar.tsx

@@ -1,5 +1,5 @@
 import type { VueNode } from '../_util/type';
-import { tuple } from '../_util/type';
+
 import type { CSSProperties, ExtractPropTypes, PropType } from 'vue';
 import { computed, defineComponent, nextTick, onMounted, ref, watch } from 'vue';
 import { getPropsSlot } from '../_util/props-util';
@@ -15,19 +15,19 @@ import eagerComputed from '../_util/eagerComputed';
 export type AvatarSize = 'large' | 'small' | 'default' | number | ScreenSizeMap;
 
 export const avatarProps = () => ({
-  prefixCls: PropTypes.string,
-  shape: PropTypes.oneOf(tuple('circle', 'square')).def('circle'),
+  prefixCls: String,
+  shape: { type: String as PropType<'circle' | 'square'>, default: 'circle' },
   size: {
     type: [Number, String, Object] as PropType<AvatarSize>,
     default: (): AvatarSize => 'default',
   },
-  src: PropTypes.string,
+  src: String,
   /** Srcset of image avatar */
-  srcset: PropTypes.string,
+  srcset: String,
   icon: PropTypes.any,
-  alt: PropTypes.string,
-  gap: PropTypes.number,
-  draggable: PropTypes.bool,
+  alt: String,
+  gap: Number,
+  draggable: { type: Boolean, default: undefined },
   crossOrigin: String as PropType<'' | 'anonymous' | 'use-credentials'>,
   loadError: {
     type: Function as PropType<() => boolean>,

components/avatar/Group.tsx

@@ -4,28 +4,23 @@ import Avatar from './Avatar';
 import Popover from '../popover';
 import type { PropType, ExtractPropTypes, CSSProperties } from 'vue';
 import { defineComponent } from 'vue';
-import PropTypes from '../_util/vue-types';
 import { flattenChildren, getPropsSlot } from '../_util/props-util';
-import { tuple } from '../_util/type';
 import useConfigInject from '../_util/hooks/useConfigInject';
 import useProvideSize from '../_util/hooks/useSize';
 
 export const groupProps = () => ({
-  prefixCls: PropTypes.string,
-  maxCount: PropTypes.number,
-  maxStyle: {
-    type: Object as PropType<CSSProperties>,
-    default: () => ({} as CSSProperties),
-  },
-  maxPopoverPlacement: PropTypes.oneOf(tuple('top', 'bottom')).def('top'),
+  prefixCls: String,
+  maxCount: Number,
+  maxStyle: { type: Object as PropType<CSSProperties>, default: undefined as CSSProperties },
+  maxPopoverPlacement: { type: String as PropType<'top' | 'bottom'>, default: 'top' },
   maxPopoverTrigger: String as PropType<'hover' | 'focus' | 'click'>,
   /*
    * Size of avatar, options: `large`, `small`, `default`
    * or a custom number size
    * */
   size: {
     type: [Number, String, Object] as PropType<AvatarSize>,
-    default: (): AvatarSize => 'default',
+    default: 'default' as AvatarSize,
   },
 });
 

components/avatar/__tests__/__snapshots__/Avatar.test.js.snap

@@ -12,7 +12,7 @@ exports[`Avatar Render adjusts component size to 80 when window size is xl 1`] =
 
 exports[`Avatar Render adjusts component size to 100 when window size is xxl 1`] = `<span class="ant-avatar ant-avatar-circle" style="width: 100px; height: 100px; line-height: 100px; font-size: 18px;"><span class="ant-avatar-string" style="transform: scale(0.32) translateX(-50%);"><!----></span></span>`;
 
-exports[`Avatar Render fallback 1`] = `<span class="ant-avatar ant-avatar-circle ant-avatar-image"><img draggable="false" src="http://error.url"></span>`;
+exports[`Avatar Render fallback 1`] = `<span class="ant-avatar ant-avatar-circle ant-avatar-image"><img src="http://error.url"></span>`;
 
 exports[`Avatar Render should calculate scale of avatar children correctly 1`] = `<span class="ant-avatar-string" style="transform: scale(0.72) translateX(-50%);">Avatar</span>`;