perf: add more prop type utils (#9641)

* perf: add more prop type utils

* fix: slider type

* chore: uod

packages/vant/src/address-edit/AddressEdit.tsx

@@ -16,6 +16,7 @@ import {
   isMobile,
   truthProp,
   numericProp,
+  makeArrayProp,
   makeNumericProp,
   createNamespace,
 } from '../utils';
@@ -75,6 +76,7 @@ const props = {
   showSearchResult: Boolean,
   detailRows: makeNumericProp(1),
   detailMaxlength: makeNumericProp(200),
+  areaColumnsPlaceholder: makeArrayProp<string>(),
   addressInfo: {
     type: Object as PropType<Partial<AddressEditInfo>>,
     default: () => extend({}, DEFAULT_DATA),
@@ -87,10 +89,6 @@ const props = {
     type: Function as PropType<(val: string) => boolean>,
     default: isPostal,
   },
-  areaColumnsPlaceholder: {
-    type: Array as PropType<string[]>,
-    default: () => [],
-  },
 };
 
 export type AddressEditProps = ExtractPropTypes<typeof props>;

packages/vant/src/address-list/AddressList.tsx

@@ -1,7 +1,12 @@
-import { PropType, defineComponent } from 'vue';
+import { defineComponent } from 'vue';
 
 // Utils
-import { truthProp, numericProp, createNamespace } from '../utils';
+import {
+  truthProp,
+  numericProp,
+  makeArrayProp,
+  createNamespace,
+} from '../utils';
 
 // Components
 import { Button } from '../button';
@@ -14,19 +19,13 @@ export default defineComponent({
   name,
 
   props: {
+    list: makeArrayProp<AddressListAddress>(),
     modelValue: numericProp,
     switchable: truthProp,
     disabledText: String,
+    disabledList: makeArrayProp<AddressListAddress>(),
     addButtonText: String,
     defaultTagText: String,
-    list: {
-      type: Array as PropType<AddressListAddress[]>,
-      default: () => [],
-    },
-    disabledList: {
-      type: Array as PropType<AddressListAddress[]>,
-      default: () => [],
-    },
   },
 
   emits: [

packages/vant/src/address-list/AddressListItem.tsx

@@ -1,7 +1,7 @@
 import { PropType, defineComponent } from 'vue';
 
 // Utils
-import { createNamespace, extend } from '../utils';
+import { createNamespace, extend, makeRequiredProp } from '../utils';
 
 // Components
 import { Tag } from '../tag';
@@ -23,13 +23,10 @@ export default defineComponent({
   name,
 
   props: {
+    address: makeRequiredProp<PropType<AddressListAddress>>(Object),
     disabled: Boolean,
     switchable: Boolean,
     defaultTagText: String,
-    address: {
-      type: Object as PropType<AddressListAddress>,
-      required: true,
-    },
   },
 
   emits: ['edit', 'click', 'select'],

packages/vant/src/area/Area.tsx

@@ -12,7 +12,13 @@ import {
 
 // Utils
 import { deepClone } from '../utils/deep-clone';
-import { pick, createNamespace, extend, makeNumericProp } from '../utils';
+import {
+  pick,
+  extend,
+  makeArrayProp,
+  makeNumericProp,
+  createNamespace,
+} from '../utils';
 import { pickerProps } from '../picker/Picker';
 
 // Composables
@@ -51,6 +57,7 @@ const isOverseaCode = (code: string) => code[0] === '9';
 const props = extend({}, pickerProps, {
   value: String,
   columnsNum: makeNumericProp(3),
+  columnsPlaceholder: makeArrayProp<string>(),
   areaList: {
     type: Object as PropType<AreaList>,
     default: () => ({}),
@@ -59,10 +66,6 @@ const props = extend({}, pickerProps, {
     type: Function as PropType<(code: string) => boolean>,
     default: isOverseaCode,
   },
-  columnsPlaceholder: {
-    type: Array as PropType<string[]>,
-    default: () => [],
-  },
 });
 
 export type AreaProps = ExtractPropTypes<typeof props>;

packages/vant/src/calendar/Calendar.tsx

@@ -76,6 +76,7 @@ const props = {
   allowSameDay: Boolean,
   showSubtitle: truthProp,
   closeOnPopstate: truthProp,
+  showRangePrompt: truthProp,
   confirmDisabledText: String,
   closeOnClickOverlay: truthProp,
   safeAreaInsetBottom: truthProp,
@@ -97,10 +98,6 @@ const props = {
     default: 0,
     validator: (val: number) => val >= 0 && val <= 6,
   },
-  showRangePrompt: {
-    type: Boolean,
-    default: true,
-  },
 };
 
 export type CalendarProps = ExtractPropTypes<typeof props>;

packages/vant/src/calendar/CalendarDay.tsx

@@ -1,5 +1,5 @@
 import { computed, CSSProperties, PropType, defineComponent } from 'vue';
-import { createNamespace } from '../utils';
+import { makeNumberProp, createNamespace, makeRequiredProp } from '../utils';
 import { bem } from './utils';
 import type { CalendarDayItem } from './types';
 
@@ -9,17 +9,11 @@ export default defineComponent({
   name,
 
   props: {
+    item: makeRequiredProp<PropType<CalendarDayItem>>(Object),
     color: String,
     index: Number,
+    offset: makeNumberProp(0),
     rowHeight: String,
-    offset: {
-      type: Number,
-      default: 0,
-    },
-    item: {
-      type: Object as PropType<CalendarDayItem>,
-      required: true,
-    },
   },
 
   emits: ['click'],

packages/vant/src/calendar/CalendarMonth.tsx

@@ -13,6 +13,7 @@ import {
   numericProp,
   setScrollTop,
   createNamespace,
+  makeRequiredProp,
 } from '../utils';
 import { getMonthEndDay } from '../datetime-picker/utils';
 import {
@@ -38,8 +39,11 @@ import type { CalendarType, CalendarDayItem, CalendarDayType } from './types';
 const [name] = createNamespace('calendar-month');
 
 const props = {
+  date: makeRequiredProp(Date),
   type: String as PropType<CalendarType>,
   color: String,
+  minDate: makeRequiredProp(Date),
+  maxDate: makeRequiredProp(Date),
   showMark: Boolean,
   rowHeight: numericProp,
   formatter: Function as PropType<(item: CalendarDayItem) => CalendarDayItem>,
@@ -49,18 +53,6 @@ const props = {
   showSubtitle: Boolean,
   showMonthTitle: Boolean,
   firstDayOfWeek: Number,
-  date: {
-    type: Date,
-    required: true as const,
-  },
-  minDate: {
-    type: Date,
-    required: true as const,
-  },
-  maxDate: {
-    type: Date,
-    required: true as const,
-  },
 };
 
 export type CalendarMonthProps = ExtractPropTypes<typeof props>;

packages/vant/src/cascader/Cascader.tsx

@@ -3,6 +3,7 @@ import {
   extend,
   truthProp,
   numericProp,
+  makeArrayProp,
   makeStringProp,
   createNamespace,
 } from '../utils';
@@ -25,7 +26,7 @@ export type CascaderOption = {
   children?: CascaderOption[];
   className?: unknown;
   // for custom filed names
-  [key: string]: any;
+  [key: PropertyKey]: any;
 };
 
 type CascaderTab = {
@@ -44,6 +45,7 @@ export default defineComponent({
 
   props: {
     title: String,
+    options: makeArrayProp<CascaderOption>(),
     closeable: truthProp,
     swipeable: truthProp,
     closeIcon: makeStringProp('cross'),
@@ -51,10 +53,6 @@ export default defineComponent({
     fieldNames: Object as PropType<CascaderFieldNames>,
     placeholder: String,
     activeColor: String,
-    options: {
-      type: Array as PropType<CascaderOption[]>,
-      default: () => [],
-    },
   },
 
   emits: ['close', 'change', 'finish', 'update:modelValue', 'click-tab'],

packages/vant/src/checkbox-group/CheckboxGroup.tsx

@@ -7,7 +7,7 @@ import {
 } from 'vue';
 
 // Utils
-import { numericProp, createNamespace } from '../utils';
+import { numericProp, createNamespace, makeArrayProp } from '../utils';
 
 // Composables
 import { useChildren, useCustomFieldValue } from '@vant/use';
@@ -26,13 +26,10 @@ const [name, bem] = createNamespace('checkbox-group');
 const props = {
   max: numericProp,
   disabled: Boolean,
-  direction: String as PropType<CheckerDirection>,
   iconSize: numericProp,
+  direction: String as PropType<CheckerDirection>,
+  modelValue: makeArrayProp<unknown>(),
   checkedColor: String,
-  modelValue: {
-    type: Array as PropType<unknown[]>,
-    default: () => [],
-  },
 };
 
 export type CheckboxGroupProps = ExtractPropTypes<typeof props>;

packages/vant/src/checkbox/Checker.tsx

@@ -6,6 +6,7 @@ import {
   numericProp,
   unknownProp,
   makeStringProp,
+  makeRequiredProp,
 } from '../utils';
 import { Icon } from '../icon';
 
@@ -34,14 +35,11 @@ export const checkerProps = {
 
 export default defineComponent({
   props: extend({}, checkerProps, {
+    bem: makeRequiredProp(Function),
     role: String,
     parent: Object as PropType<CheckerParent | null>,
     checked: Boolean,
     bindGroup: truthProp,
-    bem: {
-      type: Function,
-      required: true as const,
-    },
   }),
 
   emits: ['click', 'toggle'],

packages/vant/src/circle/Circle.tsx

@@ -6,6 +6,7 @@ import {
   numericProp,
   getSizeStyle,
   makeStringProp,
+  makeNumberProp,
   makeNumericProp,
   createNamespace,
 } from '../utils';
@@ -37,13 +38,10 @@ export default defineComponent({
     color: [String, Object] as PropType<string | Record<string, string>>,
     clockwise: truthProp,
     layerColor: String,
+    currentRate: makeNumberProp(0),
     strokeWidth: makeNumericProp(40),
     strokeLinecap: String as PropType<CanvasLineCap>,
     startPosition: makeStringProp<CircleStartPosition>('top'),
-    currentRate: {
-      type: Number,
-      default: 0,
-    },
   },
 
   emits: ['update:currentRate'],

packages/vant/src/coupon-cell/CouponCell.tsx

@@ -1,9 +1,10 @@
-import { PropType, defineComponent } from 'vue';
+import { defineComponent } from 'vue';
 
 // Utils
 import {
   isDef,
   truthProp,
+  makeArrayProp,
   makeStringProp,
   makeNumericProp,
   createNamespace,
@@ -46,12 +47,9 @@ export default defineComponent({
     title: String,
     border: truthProp,
     editable: truthProp,
+    coupons: makeArrayProp<CouponInfo>(),
     currency: makeStringProp('¥'),
     chosenCoupon: makeNumericProp(-1),
-    coupons: {
-      type: Array as PropType<CouponInfo[]>,
-      default: () => [],
-    },
   },
 
   setup(props) {

packages/vant/src/coupon-list/CouponList.tsx

@@ -3,13 +3,18 @@ import {
   computed,
   nextTick,
   reactive,
-  PropType,
   onMounted,
   defineComponent,
 } from 'vue';
 
 // Utils
-import { truthProp, makeStringProp, createNamespace } from '../utils';
+import {
+  truthProp,
+  makeArrayProp,
+  makeStringProp,
+  makeNumberProp,
+  createNamespace,
+} from '../utils';
 
 // Composables
 import { useRefs } from '../composables/use-refs';
@@ -29,38 +34,23 @@ export default defineComponent({
 
   props: {
     code: makeStringProp(''),
+    coupons: makeArrayProp<CouponInfo>(),
     currency: makeStringProp('¥'),
     showCount: truthProp,
     emptyImage: makeStringProp(EMPTY_IMAGE),
+    chosenCoupon: makeNumberProp(-1),
     enabledTitle: String,
     disabledTitle: String,
+    disabledCoupons: makeArrayProp<CouponInfo>(),
     showExchangeBar: truthProp,
     showCloseButton: truthProp,
     closeButtonText: String,
     inputPlaceholder: String,
+    exchangeMinLength: makeNumberProp(1),
     exchangeButtonText: String,
+    displayedCouponIndex: makeNumberProp(-1),
     exchangeButtonLoading: Boolean,
     exchangeButtonDisabled: Boolean,
-    exchangeMinLength: {
-      type: Number,
-      default: 1,
-    },
-    chosenCoupon: {
-      type: Number,
-      default: -1,
-    },
-    coupons: {
-      type: Array as PropType<CouponInfo[]>,
-      default: () => [],
-    },
-    disabledCoupons: {
-      type: Array as PropType<CouponInfo[]>,
-      default: () => [],
-    },
-    displayedCouponIndex: {
-      type: Number,
-      default: -1,
-    },
   },
 
   emits: ['change', 'exchange', 'update:code'],

packages/vant/src/coupon/Coupon.tsx

@@ -1,5 +1,10 @@
 import { computed, PropType, defineComponent } from 'vue';
-import { padZero, makeStringProp, createNamespace } from '../utils';
+import {
+  padZero,
+  makeStringProp,
+  createNamespace,
+  makeRequiredProp,
+} from '../utils';
 import { Checkbox } from '../checkbox';
 
 export type CouponInfo = {
@@ -38,12 +43,9 @@ export default defineComponent({
 
   props: {
     chosen: Boolean,
+    coupon: makeRequiredProp<PropType<CouponInfo>>(Object),
     disabled: Boolean,
     currency: makeStringProp('¥'),
-    coupon: {
-      type: Object as PropType<CouponInfo>,
-      required: true,
-    },
   },
 
   setup(props) {

packages/vant/src/dropdown-item/DropdownItem.tsx

@@ -14,6 +14,7 @@ import {
   unknownProp,
   getZIndexStyle,
   createNamespace,
+  makeArrayProp,
 } from '../utils';
 import { DROPDOWN_KEY } from '../dropdown-menu/DropdownMenu';
 
@@ -33,15 +34,12 @@ const [name, bem] = createNamespace('dropdown-item');
 
 const props = {
   title: String,
+  options: makeArrayProp<DropdownItemOption>(),
   disabled: Boolean,
   teleport: [String, Object] as PropType<TeleportProps['to']>,
   lazyRender: truthProp,
   modelValue: unknownProp,
   titleClass: unknownProp,
-  options: {
-    type: Array as PropType<DropdownItemOption[]>,
-    default: () => [],
-  },
 };
 
 export type DropdownItemProps = ExtractPropTypes<typeof props>;

packages/vant/src/image-preview/ImagePreview.tsx

@@ -16,6 +16,7 @@ import {
   truthProp,
   unknownProp,
   Interceptor,
+  makeArrayProp,
   makeStringProp,
   makeNumericProp,
   callInterceptor,
@@ -40,6 +41,7 @@ const [name, bem] = createNamespace('image-preview');
 const props = {
   show: Boolean,
   loop: truthProp,
+  images: makeArrayProp<string>(),
   minZoom: makeNumericProp(1 / 3),
   maxZoom: makeNumericProp(3),
   overlay: truthProp,
@@ -55,10 +57,6 @@ const props = {
   showIndicators: Boolean,
   closeOnPopstate: truthProp,
   closeIconPosition: makeStringProp<PopupCloseIconPosition>('top-right'),
-  images: {
-    type: Array as PropType<string[]>,
-    default: () => [],
-  },
 };
 
 export type ImagePreviewProps = ExtractPropTypes<typeof props>;

packages/vant/src/image-preview/ImagePreviewItem.tsx

@@ -1,7 +1,13 @@
 import { watch, computed, reactive, CSSProperties, defineComponent } from 'vue';
 
 // Utils
-import { clamp, preventDefault, numericProp, createNamespace } from '../utils';
+import {
+  clamp,
+  numericProp,
+  preventDefault,
+  createNamespace,
+  makeRequiredProp,
+} from '../utils';
 
 // Composables
 import { useTouch } from '../composables/use-touch';
@@ -24,22 +30,10 @@ export default defineComponent({
     src: String,
     show: Boolean,
     active: Number,
-    minZoom: {
-      type: numericProp,
-      required: true,
-    },
-    maxZoom: {
-      type: numericProp,
-      required: true,
-    },
-    rootWidth: {
-      type: Number,
-      required: true,
-    },
-    rootHeight: {
-      type: Number,
-      required: true,
-    },
+    minZoom: makeRequiredProp(numericProp),
+    maxZoom: makeRequiredProp(numericProp),
+    rootWidth: makeRequiredProp(Number),
+    rootHeight: makeRequiredProp(Number),
   },
 
   emits: ['scale', 'close'],

packages/vant/src/index-bar/IndexBar.tsx

@@ -21,6 +21,7 @@ import {
   numericProp,
   getScrollTop,
   preventDefault,
+  makeNumberProp,
   createNamespace,
   getRootScrollTop,
   setRootScrollTop,
@@ -55,10 +56,7 @@ const props = {
   zIndex: numericProp,
   teleport: [String, Object] as PropType<TeleportProps['to']>,
   highlightColor: String,
-  stickyOffsetTop: {
-    type: Number,
-    default: 0,
-  },
+  stickyOffsetTop: makeNumberProp(0),
   indexList: {
     type: Array as PropType<string[]>,
     default: genAlphabet,

packages/vant/src/pagination/Pagination.tsx

@@ -2,6 +2,7 @@ import { computed, watch, defineComponent } from 'vue';
 import {
   BORDER,
   makeStringProp,
+  makeNumberProp,
   makeNumericProp,
   createNamespace,
 } from '../utils';
@@ -30,14 +31,11 @@ export default defineComponent({
     prevText: String,
     nextText: String,
     pageCount: makeNumericProp(0),
+    modelValue: makeNumberProp(0),
     totalItems: makeNumericProp(0),
     showPageSize: makeNumericProp(5),
     itemsPerPage: makeNumericProp(10),
     forceEllipses: Boolean,
-    modelValue: {
-      type: Number,
-      default: 0,
-    },
   },
 
   emits: ['change', 'update:modelValue'],

packages/vant/src/picker/Picker.tsx

@@ -12,10 +12,11 @@ import {
   extend,
   unitToPx,
   truthProp,
+  makeArrayProp,
   preventDefault,
   makeStringProp,
-  createNamespace,
   makeNumericProp,
+  createNamespace,
   BORDER_UNSET_TOP_BOTTOM,
 } from '../utils';
 
@@ -58,16 +59,13 @@ export default defineComponent({
   name,
 
   props: extend({}, pickerProps, {
+    columns: makeArrayProp<PickerOption | PickerColumn>(),
     // @deprecated
     // should be removed in next major version
     valueKey: String,
     defaultIndex: makeNumericProp(0),
     toolbarPosition: makeStringProp<PickerToolbarPosition>('top'),
     columnsFieldNames: Object as PropType<PickerFieldNames>,
-    columns: {
-      type: Array as PropType<PickerOption[] | PickerColumn[]>,
-      default: () => [],
-    },
   }),
 
   emits: ['confirm', 'cancel', 'change'],

packages/vant/src/picker/PickerColumn.tsx

@@ -1,4 +1,4 @@
-import { ref, watch, reactive, PropType, defineComponent } from 'vue';
+import { ref, watch, reactive, defineComponent } from 'vue';
 
 // Utils
 import { deepClone } from '../utils/deep-clone';
@@ -7,8 +7,11 @@ import {
   isObject,
   unknownProp,
   numericProp,
+  makeArrayProp,
+  makeNumberProp,
   preventDefault,
   createNamespace,
+  makeRequiredProp,
 } from '../utils';
 
 // Composables
@@ -44,33 +47,15 @@ export default defineComponent({
   name,
 
   props: {
+    textKey: makeRequiredProp(String),
     readonly: Boolean,
     allowHtml: Boolean,
     className: unknownProp,
-    textKey: {
-      type: String,
-      required: true,
-    },
-    itemHeight: {
-      type: Number,
-      required: true,
-    },
-    swipeDuration: {
-      type: numericProp,
-      required: true,
-    },
-    visibleItemCount: {
-      type: numericProp,
-      required: true,
-    },
-    defaultIndex: {
-      type: Number,
-      default: 0,
-    },
-    initialOptions: {
-      type: Array as PropType<PickerOption[]>,
-      default: () => [],
-    },
+    itemHeight: makeRequiredProp(Number),
+    defaultIndex: makeNumberProp(0),
+    swipeDuration: makeRequiredProp(numericProp),
+    initialOptions: makeArrayProp<PickerOption>(),
+    visibleItemCount: makeRequiredProp(numericProp),
   },
 
   emits: ['change'],

packages/vant/src/picker/types.ts

@@ -14,7 +14,7 @@ export type PickerObjectOption = {
   text?: string | number;
   disabled?: boolean;
   // for custom filed names
-  [key: string]: any;
+  [key: PropertyKey]: any;
 };
 
 export type PickerOption = string | number | PickerObjectOption;
@@ -25,7 +25,7 @@ export type PickerObjectColumn = {
   className?: unknown;
   defaultIndex?: number;
   // for custom filed names
-  [key: string]: any;
+  [key: PropertyKey]: any;
 };
 
 export type PickerColumn = PickerOption[] | PickerObjectColumn;

packages/vant/src/popover/Popover.tsx

@@ -22,6 +22,7 @@ import {
   makeStringProp,
   createNamespace,
   ComponentInstance,
+  makeArrayProp,
 } from '../utils';
 
 // Composables
@@ -75,8 +76,10 @@ export default defineComponent({
     show: Boolean,
     theme: makeStringProp<PopoverTheme>('light'),
     overlay: Boolean,
+    actions: makeArrayProp<PopoverAction>(),
     trigger: makeStringProp<PopoverTrigger>('click'),
     duration: numericProp,
+    showArrow: truthProp,
     placement: makeStringProp<PopoverPlacement>('bottom'),
     iconPrefix: String,
     overlayClass: unknownProp,
@@ -88,18 +91,10 @@ export default defineComponent({
       type: Array as unknown as PropType<[number, number]>,
       default: () => [0, 8],
     },
-    actions: {
-      type: Array as PropType<PopoverAction[]>,
-      default: () => [],
-    },
     teleport: {
       type: [String, Object] as PropType<TeleportProps['to']>,
       default: 'body',
     },
-    showArrow: {
-      type: Boolean,
-      default: true,
-    },
   },
 
   emits: ['select', 'touchstart', 'update:show'],

packages/vant/src/rate/Rate.tsx

@@ -7,6 +7,7 @@ import {
   numericProp,
   preventDefault,
   makeStringProp,
+  makeNumberProp,
   makeNumericProp,
   createNamespace,
 } from '../utils';
@@ -69,11 +70,8 @@ export default defineComponent({
     voidColor: String,
     touchable: truthProp,
     iconPrefix: String,
+    modelValue: makeNumberProp(0),
     disabledColor: String,
-    modelValue: {
-      type: Number,
-      default: 0,
-    },
   },
 
   emits: ['change', 'update:modelValue'],

packages/vant/src/share-sheet/ShareSheet.tsx

@@ -1,7 +1,13 @@
-import { PropType, defineComponent } from 'vue';
+import { defineComponent } from 'vue';
 
 // Utils
-import { truthProp, createNamespace, extend, pick } from '../utils';
+import {
+  pick,
+  extend,
+  truthProp,
+  makeArrayProp,
+  createNamespace,
+} from '../utils';
 import { popupSharedProps, popupSharedPropKeys } from '../popup/shared';
 
 // Components
@@ -47,14 +53,11 @@ export default defineComponent({
 
   props: extend({}, popupSharedProps, {
     title: String,
+    options: makeArrayProp<ShareSheetOption | ShareSheetOption[]>(),
     cancelText: String,
     description: String,
     closeOnPopstate: truthProp,
     safeAreaInsetBottom: truthProp,
-    options: {
-      type: Array as PropType<ShareSheetOptions>,
-      default: () => [],
-    },
   }),
 
   emits: ['cancel', 'select', 'update:show'],

packages/vant/src/slider/Slider.tsx

@@ -49,8 +49,8 @@ export default defineComponent({
 
   setup(props, { emit, slots }) {
     let buttonIndex: 0 | 1;
+    let current: SliderValue;
     let startValue: SliderValue;
-    let currentValue: SliderValue;
 
     const root = ref<HTMLElement>();
     const dragStatus = ref<'start' | 'dragging' | ''>();
@@ -193,12 +193,12 @@ export default defineComponent({
       }
 
       touch.start(event);
-      currentValue = props.modelValue;
+      current = props.modelValue;
 
-      if (isRange(currentValue)) {
-        startValue = currentValue.map(format) as NumberRange;
+      if (isRange(current)) {
+        startValue = current.map(format) as NumberRange;
       } else {
-        startValue = format(currentValue);
+        startValue = format(current);
       }
 
       dragStatus.value = 'start';
@@ -228,11 +228,11 @@ export default defineComponent({
 
       if (isRange(startValue)) {
         const index = props.reverse ? 1 - buttonIndex : buttonIndex;
-        (currentValue as NumberRange)[index] = startValue[index] + diff;
+        (current as NumberRange)[index] = startValue[index] + diff;
       } else {
-        currentValue = startValue + diff;
+        current = startValue + diff;
       }
-      updateValue(currentValue);
+      updateValue(current);
     };
 
     const onTouchEnd = (event: TouchEvent) => {
@@ -241,7 +241,7 @@ export default defineComponent({
       }
 
       if (dragStatus.value === 'dragging') {
-        updateValue(currentValue, true);
+        updateValue(current, true);
         emit('drag-end', event);
       }
 
@@ -274,7 +274,7 @@ export default defineComponent({
     };
 
     const renderButton = (index?: 0 | 1) => {
-      const currentValue =
+      const current =
         typeof index === 'number'
           ? (props.modelValue as NumberRange)[index]
           : (props.modelValue as number);
@@ -285,7 +285,7 @@ export default defineComponent({
           class={getButtonClassName(index)}
           tabindex={props.disabled || props.readonly ? -1 : 0}
           aria-valuemin={+props.min}
-          aria-valuenow={currentValue}
+          aria-valuenow={current}
           aria-valuemax={+props.max}
           aria-orientation={props.vertical ? 'vertical' : 'horizontal'}
           onTouchstart={(event) => {
@@ -300,7 +300,7 @@ export default defineComponent({
           onTouchcancel={onTouchEnd}
           onClick={stopPropagation}
         >
-          {renderButtonContent(currentValue, index)}
+          {renderButtonContent(current, index)}
         </div>
       );
     };

packages/vant/src/tabs/TabsContent.tsx

@@ -1,5 +1,5 @@
 import { ref, watch, onMounted, defineComponent } from 'vue';
-import { numericProp, createNamespace } from '../utils';
+import { numericProp, makeRequiredProp, createNamespace } from '../utils';
 import { Swipe, SwipeInstance } from '../swipe';
 
 const [name, bem] = createNamespace('tabs');
@@ -8,22 +8,13 @@ export default defineComponent({
   name,
 
   props: {
+    count: makeRequiredProp(Number),
     inited: Boolean,
     animated: Boolean,
+    duration: makeRequiredProp(numericProp),
     swipeable: Boolean,
     lazyRender: Boolean,
-    count: {
-      type: Number,
-      required: true,
-    },
-    duration: {
-      type: numericProp,
-      required: true,
-    },
-    currentIndex: {
-      type: Number,
-      required: true,
-    },
+    currentIndex: makeRequiredProp(Number),
   },
 
   emits: ['change'],

packages/vant/src/toast/Toast.tsx

@@ -13,6 +13,7 @@ import {
   unknownProp,
   numericProp,
   makeStringProp,
+  makeNumberProp,
   createNamespace,
 } from '../utils';
 import { lockClick } from './lock-click';
@@ -37,6 +38,7 @@ export default defineComponent({
     overlay: Boolean,
     message: numericProp,
     iconSize: numericProp,
+    duration: makeNumberProp(2000),
     position: makeStringProp<ToastPosition>('middle'),
     className: unknownProp,
     iconPrefix: String,
@@ -47,10 +49,6 @@ export default defineComponent({
     overlayStyle: Object as PropType<CSSProperties>,
     closeOnClick: Boolean,
     closeOnClickOverlay: Boolean,
-    duration: {
-      type: Number,
-      default: 2000,
-    },
   },
 
   emits: ['update:show'],

packages/vant/src/tree-select/TreeSelect.tsx

@@ -3,6 +3,7 @@ import { PropType, defineComponent } from 'vue';
 // Utils
 import {
   addUnit,
+  makeArrayProp,
   makeStringProp,
   makeNumericProp,
   createNamespace,
@@ -35,13 +36,10 @@ export default defineComponent({
 
   props: {
     max: makeNumericProp(Infinity),
+    items: makeArrayProp<TreeSelectItem>(),
     height: makeNumericProp(300),
     selectedIcon: makeStringProp('success'),
     mainActiveIndex: makeNumericProp(0),
-    items: {
-      type: Array as PropType<TreeSelectItem[]>,
-      default: () => [],
-    },
     activeId: {
       type: [Number, String, Array] as PropType<
         number | string | Array<number | string>

packages/vant/src/uploader/Uploader.tsx

@@ -15,6 +15,7 @@ import {
   numericProp,
   Interceptor,
   getSizeStyle,
+  makeArrayProp,
   makeStringProp,
   makeNumericProp,
   ComponentInstance,
@@ -65,16 +66,13 @@ const props = {
   deletable: truthProp,
   afterRead: Function as PropType<UploaderAfterRead>,
   showUpload: truthProp,
+  modelValue: makeArrayProp<UploaderFileListItem>(),
   beforeRead: Function as PropType<UploaderBeforeRead>,
   beforeDelete: Function as PropType<Interceptor>,
   previewSize: numericProp,
   previewImage: truthProp,
   previewOptions: Object as PropType<ImagePreviewOptions>,
   previewFullImage: truthProp,
-  modelValue: {
-    type: Array as PropType<UploaderFileListItem[]>,
-    default: () => [],
-  },
   maxSize: {
     type: [Number, String, Function] as PropType<UploaderMaxSize>,
     default: Infinity,

packages/vant/src/uploader/UploaderPreviewItem.tsx

@@ -9,6 +9,7 @@ import {
   numericProp,
   getSizeStyle,
   callInterceptor,
+  makeRequiredProp,
 } from '../utils';
 
 // Components
@@ -22,16 +23,13 @@ import type { UploaderFileListItem } from './types';
 export default defineComponent({
   props: {
     name: numericProp,
+    item: makeRequiredProp<PropType<UploaderFileListItem>>(Object),
     index: Number,
     imageFit: String as PropType<ImageFit>,
     lazyLoad: Boolean,
     deletable: Boolean,
     previewSize: numericProp,
     beforeDelete: Function as PropType<Interceptor>,
-    item: {
-      type: Object as PropType<UploaderFileListItem>,
-      required: true,
-    },
   },
 
   emits: ['delete', 'preview'],

packages/vant/src/utils/basic.ts

@@ -1,4 +1,4 @@
-import { PropType, ComponentPublicInstance } from 'vue';
+import type { ComponentPublicInstance } from 'vue';
 
 export function noop() {}
 
@@ -6,23 +6,6 @@ export const extend = Object.assign;
 
 export const inBrowser = typeof window !== 'undefined';
 
-// propType helpers
-// help us to write less code, reduce bundle size
-export const unknownProp = null as unknown as PropType<unknown>;
-export const numericProp = [Number, String];
-export const truthProp = {
-  type: Boolean,
-  default: true as const,
-};
-export const makeNumericProp = <T>(defaultVal: T) => ({
-  type: numericProp,
-  default: defaultVal,
-});
-export const makeStringProp = <T>(defaultVal: T) => ({
-  type: String as unknown as PropType<T>,
-  default: defaultVal,
-});
-
 // eslint-disable-next-line
 export type ComponentInstance = ComponentPublicInstance<{}, any>;
 

packages/vant/src/utils/index.ts

@@ -1,4 +1,5 @@
 export * from './basic';
+export * from './props';
 export * from './dom';
 export * from './create';
 export * from './format';

packages/vant/src/utils/props.ts

@@ -0,0 +1,39 @@
+/**
+ * prop type helpers
+ * help us to write less code and reduce bundle size
+ */
+import type { PropType } from 'vue';
+
+export const unknownProp = null as unknown as PropType<unknown>;
+
+export const numericProp = [Number, String];
+
+export const truthProp = {
+  type: Boolean,
+  default: true as const,
+};
+
+export const makeRequiredProp = <T>(type: T) => ({
+  type,
+  required: true as const,
+});
+
+export const makeArrayProp = <T>() => ({
+  type: Array as PropType<T[]>,
+  default: () => [],
+});
+
+export const makeNumberProp = <T>(defaultVal: T) => ({
+  type: Number,
+  default: defaultVal,
+});
+
+export const makeNumericProp = <T>(defaultVal: T) => ({
+  type: numericProp,
+  default: defaultVal,
+});
+
+export const makeStringProp = <T>(defaultVal: T) => ({
+  type: String as unknown as PropType<T>,
+  default: defaultVal,
+});