perf: add stringProp helper (#9603)

packages/vant/src/action-sheet/ActionSheet.tsx

@@ -1,7 +1,13 @@
 import { nextTick, PropType, defineComponent } from 'vue';
 
 // Utils
-import { pick, extend, truthProp, createNamespace } from '../utils';
+import {
+  pick,
+  extend,
+  truthProp,
+  makeStringProp,
+  createNamespace,
+} from '../utils';
 
 // Components
 import { Icon } from '../icon';
@@ -28,16 +34,13 @@ export default defineComponent({
     title: String,
     round: truthProp,
     actions: Array as PropType<ActionSheetAction[]>,
+    closeIcon: makeStringProp('cross'),
     closeable: truthProp,
     cancelText: String,
     description: String,
     closeOnPopstate: Boolean,
     closeOnClickAction: Boolean,
     safeAreaInsetBottom: truthProp,
-    closeIcon: {
-      type: String,
-      default: 'cross',
-    },
   }),
 
   emits: ['select', 'cancel', 'update:show'],

packages/vant/src/badge/Badge.tsx

@@ -5,6 +5,7 @@ import {
   isNumeric,
   truthProp,
   numericProp,
+  makeStringProp,
   createNamespace,
 } from '../utils';
 
@@ -16,14 +17,11 @@ export default defineComponent({
   props: {
     dot: Boolean,
     max: numericProp,
+    tag: makeStringProp<keyof HTMLElementTagNameMap>('div'),
     color: String,
     offset: Array as unknown as PropType<[string | number, string | number]>,
     content: numericProp,
     showZero: truthProp,
-    tag: {
-      type: String as PropType<keyof HTMLElementTagNameMap>,
-      default: 'div',
-    },
   },
 
   setup(props, { slots }) {

packages/vant/src/button/Button.tsx

@@ -9,6 +9,7 @@ import {
 import {
   extend,
   numericProp,
+  makeStringProp,
   createNamespace,
   BORDER_SURROUND,
 } from '../utils';
@@ -29,12 +30,19 @@ export type ButtonType =
 
 export type ButtonSize = 'large' | 'normal' | 'small' | 'mini';
 
+export type ButtonNativeType = NonNullable<ButtonHTMLAttributes['type']>;
+
+export type ButtonIconPosition = 'left' | 'right';
+
 export default defineComponent({
   name,
 
   props: extend({}, routeProps, {
+    tag: makeStringProp<keyof HTMLElementTagNameMap>('button'),
     text: String,
     icon: String,
+    type: makeStringProp<ButtonType>('default'),
+    size: makeStringProp<ButtonSize>('normal'),
     color: String,
     block: Boolean,
     plain: Boolean,
@@ -44,29 +52,11 @@ export default defineComponent({
     hairline: Boolean,
     disabled: Boolean,
     iconPrefix: String,
+    nativeType: makeStringProp<ButtonNativeType>('button'),
     loadingSize: numericProp,
     loadingText: String,
     loadingType: String as PropType<LoadingType>,
-    tag: {
+    iconPosition: makeStringProp<ButtonIconPosition>('left'),
-      type: String as PropType<keyof HTMLElementTagNameMap>,
-      default: 'button',
-    },
-    type: {
-      type: String as PropType<ButtonType>,
-      default: 'default',
-    },
-    size: {
-      type: String as PropType<ButtonSize>,
-      default: 'normal',
-    },
-    nativeType: {
-      type: String as PropType<ButtonHTMLAttributes['type']>,
-      default: 'button',
-    },
-    iconPosition: {
-      type: String as PropType<'left' | 'right'>,
-      default: 'left',
-    },
   }),
 
   emits: ['click'],

packages/vant/src/calendar/Calendar.tsx

@@ -15,6 +15,7 @@ import {
   truthProp,
   numericProp,
   getScrollTop,
+  makeStringProp,
   makeNumericProp,
 } from '../utils';
 import {
@@ -54,11 +55,14 @@ import type {
 
 const props = {
   show: Boolean,
+  type: makeStringProp<CalendarType>('single'),
   title: String,
   color: String,
   round: truthProp,
   readonly: Boolean,
   poppable: truthProp,
+  maxRange: makeNumericProp(null),
+  position: makeStringProp<PopupPosition>('bottom'),
   teleport: [String, Object] as PropType<TeleportProps['to']>,
   showMark: truthProp,
   showTitle: truthProp,
@@ -75,15 +79,6 @@ const props = {
   confirmDisabledText: String,
   closeOnClickOverlay: truthProp,
   safeAreaInsetBottom: truthProp,
-  type: {
-    type: String as PropType<CalendarType>,
-    default: 'single',
-  },
-  position: {
-    type: String as PropType<PopupPosition>,
-    default: 'bottom',
-  },
-  maxRange: makeNumericProp(null),
   minDate: {
     type: Date,
     validator: isDate,

packages/vant/src/card/Card.tsx

@@ -1,7 +1,7 @@
 import { defineComponent } from 'vue';
 
 // Utils
-import { isDef, numericProp, createNamespace } from '../utils';
+import { isDef, numericProp, makeStringProp, createNamespace } from '../utils';
 
 // Components
 import { Tag } from '../tag';
@@ -21,12 +21,9 @@ export default defineComponent({
     price: numericProp,
     centered: Boolean,
     lazyLoad: Boolean,
+    currency: makeStringProp('¥'),
     thumbLink: String,
     originPrice: numericProp,
-    currency: {
-      type: String,
-      default: '¥',
-    },
   },
 
   emits: ['click-thumb'],

packages/vant/src/cascader/Cascader.tsx

@@ -1,5 +1,11 @@
 import { nextTick, PropType, reactive, watch, defineComponent } from 'vue';
-import { extend, numericProp, truthProp, createNamespace } from '../utils';
+import {
+  extend,
+  truthProp,
+  numericProp,
+  makeStringProp,
+  createNamespace,
+} from '../utils';
 
 // Components
 import { Tab } from '../tab';
@@ -40,6 +46,7 @@ export default defineComponent({
     title: String,
     closeable: truthProp,
     swipeable: truthProp,
+    closeIcon: makeStringProp('cross'),
     modelValue: numericProp,
     fieldNames: Object as PropType<CascaderFieldNames>,
     placeholder: String,
@@ -48,10 +55,6 @@ export default defineComponent({
       type: Array as PropType<CascaderOption[]>,
       default: () => [],
     },
-    closeIcon: {
-      type: String,
-      default: 'cross',
-    },
   },
 
   emits: ['close', 'change', 'finish', 'update:modelValue', 'click-tab'],

packages/vant/src/checkbox/Checker.tsx

@@ -1,5 +1,12 @@
 import { ref, computed, PropType, defineComponent } from 'vue';
-import { extend, addUnit, truthProp, numericProp, unknownProp } from '../utils';
+import {
+  extend,
+  addUnit,
+  truthProp,
+  numericProp,
+  unknownProp,
+  makeStringProp,
+} from '../utils';
 import { Icon } from '../icon';
 
 export type CheckerShape = 'square' | 'round';
@@ -16,16 +23,13 @@ export type CheckerParent = {
 
 export const checkerProps = {
   name: unknownProp,
+  shape: makeStringProp<CheckerShape>('round'),
   disabled: Boolean,
   iconSize: numericProp,
   modelValue: unknownProp,
   checkedColor: String,
   labelPosition: String as PropType<CheckerLabelPosition>,
   labelDisabled: Boolean,
-  shape: {
-    type: String as PropType<CheckerShape>,
-    default: 'round',
-  },
 };
 
 export default defineComponent({

packages/vant/src/circle/Circle.tsx

@@ -5,6 +5,7 @@ import {
   truthProp,
   numericProp,
   getSizeStyle,
+  makeStringProp,
   makeNumericProp,
   createNamespace,
 } from '../utils';
@@ -30,6 +31,7 @@ export default defineComponent({
   props: {
     text: String,
     size: numericProp,
+    fill: makeStringProp('none'),
     rate: makeNumericProp(100),
     speed: makeNumericProp(0),
     color: [String, Object] as PropType<string | Record<string, string>>,
@@ -37,18 +39,11 @@ export default defineComponent({
     layerColor: String,
     strokeWidth: makeNumericProp(40),
     strokeLinecap: String as PropType<CanvasLineCap>,
+    startPosition: makeStringProp<CircleStartPosition>('top'),
     currentRate: {
       type: Number,
       default: 0,
     },
-    fill: {
-      type: String,
-      default: 'none',
-    },
-    startPosition: {
-      type: String as PropType<CircleStartPosition>,
-      default: 'top',
-    },
   },
 
   emits: ['update:currentRate'],

packages/vant/src/col/Col.tsx

@@ -1,5 +1,10 @@
-import { computed, PropType, defineComponent } from 'vue';
+import { computed, defineComponent } from 'vue';
-import { numericProp, createNamespace, makeNumericProp } from '../utils';
+import {
+  numericProp,
+  createNamespace,
+  makeNumericProp,
+  makeStringProp,
+} from '../utils';
 import { useParent } from '@vant/use';
 import { ROW_KEY } from '../row/Row';
 
@@ -9,12 +14,9 @@ export default defineComponent({
   name,
 
   props: {
+    tag: makeStringProp<keyof HTMLElementTagNameMap>('div'),
     span: makeNumericProp(0),
     offset: numericProp,
-    tag: {
-      type: String as PropType<keyof HTMLElementTagNameMap>,
-      default: 'div',
-    },
   },
 
   setup(props, { slots }) {

packages/vant/src/config-provider/ConfigProvider.tsx

@@ -2,11 +2,11 @@ import {
   provide,
   computed,
   PropType,
-  CSSProperties,
   InjectionKey,
+  CSSProperties,
   defineComponent,
 } from 'vue';
-import { createNamespace, kebabCase } from '../utils';
+import { kebabCase, makeStringProp, createNamespace } from '../utils';
 
 const [name, bem] = createNamespace('config-provider');
 
@@ -29,12 +29,9 @@ export default defineComponent({
   name,
 
   props: {
+    tag: makeStringProp<keyof HTMLElementTagNameMap>('div'),
     themeVars: Object as PropType<Record<string, string | number>>,
     iconPrefix: String,
-    tag: {
-      type: String as PropType<keyof HTMLElementTagNameMap>,
-      default: 'div',
-    },
   },
 
   setup(props, { slots }) {

packages/vant/src/contact-card/ContactCard.tsx

@@ -1,5 +1,5 @@
-import { PropType, defineComponent } from 'vue';
+import { defineComponent } from 'vue';
-import { truthProp, createNamespace } from '../utils';
+import { truthProp, makeStringProp, createNamespace } from '../utils';
 import { Cell } from '../cell';
 
 const [name, bem, t] = createNamespace('contact-card');
@@ -12,12 +12,9 @@ export default defineComponent({
   props: {
     tel: String,
     name: String,
+    type: makeStringProp<ContactCardType>('add'),
     addText: String,
     editable: truthProp,
-    type: {
-      type: String as PropType<ContactCardType>,
-      default: 'add',
-    },
   },
 
   emits: ['click'],

packages/vant/src/count-down/CountDown.tsx

@@ -1,7 +1,12 @@
 import { watch, computed, defineComponent, ExtractPropTypes } from 'vue';
 
 // Utils
-import { truthProp, createNamespace, makeNumericProp } from '../utils';
+import {
+  truthProp,
+  makeStringProp,
+  makeNumericProp,
+  createNamespace,
+} from '../utils';
 import { parseFormat } from './utils';
 
 // Composables
@@ -12,12 +17,9 @@ const [name, bem] = createNamespace('count-down');
 
 const props = {
   time: makeNumericProp(0),
+  format: makeStringProp('HH:mm:ss'),
   autoStart: truthProp,
   millisecond: Boolean,
-  format: {
-    type: String,
-    default: 'HH:mm:ss',
-  },
 };
 
 export type CountDownProps = ExtractPropTypes<typeof props>;

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

@@ -1,7 +1,13 @@
 import { PropType, defineComponent } from 'vue';
 
 // Utils
-import { isDef, truthProp, makeNumericProp, createNamespace } from '../utils';
+import {
+  isDef,
+  truthProp,
+  makeStringProp,
+  makeNumericProp,
+  createNamespace,
+} from '../utils';
 
 // Components
 import { Cell } from '../cell';
@@ -40,15 +46,12 @@ export default defineComponent({
     title: String,
     border: truthProp,
     editable: truthProp,
+    currency: makeStringProp('¥'),
     chosenCoupon: makeNumericProp(-1),
     coupons: {
       type: Array as PropType<CouponInfo[]>,
       default: () => [],
     },
-    currency: {
-      type: String,
-      default: '¥',
-    },
   },
 
   setup(props) {

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

@@ -9,7 +9,7 @@ import {
 } from 'vue';
 
 // Utils
-import { truthProp, createNamespace } from '../utils';
+import { truthProp, makeStringProp, createNamespace } from '../utils';
 
 // Composables
 import { useRefs } from '../composables/use-refs';
@@ -28,7 +28,10 @@ export default defineComponent({
   name,
 
   props: {
+    code: makeStringProp(''),
+    currency: makeStringProp('¥'),
     showCount: truthProp,
+    emptyImage: makeStringProp(EMPTY_IMAGE),
     enabledTitle: String,
     disabledTitle: String,
     showExchangeBar: truthProp,
@@ -38,10 +41,6 @@ export default defineComponent({
     exchangeButtonText: String,
     exchangeButtonLoading: Boolean,
     exchangeButtonDisabled: Boolean,
-    code: {
-      type: String,
-      default: '',
-    },
     exchangeMinLength: {
       type: Number,
       default: 1,
@@ -62,14 +61,6 @@ export default defineComponent({
       type: Number,
       default: -1,
     },
-    currency: {
-      type: String,
-      default: '¥',
-    },
-    emptyImage: {
-      type: String,
-      default: EMPTY_IMAGE,
-    },
   },
 
   emits: ['change', 'exchange', 'update:code'],

packages/vant/src/coupon/Coupon.tsx

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

packages/vant/src/datetime-picker/DatePicker.tsx

@@ -4,7 +4,6 @@ import {
   computed,
   nextTick,
   onMounted,
-  PropType,
   defineComponent,
 } from 'vue';
 
@@ -15,6 +14,7 @@ import {
   extend,
   isDate,
   padZero,
+  makeStringProp,
   createNamespace,
 } from '../utils';
 import {
@@ -41,11 +41,8 @@ export default defineComponent({
   name,
 
   props: extend({}, sharedProps, {
+    type: makeStringProp<DatetimePickerType>('datetime'),
     modelValue: Date,
-    type: {
-      type: String as PropType<DatetimePickerType>,
-      default: 'datetime',
-    },
     minDate: {
       type: Date,
       default: () => new Date(currentYear - 10, 0, 1),

packages/vant/src/dialog/Dialog.tsx

@@ -11,6 +11,7 @@ import {
   BORDER_LEFT,
   unknownProp,
   numericProp,
+  makeStringProp,
   callInterceptor,
   createNamespace,
 } from '../utils';
@@ -49,6 +50,7 @@ export default defineComponent({
     callback: Function as PropType<(action?: DialogAction) => void>,
     allowHtml: Boolean,
     className: unknownProp,
+    transition: makeStringProp('van-dialog-bounce'),
     messageAlign: String as PropType<DialogMessageAlign>,
     closeOnPopstate: truthProp,
     showCancelButton: Boolean,
@@ -58,10 +60,6 @@ export default defineComponent({
     confirmButtonColor: String,
     showConfirmButton: truthProp,
     closeOnClickOverlay: Boolean,
-    transition: {
-      type: String,
-      default: 'van-dialog-bounce',
-    },
   }),
 
   emits: ['confirm', 'cancel', 'update:show'],

packages/vant/src/divider/Divider.tsx

@@ -1,5 +1,5 @@
-import { PropType, defineComponent } from 'vue';
+import { defineComponent } from 'vue';
-import { truthProp, createNamespace } from '../utils';
+import { truthProp, makeStringProp, createNamespace } from '../utils';
 
 const [name, bem] = createNamespace('divider');
 
@@ -11,10 +11,7 @@ export default defineComponent({
   props: {
     dashed: Boolean,
     hairline: truthProp,
-    contentPosition: {
+    contentPosition: makeStringProp<DividerContentPosition>('center'),
-      type: String as PropType<DividerContentPosition>,
-      default: 'center',
-    },
   },
 
   setup(props, { slots }) {

packages/vant/src/dropdown-menu/DropdownMenu.tsx

@@ -1,7 +1,6 @@
 import {
   ref,
   computed,
-  PropType,
   InjectionKey,
   CSSProperties,
   defineComponent,
@@ -13,8 +12,9 @@ import {
   isDef,
   truthProp,
   numericProp,
-  createNamespace,
+  makeStringProp,
   makeNumericProp,
+  createNamespace,
   ComponentInstance,
 } from '../utils';
 
@@ -36,13 +36,10 @@ const props = {
   overlay: truthProp,
   zIndex: numericProp,
   duration: makeNumericProp(0.2),
+  direction: makeStringProp<DropdownMenuDirection>('down'),
   activeColor: String,
   closeOnClickOutside: truthProp,
   closeOnClickOverlay: truthProp,
-  direction: {
-    type: String as PropType<DropdownMenuDirection>,
-    default: 'down',
-  },
 };
 
 export type DropdownMenuProps = ExtractPropTypes<typeof props>;

packages/vant/src/empty/Empty.tsx

@@ -1,5 +1,10 @@
 import { defineComponent } from 'vue';
-import { createNamespace, getSizeStyle, numericProp } from '../utils';
+import {
+  numericProp,
+  getSizeStyle,
+  makeStringProp,
+  createNamespace,
+} from '../utils';
 import { Network } from './Network';
 
 const [name, bem] = createNamespace('empty');
@@ -10,12 +15,9 @@ export default defineComponent({
   name,
 
   props: {
+    image: makeStringProp('default'),
     imageSize: numericProp,
     description: String,
-    image: {
-      type: String,
-      default: 'default',
-    },
   },
 
   setup(props, { slots }) {

packages/vant/src/field/Field.tsx

@@ -22,6 +22,7 @@ import {
   resetScroll,
   formatNumber,
   preventDefault,
+  makeStringProp,
   makeNumericProp,
   createNamespace,
 } from '../utils';
@@ -64,17 +65,20 @@ const [name, bem] = createNamespace('field');
 export const fieldSharedProps = {
   id: String,
   name: String,
-  formatter: Function as PropType<(value: string) => string>,
   leftIcon: String,
   rightIcon: String,
   autofocus: Boolean,
   clearable: Boolean,
   maxlength: numericProp,
+  formatter: Function as PropType<(value: string) => string>,
+  clearIcon: makeStringProp('clear'),
   modelValue: makeNumericProp(''),
   inputAlign: String as PropType<FieldTextAlign>,
   placeholder: String,
   autocomplete: String,
   errorMessage: String,
+  clearTrigger: makeStringProp<FieldClearTrigger>('focus'),
+  formatTrigger: makeStringProp<FieldFormatTrigger>('onChange'),
   error: {
     type: Boolean,
     default: null,
@@ -87,22 +91,11 @@ export const fieldSharedProps = {
     type: Boolean,
     default: null,
   },
-  clearIcon: {
-    type: String,
-    default: 'clear',
-  },
-  clearTrigger: {
-    type: String as PropType<FieldClearTrigger>,
-    default: 'focus',
-  },
-  formatTrigger: {
-    type: String as PropType<FieldFormatTrigger>,
-    default: 'onChange',
-  },
 };
 
 const props = extend({}, cellProps, fieldSharedProps, {
   rows: numericProp,
+  type: makeStringProp<FieldType>('text'),
   rules: Array as PropType<FieldRule[]>,
   autosize: [Boolean, Object] as PropType<boolean | FieldAutosizeConfig>,
   labelWidth: numericProp,
@@ -110,10 +103,6 @@ const props = extend({}, cellProps, fieldSharedProps, {
   labelAlign: String as PropType<FieldTextAlign>,
   showWordLimit: Boolean,
   errorMessageAlign: String as PropType<FieldTextAlign>,
-  type: {
-    type: String as PropType<FieldType>,
-    default: 'text',
-  },
   colon: {
     type: Boolean,
     default: null,

packages/vant/src/form/Form.tsx

@@ -1,7 +1,13 @@
 import { PropType, defineComponent, ExtractPropTypes } from 'vue';
 
 // Utils
-import { truthProp, FORM_KEY, numericProp, createNamespace } from '../utils';
+import {
+  FORM_KEY,
+  truthProp,
+  numericProp,
+  makeStringProp,
+  createNamespace,
+} from '../utils';
 
 // Composables
 import { useChildren } from '@vant/use';
@@ -28,12 +34,9 @@ const props = {
   scrollToError: Boolean,
   validateFirst: Boolean,
   submitOnEnter: truthProp,
+  validateTrigger: makeStringProp<FieldValidateTrigger>('onBlur'),
   showErrorMessage: truthProp,
   errorMessageAlign: String as PropType<FieldTextAlign>,
-  validateTrigger: {
-    type: String as PropType<FieldValidateTrigger>,
-    default: 'onBlur',
-  },
 };
 
 export type FormProps = ExtractPropTypes<typeof props>;

packages/vant/src/icon/Icon.tsx

@@ -1,5 +1,10 @@
-import { PropType, defineComponent, inject, computed } from 'vue';
+import { defineComponent, inject, computed } from 'vue';
-import { addUnit, numericProp, createNamespace } from '../utils';
+import {
+  addUnit,
+  numericProp,
+  makeStringProp,
+  createNamespace,
+} from '../utils';
 import { Badge } from '../badge';
 import { CONFIG_PROVIDER_KEY } from '../config-provider/ConfigProvider';
 
@@ -12,15 +17,12 @@ export default defineComponent({
 
   props: {
     dot: Boolean,
+    tag: makeStringProp<keyof HTMLElementTagNameMap>('i'),
     name: String,
     size: numericProp,
     badge: numericProp,
     color: String,
     classPrefix: String,
-    tag: {
-      type: String as PropType<keyof HTMLElementTagNameMap>,
-      default: 'i',
-    },
   },
 
   setup(props, { slots }) {

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

@@ -16,9 +16,10 @@ import {
   truthProp,
   unknownProp,
   Interceptor,
+  makeStringProp,
+  makeNumericProp,
   callInterceptor,
   createNamespace,
-  makeNumericProp,
 } from '../utils';
 
 // Composables
@@ -45,6 +46,7 @@ const props = {
   closeable: Boolean,
   showIndex: truthProp,
   className: unknownProp,
+  closeIcon: makeStringProp('clear'),
   transition: String,
   beforeClose: Function as PropType<Interceptor>,
   overlayStyle: Object as PropType<CSSProperties>,
@@ -52,18 +54,11 @@ const props = {
   startPosition: makeNumericProp(0),
   showIndicators: Boolean,
   closeOnPopstate: truthProp,
+  closeIconPosition: makeStringProp<PopupCloseIconPosition>('top-right'),
   images: {
     type: Array as PropType<string[]>,
     default: () => [],
   },
-  closeIcon: {
-    type: String,
-    default: 'clear',
-  },
-  closeIconPosition: {
-    type: String as PropType<PopupCloseIconPosition>,
-    default: 'top-right',
-  },
 };
 
 export type ImagePreviewProps = ExtractPropTypes<typeof props>;

packages/vant/src/image/Image.tsx

@@ -16,6 +16,7 @@ import {
   inBrowser,
   truthProp,
   numericProp,
+  makeStringProp,
   createNamespace,
 } from '../utils';
 
@@ -40,16 +41,10 @@ export default defineComponent({
     lazyLoad: Boolean,
     iconSize: numericProp,
     showError: truthProp,
+    errorIcon: makeStringProp('photo-fail'),
     iconPrefix: String,
     showLoading: truthProp,
-    errorIcon: {
+    loadingIcon: makeStringProp('photo'),
-      type: String,
-      default: 'photo-fail',
-    },
-    loadingIcon: {
-      type: String,
-      default: 'photo',
-    },
   },
 
   emits: ['load', 'error'],

packages/vant/src/list/List.tsx

@@ -2,7 +2,6 @@ import {
   ref,
   watch,
   nextTick,
-  PropType,
   onUpdated,
   onMounted,
   defineComponent,
@@ -13,8 +12,9 @@ import {
 import {
   isHidden,
   truthProp,
-  createNamespace,
+  makeStringProp,
   makeNumericProp,
+  createNamespace,
 } from '../utils';
 
 // Composables
@@ -36,13 +36,10 @@ const props = {
   loading: Boolean,
   finished: Boolean,
   errorText: String,
+  direction: makeStringProp<ListDirection>('down'),
   loadingText: String,
   finishedText: String,
   immediateCheck: truthProp,
-  direction: {
-    type: String as PropType<ListDirection>,
-    default: 'down',
-  },
 };
 
 export type ListProps = ExtractPropTypes<typeof props>;

packages/vant/src/loading/Loading.tsx

@@ -1,9 +1,10 @@
-import { computed, PropType, defineComponent } from 'vue';
+import { computed, defineComponent } from 'vue';
 import {
   extend,
   addUnit,
   numericProp,
   getSizeStyle,
+  makeStringProp,
   createNamespace,
 } from '../utils';
 
@@ -26,14 +27,11 @@ export default defineComponent({
 
   props: {
     size: numericProp,
+    type: makeStringProp<LoadingType>('circular'),
     color: String,
     vertical: Boolean,
     textSize: numericProp,
     textColor: String,
-    type: {
-      type: String as PropType<LoadingType>,
-      default: 'circular',
-    },
   },
 
   setup(props, { slots }) {

packages/vant/src/notify/Notify.tsx

@@ -1,5 +1,11 @@
-import { PropType, defineComponent } from 'vue';
+import { defineComponent } from 'vue';
-import { extend, numericProp, unknownProp, createNamespace } from '../utils';
+import {
+  extend,
+  numericProp,
+  unknownProp,
+  makeStringProp,
+  createNamespace,
+} from '../utils';
 import { Popup } from '../popup';
 import { popupSharedProps } from '../popup/shared';
 import type { NotifyType } from './types';
@@ -10,15 +16,12 @@ export default defineComponent({
   name,
 
   props: extend({}, popupSharedProps, {
+    type: makeStringProp<NotifyType>('danger'),
     color: String,
     message: numericProp,
     className: unknownProp,
     background: String,
     lockScroll: Boolean,
-    type: {
-      type: String as PropType<NotifyType>,
-      default: 'danger',
-    },
   }),
 
   setup(props, { slots }) {

packages/vant/src/number-keyboard/NumberKeyboard.tsx

@@ -15,9 +15,10 @@ import {
   truthProp,
   numericProp,
   getZIndexStyle,
+  makeStringProp,
+  makeNumericProp,
   stopPropagation,
   createNamespace,
-  makeNumericProp,
 } from '../utils';
 
 // Composables
@@ -43,9 +44,11 @@ export default defineComponent({
   props: {
     show: Boolean,
     title: String,
+    theme: makeStringProp<NumberKeyboardTheme>('default'),
     zIndex: numericProp,
     teleport: [String, Object] as PropType<TeleportProps['to']>,
     maxlength: makeNumericProp(Number.MAX_VALUE),
+    modelValue: makeStringProp(''),
     transition: truthProp,
     blurOnClose: truthProp,
     showDeleteKey: truthProp,
@@ -55,14 +58,6 @@ export default defineComponent({
     closeButtonLoading: Boolean,
     hideOnClickOutside: truthProp,
     safeAreaInsetBottom: truthProp,
-    theme: {
-      type: String as PropType<NumberKeyboardTheme>,
-      default: 'default',
-    },
-    modelValue: {
-      type: String,
-      default: '',
-    },
     extraKey: {
       type: [String, Array] as PropType<string | string[]>,
       default: '',

packages/vant/src/pagination/Pagination.tsx

@@ -1,5 +1,10 @@
-import { computed, watch, PropType, defineComponent } from 'vue';
+import { computed, watch, defineComponent } from 'vue';
-import { BORDER, makeNumericProp, createNamespace } from '../utils';
+import {
+  BORDER,
+  makeStringProp,
+  makeNumericProp,
+  createNamespace,
+} from '../utils';
 
 const [name, bem, t] = createNamespace('pagination');
 
@@ -21,6 +26,7 @@ export default defineComponent({
   name,
 
   props: {
+    mode: makeStringProp<PaginationMode>('multi'),
     prevText: String,
     nextText: String,
     pageCount: makeNumericProp(0),
@@ -28,10 +34,6 @@ export default defineComponent({
     showPageSize: makeNumericProp(5),
     itemsPerPage: makeNumericProp(10),
     forceEllipses: Boolean,
-    mode: {
-      type: String as PropType<PaginationMode>,
-      default: 'multi',
-    },
     modelValue: {
       type: Number,
       default: 0,

packages/vant/src/password-input/PasswordInput.tsx

@@ -4,6 +4,7 @@ import {
   truthProp,
   numericProp,
   BORDER_LEFT,
+  makeStringProp,
   BORDER_SURROUND,
   createNamespace,
   makeNumericProp,
@@ -17,14 +18,11 @@ export default defineComponent({
   props: {
     info: String,
     mask: truthProp,
+    value: makeStringProp(''),
     gutter: numericProp,
     length: makeNumericProp(6),
     focused: Boolean,
     errorInfo: String,
-    value: {
-      type: String,
-      default: '',
-    },
   },
 
   emits: ['focus'],

packages/vant/src/picker/Picker.tsx

@@ -13,6 +13,7 @@ import {
   unitToPx,
   truthProp,
   preventDefault,
+  makeStringProp,
   createNamespace,
   makeNumericProp,
   BORDER_UNSET_TOP_BOTTOM,
@@ -61,15 +62,12 @@ export default defineComponent({
     // 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: () => [],
     },
-    toolbarPosition: {
-      type: String as PropType<PickerToolbarPosition>,
-      default: 'top',
-    },
   }),
 
   emits: ['confirm', 'cancel', 'change'],

packages/vant/src/popover/Popover.tsx

@@ -19,6 +19,7 @@ import {
   numericProp,
   unknownProp,
   BORDER_BOTTOM,
+  makeStringProp,
   createNamespace,
   ComponentInstance,
 } from '../utils';
@@ -72,8 +73,11 @@ export default defineComponent({
 
   props: {
     show: Boolean,
+    theme: makeStringProp<PopoverTheme>('light'),
     overlay: Boolean,
+    trigger: makeStringProp<PopoverTrigger>('click'),
     duration: numericProp,
+    placement: makeStringProp<PopoverPlacement>('bottom'),
     iconPrefix: String,
     overlayClass: unknownProp,
     overlayStyle: Object as PropType<CSSProperties>,
@@ -84,22 +88,10 @@ export default defineComponent({
       type: Array as unknown as PropType<[number, number]>,
       default: () => [0, 8],
     },
-    theme: {
-      type: String as PropType<PopoverTheme>,
-      default: 'light',
-    },
-    trigger: {
-      type: String as PropType<PopoverTrigger>,
-      default: 'click',
-    },
     actions: {
       type: Array as PropType<PopoverAction[]>,
       default: () => [],
     },
-    placement: {
-      type: String as PropType<PopoverPlacement>,
-      default: 'bottom',
-    },
     teleport: {
       type: [String, Object] as PropType<TeleportProps['to']>,
       default: 'body',

packages/vant/src/popup/Popup.tsx

@@ -4,7 +4,6 @@ import {
   provide,
   Teleport,
   computed,
-  PropType,
   onMounted,
   Transition,
   onActivated,
@@ -15,7 +14,13 @@ import {
 
 // Utils
 import { popupSharedProps } from './shared';
-import { extend, isDef, callInterceptor, createNamespace } from '../utils';
+import {
+  isDef,
+  extend,
+  makeStringProp,
+  callInterceptor,
+  createNamespace,
+} from '../utils';
 
 // Composables
 import { useEventListener } from '@vant/use';
@@ -47,23 +52,14 @@ export default defineComponent({
 
   props: extend({}, popupSharedProps, {
     round: Boolean,
+    position: makeStringProp<PopupPosition>('center'),
+    closeIcon: makeStringProp('cross'),
     closeable: Boolean,
     transition: String,
     iconPrefix: String,
     closeOnPopstate: Boolean,
+    closeIconPosition: makeStringProp<PopupCloseIconPosition>('top-right'),
     safeAreaInsetBottom: Boolean,
-    position: {
-      type: String as PropType<PopupPosition>,
-      default: 'center',
-    },
-    closeIcon: {
-      type: String,
-      default: 'cross',
-    },
-    closeIconPosition: {
-      type: String as PropType<PopupCloseIconPosition>,
-      default: 'top-right',
-    },
   }),
 
   emits: [

packages/vant/src/rate/Rate.tsx

@@ -6,8 +6,9 @@ import {
   truthProp,
   numericProp,
   preventDefault,
-  createNamespace,
+  makeStringProp,
   makeNumericProp,
+  createNamespace,
 } from '../utils';
 
 // Composables
@@ -57,11 +58,13 @@ export default defineComponent({
 
   props: {
     size: numericProp,
+    icon: makeStringProp('star'),
     color: String,
     count: makeNumericProp(5),
     gutter: numericProp,
     readonly: Boolean,
     disabled: Boolean,
+    voidIcon: makeStringProp('star-o'),
     allowHalf: Boolean,
     voidColor: String,
     touchable: truthProp,
@@ -71,14 +74,6 @@ export default defineComponent({
       type: Number,
       default: 0,
     },
-    icon: {
-      type: String,
-      default: 'star',
-    },
-    voidIcon: {
-      type: String,
-      default: 'star-o',
-    },
   },
 
   emits: ['change', 'update:modelValue'],

packages/vant/src/row/Row.tsx

@@ -5,7 +5,12 @@ import {
   InjectionKey,
   defineComponent,
 } from 'vue';
-import { truthProp, makeNumericProp, createNamespace } from '../utils';
+import {
+  truthProp,
+  makeStringProp,
+  makeNumericProp,
+  createNamespace,
+} from '../utils';
 import { useChildren } from '@vant/use';
 
 const [name, bem] = createNamespace('row');
@@ -31,14 +36,11 @@ export default defineComponent({
   name,
 
   props: {
+    tag: makeStringProp<keyof HTMLElementTagNameMap>('div'),
     wrap: truthProp,
     align: String as PropType<RowAlign>,
     gutter: makeNumericProp(0),
     justify: String as PropType<RowJustify>,
-    tag: {
-      type: String as PropType<keyof HTMLElementTagNameMap>,
-      default: 'div',
-    },
   },
 
   setup(props, { slots }) {

packages/vant/src/search/Search.tsx

@@ -1,4 +1,4 @@
-import { ref, PropType, defineComponent, ExtractPropTypes } from 'vue';
+import { ref, defineComponent, ExtractPropTypes } from 'vue';
 
 // Utils
 import {
@@ -6,6 +6,7 @@ import {
   extend,
   truthProp,
   preventDefault,
+  makeStringProp,
   createNamespace,
 } from '../utils';
 import { fieldSharedProps } from '../field/Field';
@@ -23,18 +24,12 @@ const [name, bem, t] = createNamespace('search');
 
 const props = extend({}, fieldSharedProps, {
   label: String,
+  shape: makeStringProp<SearchShape>('square'),
+  leftIcon: makeStringProp('search'),
   clearable: truthProp,
   actionText: String,
   background: String,
   showAction: Boolean,
-  shape: {
-    type: String as PropType<SearchShape>,
-    default: 'square',
-  },
-  leftIcon: {
-    type: String,
-    default: 'search',
-  },
 });
 
 export type SearchProps = ExtractPropTypes<typeof props>;

packages/vant/src/skeleton/Skeleton.tsx

@@ -4,14 +4,17 @@ import {
   truthProp,
   numericProp,
   getSizeStyle,
-  createNamespace,
+  makeStringProp,
   makeNumericProp,
+  createNamespace,
 } from '../utils';
 
 const [name, bem] = createNamespace('skeleton');
 const DEFAULT_ROW_WIDTH = '100%';
 const DEFAULT_LAST_ROW_WIDTH = '60%';
 
+export type SkeletonAvatarShape = 'square' | 'round';
+
 export default defineComponent({
   name,
 
@@ -24,10 +27,7 @@ export default defineComponent({
     animate: truthProp,
     avatarSize: numericProp,
     titleWidth: numericProp,
-    avatarShape: {
+    avatarShape: makeStringProp<SkeletonAvatarShape>('round'),
-      type: String as PropType<'square' | 'round'>,
-      default: 'round',
-    },
     rowWidth: {
       type: [Number, String, Array] as PropType<
         number | string | (number | string)[]

packages/vant/src/steps/Steps.tsx

@@ -1,5 +1,5 @@
-import { PropType, defineComponent, ExtractPropTypes, InjectionKey } from 'vue';
+import { defineComponent, ExtractPropTypes, InjectionKey } from 'vue';
-import { makeNumericProp, createNamespace } from '../utils';
+import { makeStringProp, makeNumericProp, createNamespace } from '../utils';
 import { useChildren } from '@vant/use';
 
 const [name, bem] = createNamespace('steps');
@@ -8,19 +8,13 @@ export type StepsDirection = 'horizontal' | 'vertical';
 
 const props = {
   active: makeNumericProp(0),
+  direction: makeStringProp<StepsDirection>('horizontal'),
+  activeIcon: makeStringProp('checked'),
   iconPrefix: String,
   finishIcon: String,
   activeColor: String,
   inactiveIcon: String,
   inactiveColor: String,
-  direction: {
-    type: String as PropType<StepsDirection>,
-    default: 'horizontal',
-  },
-  activeIcon: {
-    type: String,
-    default: 'checked',
-  },
 };
 
 export type StepsProvide = {

packages/vant/src/sticky/Sticky.tsx

@@ -16,8 +16,9 @@ import {
   numericProp,
   getScrollTop,
   getZIndexStyle,
-  createNamespace,
+  makeStringProp,
   makeNumericProp,
+  createNamespace,
 } from '../utils';
 
 // Composables
@@ -33,13 +34,10 @@ export default defineComponent({
 
   props: {
     zIndex: numericProp,
+    position: makeStringProp<StickyPosition>('top'),
     container: Object as PropType<Element>,
     offsetTop: makeNumericProp(0),
     offsetBottom: makeNumericProp(0),
-    position: {
-      type: String as PropType<StickyPosition>,
-      default: 'top',
-    },
   },
 
   emits: ['scroll', 'change'],

packages/vant/src/submit-bar/SubmitBar.tsx

@@ -1,5 +1,10 @@
 import { PropType, CSSProperties, defineComponent } from 'vue';
-import { truthProp, makeNumericProp, createNamespace } from '../utils';
+import {
+  truthProp,
+  makeStringProp,
+  makeNumericProp,
+  createNamespace,
+} from '../utils';
 
 // Components
 import { Icon } from '../icon';
@@ -16,21 +21,15 @@ export default defineComponent({
     price: Number,
     tipIcon: String,
     loading: Boolean,
+    currency: makeStringProp('¥'),
     disabled: Boolean,
     textAlign: String as PropType<CSSProperties['textAlign']>,
     buttonText: String,
+    buttonType: makeStringProp<ButtonType>('danger'),
     buttonColor: String,
     suffixLabel: String,
     decimalLength: makeNumericProp(2),
     safeAreaInsetBottom: truthProp,
-    currency: {
-      type: String,
-      default: '¥',
-    },
-    buttonType: {
-      type: String as PropType<ButtonType>,
-      default: 'danger',
-    },
   },
 
   emits: ['submit'],

packages/vant/src/tabs/Tabs.tsx

@@ -26,6 +26,7 @@ import {
   Interceptor,
   getVisibleTop,
   getElementTop,
+  makeStringProp,
   callInterceptor,
   createNamespace,
   makeNumericProp,
@@ -60,6 +61,7 @@ import type { TabsProvide, TabsType } from './types';
 const [name, bem] = createNamespace('tabs');
 
 const props = {
+  type: makeStringProp<TabsType>('line'),
   color: String,
   border: Boolean,
   sticky: Boolean,
@@ -78,10 +80,6 @@ const props = {
   swipeThreshold: makeNumericProp(5),
   titleActiveColor: String,
   titleInactiveColor: String,
-  type: {
-    type: String as PropType<TabsType>,
-    default: 'line',
-  },
 };
 
 export type TabsProps = ExtractPropTypes<typeof props>;

packages/vant/src/tag/Tag.tsx

@@ -1,5 +1,5 @@
-import { CSSProperties, PropType, Transition, defineComponent } from 'vue';
+import { CSSProperties, Transition, defineComponent } from 'vue';
-import { truthProp, createNamespace } from '../utils';
+import { truthProp, makeStringProp, createNamespace } from '../utils';
 import { Icon } from '../icon';
 
 const [name, bem] = createNamespace('tag');
@@ -13,15 +13,12 @@ export default defineComponent({
     size: String,
     mark: Boolean,
     show: truthProp,
+    type: makeStringProp<TagType>('default'),
     color: String,
     plain: Boolean,
     round: Boolean,
     textColor: String,
     closeable: Boolean,
-    type: {
-      type: String as PropType<TagType>,
-      default: 'default',
-    },
   },
 
   emits: ['close'],

packages/vant/src/toast/Toast.tsx

@@ -8,7 +8,13 @@ import {
 } from 'vue';
 
 // Utils
-import { isDef, unknownProp, numericProp, createNamespace } from '../utils';
+import {
+  isDef,
+  unknownProp,
+  numericProp,
+  makeStringProp,
+  createNamespace,
+} from '../utils';
 import { lockClick } from './lock-click';
 
 // Components
@@ -27,33 +33,24 @@ export default defineComponent({
   props: {
     icon: String,
     show: Boolean,
+    type: makeStringProp<ToastType>('text'),
     overlay: Boolean,
     message: numericProp,
     iconSize: numericProp,
+    position: makeStringProp<ToastPosition>('middle'),
     className: unknownProp,
     iconPrefix: String,
+    transition: makeStringProp('van-fade'),
     loadingType: String as PropType<LoadingType>,
     forbidClick: Boolean,
     overlayClass: unknownProp,
     overlayStyle: Object as PropType<CSSProperties>,
     closeOnClick: Boolean,
     closeOnClickOverlay: Boolean,
-    type: {
-      type: String as PropType<ToastType>,
-      default: 'text',
-    },
     duration: {
       type: Number,
       default: 2000,
     },
-    position: {
-      type: String as PropType<ToastPosition>,
-      default: 'middle',
-    },
-    transition: {
-      type: String,
-      default: 'van-fade',
-    },
   },
 
   emits: ['update:show'],

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

@@ -1,7 +1,12 @@
 import { PropType, defineComponent } from 'vue';
 
 // Utils
-import { addUnit, createNamespace, makeNumericProp } from '../utils';
+import {
+  addUnit,
+  makeStringProp,
+  makeNumericProp,
+  createNamespace,
+} from '../utils';
 
 // Components
 import { Icon } from '../icon';
@@ -31,6 +36,7 @@ export default defineComponent({
   props: {
     max: makeNumericProp(Infinity),
     height: makeNumericProp(300),
+    selectedIcon: makeStringProp('success'),
     mainActiveIndex: makeNumericProp(0),
     items: {
       type: Array as PropType<TreeSelectItem[]>,
@@ -42,10 +48,6 @@ export default defineComponent({
       >,
       default: 0,
     },
-    selectedIcon: {
-      type: String,
-      default: 'success',
-    },
   },
 
   emits: [

packages/vant/src/uploader/Uploader.tsx

@@ -15,6 +15,7 @@ import {
   numericProp,
   Interceptor,
   getSizeStyle,
+  makeStringProp,
   makeNumericProp,
   ComponentInstance,
 } from '../utils';
@@ -50,12 +51,16 @@ import type {
 
 const props = {
   name: makeNumericProp(''),
+  accept: makeStringProp('image/*'),
   capture: String,
   multiple: Boolean,
   disabled: Boolean,
   readonly: Boolean,
   lazyLoad: Boolean,
   maxCount: makeNumericProp(Number.MAX_VALUE),
+  imageFit: makeStringProp<ImageFit>('cover'),
+  resultType: makeStringProp<UploaderResultType>('dataUrl'),
+  uploadIcon: makeStringProp('photograph'),
   uploadText: String,
   deletable: truthProp,
   afterRead: Function as PropType<UploaderAfterRead>,
@@ -66,10 +71,6 @@ const props = {
   previewImage: truthProp,
   previewOptions: Object as PropType<ImagePreviewOptions>,
   previewFullImage: truthProp,
-  accept: {
-    type: String,
-    default: 'image/*',
-  },
   modelValue: {
     type: Array as PropType<UploaderFileListItem[]>,
     default: () => [],
@@ -78,18 +79,6 @@ const props = {
     type: [Number, String, Function] as PropType<UploaderMaxSize>,
     default: Number.MAX_VALUE,
   },
-  imageFit: {
-    type: String as PropType<ImageFit>,
-    default: 'cover',
-  },
-  resultType: {
-    type: String as PropType<UploaderResultType>,
-    default: 'dataUrl',
-  },
-  uploadIcon: {
-    type: String,
-    default: 'photograph',
-  },
 };
 
 export type UploaderProps = ExtractPropTypes<typeof props>;

packages/vant/src/utils/basic.ts

@@ -15,7 +15,11 @@ export const truthProp = {
   default: true as const,
 };
 export const makeNumericProp = <T>(defaultVal: T) => ({
-  type: [Number, String],
+  type: numericProp,
+  default: defaultVal,
+});
+export const makeStringProp = <T>(defaultVal: T) => ({
+  type: String as unknown as PropType<T>,
   default: defaultVal,
 });