feat: update ts type

Author: tangjinzhou

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,
@@ -52,7 +50,7 @@ export const alertProps = () => ({
   /** 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: { type: Boolean, default: undefined },
   prefixCls: String,

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 = {
+export const anchorLinkProps = () => ({
   prefixCls: String,
-  href: PropTypes.string.def('#'),
+  href: String,
   title: PropTypes.any,
   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/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,
+  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: String,
-    showSearch: { type: Boolean, default: undefined },
-    transitionName: String,
-    choiceTransitionName: PropTypes.string.def('zoom'),
-    autofocus: { type: Boolean, default: undefined },
-    backfill: { type: Boolean, default: undefined },
-    // 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';
@@ -16,7 +16,7 @@ export type AvatarSize = 'large' | 'small' | 'default' | number | ScreenSizeMap;
 
 export const avatarProps = () => ({
   prefixCls: String,
-  shape: PropTypes.oneOf(tuple('circle', 'square')).def('circle'),
+  shape: { type: String as PropType<'circle' | 'square'>, default: 'circle' },
   size: {
     type: [Number, String, Object] as PropType<AvatarSize>,
     default: (): AvatarSize => 'default',
@@ -27,7 +27,7 @@ export const avatarProps = () => ({
   icon: PropTypes.any,
   alt: String,
   gap: Number,
-  draggable: PropTypes.bool,
+  draggable: { type: Boolean, default: undefined },
   crossOrigin: String as PropType<'' | 'anonymous' | 'use-credentials'>,
   loadError: {
     type: Function as PropType<() => boolean>,

components/avatar/Group.tsx

@@ -4,9 +4,7 @@ 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';
 
@@ -15,17 +13,17 @@ export const groupProps = () => ({
   maxCount: Number,
   maxStyle: {
     type: Object as PropType<CSSProperties>,
-    default: () => ({} as CSSProperties),
+    default: undefined as CSSProperties,
   },
-  maxPopoverPlacement: PropTypes.oneOf(tuple('top', 'bottom')).def('top'),
+  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/back-top/index.tsx

@@ -11,31 +11,31 @@ import {
   onDeactivated,
 } from 'vue';
 import VerticalAlignTopOutlined from '@ant-design/icons-vue/VerticalAlignTopOutlined';
-import PropTypes from '../_util/vue-types';
 import addEventListener from '../vc-util/Dom/addEventListener';
 import getScroll from '../_util/getScroll';
 import { getTransitionProps, Transition } from '../_util/transition';
 import scrollTo from '../_util/scrollTo';
 import { withInstall } from '../_util/type';
 import throttleByAnimationFrame from '../_util/throttleByAnimationFrame';
 import useConfigInject from '../_util/hooks/useConfigInject';
+import type { MouseEventHandler } from '../_util/EventInterface';
 
-export const backTopProps = {
-  visibilityHeight: PropTypes.number.def(400),
-  duration: PropTypes.number.def(450),
+export const backTopProps = () => ({
+  visibilityHeight: { type: Number, default: 400 },
+  duration: { type: Number, default: 450 },
   target: Function as PropType<() => HTMLElement | Window | Document>,
   prefixCls: String,
-  onClick: Function,
+  onClick: Function as PropType<MouseEventHandler>,
   // visible: { type: Boolean, default: undefined }, // Only for test. Don't use it.
-};
+});
 
 export type BackTopProps = Partial<ExtractPropTypes<typeof backTopProps>>;
 
 const BackTop = defineComponent({
   name: 'ABackTop',
   inheritAttrs: false,
-  props: backTopProps,
-  emits: ['click'],
+  props: backTopProps(),
+  // emits: ['click'],
   setup(props, { slots, attrs, emit }) {
     const { prefixCls, direction } = useConfigInject('back-top', props);
     const domRef = ref();

components/badge/Badge.tsx

@@ -4,41 +4,40 @@ import classNames from '../_util/classNames';
 import { getPropsSlot, flattenChildren } from '../_util/props-util';
 import { cloneElement } from '../_util/vnode';
 import { getTransitionProps, Transition } from '../_util/transition';
-import type { ExtractPropTypes, CSSProperties } from 'vue';
+import type { ExtractPropTypes, CSSProperties, PropType } from 'vue';
 import { defineComponent, computed, ref, watch } from 'vue';
-import { tuple } from '../_util/type';
 import Ribbon from './Ribbon';
 import { isPresetColor } from './utils';
 import useConfigInject from '../_util/hooks/useConfigInject';
 import isNumeric from '../_util/isNumeric';
+import type { PresetStatusColorType } from '../_util/colors';
 
-export const badgeProps = {
+export const badgeProps = () => ({
   /** Number to show in badge */
   count: PropTypes.any,
   showZero: { type: Boolean, default: undefined },
   /** Max count to show */
-  overflowCount: PropTypes.number.def(99),
+  overflowCount: { type: Number, default: 99 },
   /** whether to show red dot without number */
   dot: { type: Boolean, default: undefined },
   prefixCls: String,
   scrollNumberPrefixCls: String,
-  status: PropTypes.oneOf(tuple('success', 'processing', 'default', 'error', 'warning')),
-  // sync [email protected]
-  size: PropTypes.oneOf(tuple('default', 'small')).def('default'),
+  status: { type: String as PropType<PresetStatusColorType> },
+  size: { type: String as PropType<'default' | 'small'>, default: 'default' },
   color: String,
   text: PropTypes.any,
-  offset: PropTypes.arrayOf(PropTypes.oneOfType([String, Number])),
-  numberStyle: PropTypes.style,
+  offset: Array as unknown as PropType<[number | string, number | string]>,
+  numberStyle: Object as PropType<CSSProperties>,
   title: String,
-};
+});
 
-export type BadgeProps = Partial<ExtractPropTypes<typeof badgeProps>>;
+export type BadgeProps = Partial<ExtractPropTypes<ReturnType<typeof badgeProps>>>;
 
 export default defineComponent({
   name: 'ABadge',
   Ribbon,
   inheritAttrs: false,
-  props: badgeProps,
+  props: badgeProps(),
   slots: ['text', 'count'],
   setup(props, { slots, attrs }) {
     const { prefixCls, direction } = useConfigInject('badge', props);
@@ -197,7 +196,7 @@ export default defineComponent({
       const transitionProps = getTransitionProps(children ? `${pre}-zoom` : '', {
         appear: false,
       });
-      let scrollNumberStyle: CSSProperties = { ...mergedStyle, ...props.numberStyle };
+      let scrollNumberStyle: CSSProperties = { ...mergedStyle, ...(props.numberStyle as object) };
       if (color && !isPresetColor(color)) {
         scrollNumberStyle = scrollNumberStyle || {};
         scrollNumberStyle.background = color;

components/badge/Ribbon.tsx

@@ -1,25 +1,24 @@
 import type { LiteralUnion } from '../_util/type';
-import { tuple } from '../_util/type';
 import type { PresetColorType } from '../_util/colors';
 import { isPresetColor } from './utils';
 import type { CSSProperties, PropType, ExtractPropTypes } from 'vue';
 import { defineComponent, computed } from 'vue';
 import PropTypes from '../_util/vue-types';
 import useConfigInject from '../_util/hooks/useConfigInject';
 
-export const ribbonProps = {
+export const ribbonProps = () => ({
   prefix: String,
   color: { type: String as PropType<LiteralUnion<PresetColorType, string>> },
   text: PropTypes.any,
-  placement: PropTypes.oneOf(tuple('start', 'end')).def('end'),
-};
+  placement: { type: String as PropType<'start' | 'end'>, default: 'end' },
+});
 
-export type RibbonProps = Partial<ExtractPropTypes<typeof ribbonProps>>;
+export type RibbonProps = Partial<ExtractPropTypes<ReturnType<typeof ribbonProps>>>;
 
 export default defineComponent({
   name: 'ABadgeRibbon',
   inheritAttrs: false,
-  props: ribbonProps,
+  props: ribbonProps(),
   slots: ['text'],
   setup(props, { attrs, slots }) {
     const { prefixCls, direction } = useConfigInject('ribbon', props);

components/badge/ScrollNumber.tsx

@@ -7,11 +7,11 @@ import useConfigInject from '../_util/hooks/useConfigInject';
 import SingleNumber from './SingleNumber';
 import { filterEmpty } from '../_util/props-util';
 
-export const scrollNumberProps = {
+const scrollNumberProps = {
   prefixCls: String,
   count: PropTypes.any,
   component: String,
-  title: PropTypes.oneOfType([PropTypes.number, PropTypes.string, null]),
+  title: PropTypes.any,
   show: Boolean,
 };
 

components/breadcrumb/Breadcrumb.tsx

@@ -14,7 +14,7 @@ export interface Route {
   children?: Omit<Route, 'children'>[];
 }
 
-export const breadcrumbProps = {
+export const breadcrumbProps = () => ({
   prefixCls: String,
   routes: { type: Array as PropType<Route[]> },
   params: PropTypes.any,
@@ -24,9 +24,9 @@ export const breadcrumbProps = {
       (opt: { route: Route; params: unknown; routes: Route[]; paths: string[] }) => VueNode
     >,
   },
-};
+});
 
-export type BreadcrumbProps = Partial<ExtractPropTypes<typeof breadcrumbProps>>;
+export type BreadcrumbProps = Partial<ExtractPropTypes<ReturnType<typeof breadcrumbProps>>>;
 
 function getBreadcrumbName(route: Route, params: unknown) {
   if (!route.breadcrumbName) {
@@ -53,7 +53,7 @@ function defaultItemRender(opt: {
 
 export default defineComponent({
   name: 'ABreadcrumb',
-  props: breadcrumbProps,
+  props: breadcrumbProps(),
   slots: ['separator', 'itemRender'],
   setup(props, { slots }) {
     const { prefixCls, direction } = useConfigInject('breadcrumb', props);