From be96fa2233f6af48616164d31117fbfa9ff7b808 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Mon, 8 Jul 2019 16:18:19 +0800
Subject: [PATCH] [improvement] make props less magic (#3775)

---
 src/action-sheet/index.tsx                    |  9 +--
 src/address-edit/index.js                     |  4 +-
 src/address-list/index.tsx                    | 23 +++---
 src/area/index.js                             |  2 +-
 src/cell/shared.ts                            |  6 +-
 src/checkbox-group/index.js                   |  7 +-
 src/circle/index.js                           | 10 ++-
 src/collapse-item/index.js                    |  2 +-
 src/contact-list/index.tsx                    | 76 +++++++++++--------
 src/coupon-cell/index.tsx                     |  5 +-
 src/coupon-list/index.js                      | 10 ++-
 src/datetime-picker/index.js                  | 10 ++-
 src/dropdown-item/index.js                    |  7 +-
 src/field/index.js                            |  6 +-
 src/goods-action-icon/index.tsx               |  2 +-
 src/grid/index.js                             |  2 +-
 src/icon/index.tsx                            |  4 +-
 src/image-preview/ImagePreview.js             | 12 ++-
 src/image/index.js                            |  4 +-
 src/index-anchor/index.js                     |  2 +-
 src/info/index.tsx                            |  2 +-
 src/loading/index.tsx                         |  4 +-
 src/mixins/checkbox.js                        |  2 +-
 src/mixins/popup/index.js                     |  2 +-
 src/notice-bar/index.js                       |  2 +-
 src/notify/Notify.tsx                         |  2 +-
 src/number-keyboard/Key.js                    |  7 +-
 src/overlay/index.tsx                         |  5 +-
 src/pagination/index.js                       | 15 +++-
 src/password-input/index.tsx                  |  2 +-
 src/picker/PickerColumn.js                    |  7 +-
 src/picker/index.js                           | 10 ++-
 .../test/__snapshots__/index.spec.js.snap     |  4 +-
 src/picker/test/index.spec.js                 |  3 +-
 src/popup/index.js                            |  5 +-
 src/rate/index.tsx                            |  9 ++-
 src/sidebar-item/index.js                     |  2 +-
 src/skeleton/index.tsx                        |  5 +-
 src/sku/Sku.js                                | 16 ++--
 src/sku/components/SkuRowItem.js              |  7 +-
 src/sku/components/SkuStepper.js              | 14 +++-
 src/slider/index.js                           | 10 ++-
 src/stepper/index.js                          | 12 +--
 src/steps/index.js                            |  5 +-
 src/submit-bar/index.tsx                      |  7 +-
 src/swipe-cell/index.js                       |  2 +-
 src/swipe/index.js                            | 21 ++---
 src/tab/index.js                              |  2 +-
 src/tabbar-item/index.js                      |  6 +-
 src/tabbar/index.js                           |  2 +-
 src/tabs/index.js                             | 29 +++----
 src/toast/Toast.js                            |  2 +-
 src/tree-select/index.tsx                     | 18 +++--
 src/uploader/index.js                         | 21 ++---
 src/utils/create/component.ts                 | 24 ------
 55 files changed, 283 insertions(+), 206 deletions(-)

diff --git a/src/action-sheet/index.tsx b/src/action-sheet/index.tsx
index f8846fe6c..cd64dba6f 100644
--- a/src/action-sheet/index.tsx
+++ b/src/action-sheet/index.tsx
@@ -21,7 +21,7 @@ export type ActionSheetItem = {
 
 export type ActionSheetProps = PopupMixinProps & {
   title?: string;
-  actions: ActionSheetItem[];
+  actions?: ActionSheetItem[];
   duration: number;
   cancelText?: string;
   closeOnClickAction?: boolean;
@@ -126,7 +126,7 @@ function ActionSheet(
       {...inherit(ctx, true)}
     >
       {Header()}
-      {props.actions.map(Option)}
+      {props.actions && props.actions.map(Option)}
       {Content()}
       {CancelText()}
     </Popup>
@@ -137,14 +137,11 @@ ActionSheet.props = {
   ...PopupMixin.props,
   title: String,
   actions: Array,
+  duration: Number,
   cancelText: String,
   getContainer: [String, Function],
   closeOnClickAction: Boolean,
   safeAreaInsetBottom: Boolean,
-  duration: {
-    type: Number,
-    default: null
-  },
   overlay: {
     type: Boolean,
     default: true
diff --git a/src/address-edit/index.js b/src/address-edit/index.js
index f1a0660f8..5b006ba7b 100644
--- a/src/address-edit/index.js
+++ b/src/address-edit/index.js
@@ -226,11 +226,11 @@ export default createComponent({
   },
 
   render(h) {
-    const { data, errorInfo } = this;
+    const { data, errorInfo, searchResult } = this;
     const onFocus = name => () => this.onFocus(name);
 
     // hide bottom field when use search && detail get focused
-    const hideBottomFields = this.searchResult.length && this.detailFocused;
+    const hideBottomFields = searchResult && searchResult.length && this.detailFocused;
 
     return (
       <div class={bem()}>
diff --git a/src/address-list/index.tsx b/src/address-list/index.tsx
index 987688811..bd8e75210 100644
--- a/src/address-list/index.tsx
+++ b/src/address-list/index.tsx
@@ -13,8 +13,8 @@ export type AddressListProps = {
   switchable: boolean;
   disabledText?: string;
   addButtonText?: string;
-  list: AddressItemData[];
-  disabledList: AddressItemData[];
+  list?: AddressItemData[];
+  disabledList?: AddressItemData[];
 };
 
 export type AddressListSlots = DefaultSlots & {
@@ -29,8 +29,12 @@ function AddressList(
   slots: AddressListSlots,
   ctx: RenderContext<AddressListProps>
 ) {
-  const getList = (list: AddressItemData[], disabled?: boolean) =>
-    list.map((item, index) => (
+  function renderList(list?: AddressItemData[], disabled?: boolean) {
+    if (!list) {
+      return;
+    }
+
+    return list.map((item, index) => (
       <AddressItem
         data={item}
         key={item.id}
@@ -44,9 +48,10 @@ function AddressList(
         }}
       />
     ));
+  }
 
-  const List = getList(props.list);
-  const DisabledList = getList(props.disabledList, true);
+  const List = renderList(props.list);
+  const DisabledList = renderList(props.disabledList, true);
 
   return (
     <div class={bem()} {...inherit(ctx)}>
@@ -59,9 +64,7 @@ function AddressList(
       >
         {List}
       </RadioGroup>
-      {props.disabledText && (
-        <div class={bem('disabled-text')}>{props.disabledText}</div>
-      )}
+      {props.disabledText && <div class={bem('disabled-text')}>{props.disabledText}</div>}
       {DisabledList}
       {slots.default && slots.default()}
       <Button
@@ -83,7 +86,7 @@ AddressList.props = {
   disabledList: Array,
   disabledText: String,
   addButtonText: String,
-  value: [String, Number],
+  value: [Number, String],
   switchable: {
     type: Boolean,
     default: true
diff --git a/src/area/index.js b/src/area/index.js
index 7928b88f8..1c2037b03 100644
--- a/src/area/index.js
+++ b/src/area/index.js
@@ -13,7 +13,7 @@ export default createComponent({
       default: () => ({})
     },
     columnsNum: {
-      type: [String, Number],
+      type: [Number, String],
       default: 3
     }
   },
diff --git a/src/cell/shared.ts b/src/cell/shared.ts
index dba417a2c..127007c38 100644
--- a/src/cell/shared.ts
+++ b/src/cell/shared.ts
@@ -27,9 +27,9 @@ export const cellProps = {
   titleClass: null as any,
   valueClass: null as any,
   labelClass: null as any,
-  title: [String, Number],
-  value: [String, Number],
-  label: [String, Number],
+  title: [Number, String],
+  value: [Number, String],
+  label: [Number, String],
   arrowDirection: String,
   border: {
     type: Boolean,
diff --git a/src/checkbox-group/index.js b/src/checkbox-group/index.js
index 25facb784..332ac5948 100644
--- a/src/checkbox-group/index.js
+++ b/src/checkbox-group/index.js
@@ -8,8 +8,11 @@ export default createComponent({
 
   props: {
     max: Number,
-    value: Array,
-    disabled: Boolean
+    disabled: Boolean,
+    value: {
+      type: Array,
+      default: () => []
+    }
   },
 
   watch: {
diff --git a/src/circle/index.js b/src/circle/index.js
index 4a97bd2f8..54738b5e7 100644
--- a/src/circle/index.js
+++ b/src/circle/index.js
@@ -13,8 +13,14 @@ function format(rate) {
 export default createComponent({
   props: {
     text: String,
-    value: Number,
-    speed: Number,
+    value: {
+      type: Number,
+      default: 0
+    },
+    speed: {
+      type: Number,
+      default: 0
+    },
     size: {
       type: String,
       default: '100px'
diff --git a/src/collapse-item/index.js b/src/collapse-item/index.js
index b5a0fb355..2b463c93c 100644
--- a/src/collapse-item/index.js
+++ b/src/collapse-item/index.js
@@ -12,7 +12,7 @@ export default createComponent({
 
   props: {
     ...cellProps,
-    name: [String, Number],
+    name: [Number, String],
     disabled: Boolean,
     isLink: {
       type: Boolean,
diff --git a/src/contact-list/index.tsx b/src/contact-list/index.tsx
index d89e44c6d..f5692991e 100644
--- a/src/contact-list/index.tsx
+++ b/src/contact-list/index.tsx
@@ -19,7 +19,7 @@ export type ContactListItem = {
 
 export type ContactListProps = {
   value?: any;
-  list: ContactListItem[];
+  list?: ContactListItem[];
   addText?: string;
 };
 
@@ -31,39 +31,49 @@ function ContactList(
   slots: DefaultSlots,
   ctx: RenderContext<ContactListProps>
 ) {
-  const List = props.list.map((item, index) => {
-    const onClick = () => {
-      emit(ctx, 'input', item.id);
-      emit(ctx, 'select', item, index);
-    };
+  const List =
+    props.list &&
+    props.list.map((item, index) => {
+      function onClick() {
+        emit(ctx, 'input', item.id);
+        emit(ctx, 'select', item, index);
+      }
 
-    return (
-      <Cell
-        key={item.id}
-        isLink
-        class={bem('item')}
-        valueClass={bem('item-value')}
-        scopedSlots={{
-          default: () => (
-            <Radio name={item.id} iconSize={16} checkedColor={RED} onClick={onClick}>
-              <div class={bem('name')}>{`${item.name}，${item.tel}`}</div>
-            </Radio>
-          ),
-          'right-icon': () => (
-            <Icon
-              name="edit"
-              class={bem('edit')}
-              onClick={event => {
-                event.stopPropagation();
-                emit(ctx, 'edit', item, index);
-              }}
-            />
-          )
-        }}
-        onClick={onClick}
-      />
-    );
-  });
+      function Content() {
+        return (
+          <Radio name={item.id} iconSize={16} checkedColor={RED} onClick={onClick}>
+            <div class={bem('name')}>{`${item.name}，${item.tel}`}</div>
+          </Radio>
+        );
+      }
+
+      function RightIcon() {
+        return (
+          <Icon
+            name="edit"
+            class={bem('edit')}
+            onClick={event => {
+              event.stopPropagation();
+              emit(ctx, 'edit', item, index);
+            }}
+          />
+        );
+      }
+
+      return (
+        <Cell
+          key={item.id}
+          isLink
+          class={bem('item')}
+          valueClass={bem('item-value')}
+          scopedSlots={{
+            default: Content,
+            'right-icon': RightIcon
+          }}
+          onClick={onClick}
+        />
+      );
+    });
 
   return (
     <div class={bem()} {...inherit(ctx)}>
diff --git a/src/coupon-cell/index.tsx b/src/coupon-cell/index.tsx
index 5cba96912..85958e481 100644
--- a/src/coupon-cell/index.tsx
+++ b/src/coupon-cell/index.tsx
@@ -60,7 +60,10 @@ CouponCell.model = {
 
 CouponCell.props = {
   title: String,
-  coupons: Array,
+  coupons: {
+    type: Array,
+    default: () => []
+  },
   currency: {
     type: String,
     default: '¥'
diff --git a/src/coupon-list/index.js b/src/coupon-list/index.js
index c376a4ff8..a97b4bf9c 100644
--- a/src/coupon-list/index.js
+++ b/src/coupon-list/index.js
@@ -15,8 +15,6 @@ export default createComponent({
 
   props: {
     code: String,
-    coupons: Array,
-    disabledCoupons: Array,
     closeButtonText: String,
     inputPlaceholder: String,
     enabledTitle: String,
@@ -32,6 +30,14 @@ export default createComponent({
       type: Number,
       default: -1
     },
+    coupons: {
+      type: Array,
+      default: () => []
+    },
+    disabledCoupons: {
+      type: Array,
+      default: () => []
+    },
     displayedCouponIndex: {
       type: Number,
       default: -1
diff --git a/src/datetime-picker/index.js b/src/datetime-picker/index.js
index 40a838d6e..df90d3fa9 100644
--- a/src/datetime-picker/index.js
+++ b/src/datetime-picker/index.js
@@ -18,8 +18,14 @@ export default createComponent({
     ...pickerProps,
     value: null,
     filter: Function,
-    minHour: Number,
-    minMinute: Number,
+    minHour: {
+      type: Number,
+      default: 0
+    },
+    minMinute: {
+      type: Number,
+      default: 0
+    },
     type: {
       type: String,
       default: 'datetime'
diff --git a/src/dropdown-item/index.js b/src/dropdown-item/index.js
index 42d148b89..3e572cc07 100644
--- a/src/dropdown-item/index.js
+++ b/src/dropdown-item/index.js
@@ -12,9 +12,12 @@ export default createComponent({
   props: {
     value: null,
     title: String,
-    options: Array,
     disabled: Boolean,
-    titleClass: String
+    titleClass: String,
+    options: {
+      type: Array,
+      default: () => []
+    }
   },
 
   data() {
diff --git a/src/field/index.js b/src/field/index.js
index 2c92daf9e..6bea1001d 100644
--- a/src/field/index.js
+++ b/src/field/index.js
@@ -14,15 +14,15 @@ export default createComponent({
   props: {
     ...cellProps,
     error: Boolean,
+    readonly: Boolean,
+    autosize: [Boolean, Object],
     leftIcon: String,
     rightIcon: String,
-    readonly: Boolean,
     clearable: Boolean,
-    labelWidth: [String, Number],
     labelClass: null,
+    labelWidth: [Number, String],
     labelAlign: String,
     inputAlign: String,
-    autosize: [Boolean, Object],
     errorMessage: String,
     errorMessageAlign: String,
     type: {
diff --git a/src/goods-action-icon/index.tsx b/src/goods-action-icon/index.tsx
index 0f7d1a967..f085eefc7 100644
--- a/src/goods-action-icon/index.tsx
+++ b/src/goods-action-icon/index.tsx
@@ -58,7 +58,7 @@ GoodsActionIcon.props = {
   ...routeProps,
   text: String,
   icon: String,
-  info: [String, Number],
+  info: [Number, String],
   iconClass: null as any
 };
 
diff --git a/src/grid/index.js b/src/grid/index.js
index 15f37912f..9578c8f84 100644
--- a/src/grid/index.js
+++ b/src/grid/index.js
@@ -7,8 +7,8 @@ export default createComponent({
   mixins: [ParentMixin('vanGrid')],
 
   props: {
-    gutter: [Number, String],
     square: Boolean,
+    gutter: [Number, String],
     clickable: Boolean,
     columnNum: {
       type: Number,
diff --git a/src/icon/index.tsx b/src/icon/index.tsx
index 22a85e735..6f0a98242 100644
--- a/src/icon/index.tsx
+++ b/src/icon/index.tsx
@@ -52,9 +52,9 @@ function Icon(
 
 Icon.props = {
   name: String,
-  size: [String, Number],
+  size: [Number, String],
   color: String,
-  info: [String, Number],
+  info: [Number, String],
   tag: {
     type: String,
     default: 'i'
diff --git a/src/image-preview/ImagePreview.js b/src/image-preview/ImagePreview.js
index f90c3226e..d1fd56969 100644
--- a/src/image-preview/ImagePreview.js
+++ b/src/image-preview/ImagePreview.js
@@ -26,12 +26,14 @@ export default createComponent({
   ],
 
   props: {
-    images: Array,
     className: null,
     lazyLoad: Boolean,
     asyncClose: Boolean,
-    startPosition: Number,
     showIndicators: Boolean,
+    images: {
+      type: Array,
+      default: () => []
+    },
     loop: {
       type: Boolean,
       default: true
@@ -44,6 +46,10 @@ export default createComponent({
       type: Boolean,
       default: true
     },
+    startPosition: {
+      type: Number,
+      default: 0
+    },
     minZoom: {
       type: Number,
       default: 1 / 3
@@ -54,7 +60,7 @@ export default createComponent({
     },
     overlayClass: {
       type: String,
-      default: 'van-image-preview__overlay'
+      default: bem('overlay')
     },
     closeOnClickOverlay: {
       type: Boolean,
diff --git a/src/image/index.js b/src/image/index.js
index b8f47c4fb..533c20c54 100644
--- a/src/image/index.js
+++ b/src/image/index.js
@@ -9,8 +9,8 @@ export default createComponent({
     fit: String,
     alt: String,
     lazyLoad: Boolean,
-    width: [String, Number],
-    height: [String, Number]
+    width: [Number, String],
+    height: [Number, String]
   },
 
   data() {
diff --git a/src/index-anchor/index.js b/src/index-anchor/index.js
index 0582121ea..acb726ded 100644
--- a/src/index-anchor/index.js
+++ b/src/index-anchor/index.js
@@ -7,7 +7,7 @@ export default createComponent({
   mixins: [ChildrenMixin('vanIndexBar', { indexKey: 'childrenIndex' })],
 
   props: {
-    index: [String, Number]
+    index: [Number, String]
   },
 
   data() {
diff --git a/src/info/index.tsx b/src/info/index.tsx
index 9e57b527b..63061ffad 100644
--- a/src/info/index.tsx
+++ b/src/info/index.tsx
@@ -29,7 +29,7 @@ function Info(
 }
 
 Info.props = {
-  info: [String, Number]
+  info: [Number, String]
 };
 
 export default createComponent<InfoProps>(Info);
diff --git a/src/loading/index.tsx b/src/loading/index.tsx
index 015d5769e..414eac39c 100644
--- a/src/loading/index.tsx
+++ b/src/loading/index.tsx
@@ -74,9 +74,9 @@ function Loading(
 }
 
 Loading.props = {
-  size: [String, Number],
-  textSize: [String, Number],
+  size: [Number, String],
   vertical: Boolean,
+  textSize: [Number, String],
   type: {
     type: String,
     default: 'circular'
diff --git a/src/mixins/checkbox.js b/src/mixins/checkbox.js
index 6977ac441..0b65c2011 100644
--- a/src/mixins/checkbox.js
+++ b/src/mixins/checkbox.js
@@ -11,8 +11,8 @@ export const CheckboxMixin = ({ parent, bem, role }) => ({
   props: {
     name: null,
     value: null,
-    iconSize: [String, Number],
     disabled: Boolean,
+    iconSize: [Number, String],
     checkedColor: String,
     labelPosition: String,
     labelDisabled: Boolean,
diff --git a/src/mixins/popup/index.js b/src/mixins/popup/index.js
index 5670ee408..3a0843376 100644
--- a/src/mixins/popup/index.js
+++ b/src/mixins/popup/index.js
@@ -29,7 +29,7 @@ export const PopupMixin = {
     // whether to close popup when click overlay
     closeOnClickOverlay: Boolean,
     // z-index
-    zIndex: [String, Number],
+    zIndex: [Number, String],
     // prevent body scroll
     lockScroll: {
       type: Boolean,
diff --git a/src/notice-bar/index.js b/src/notice-bar/index.js
index 9e8f083c9..a7e843a55 100644
--- a/src/notice-bar/index.js
+++ b/src/notice-bar/index.js
@@ -12,7 +12,7 @@ export default createComponent({
     wrapable: Boolean,
     background: String,
     delay: {
-      type: [String, Number],
+      type: [Number, String],
       default: 1
     },
     scrollable: {
diff --git a/src/notify/Notify.tsx b/src/notify/Notify.tsx
index c3a39d25a..7f55221a7 100644
--- a/src/notify/Notify.tsx
+++ b/src/notify/Notify.tsx
@@ -48,7 +48,7 @@ function Notify(
 Notify.props = {
   ...PopupMixin.props,
   className: null as any,
-  message: [String, Number],
+  message: [Number, String],
   getContainer: [String, Function],
   color: {
     type: String,
diff --git a/src/number-keyboard/Key.js b/src/number-keyboard/Key.js
index b9169ed72..bf72ecd9e 100644
--- a/src/number-keyboard/Key.js
+++ b/src/number-keyboard/Key.js
@@ -5,8 +5,11 @@ const [createComponent, bem] = createNamespace('key');
 export default createComponent({
   props: {
     type: String,
-    theme: Array,
-    text: [String, Number]
+    text: [Number, String],
+    theme: {
+      type: Array,
+      default: () => []
+    }
   },
 
   data() {
diff --git a/src/overlay/index.tsx b/src/overlay/index.tsx
index 1de4784ba..57c9f5a33 100644
--- a/src/overlay/index.tsx
+++ b/src/overlay/index.tsx
@@ -54,16 +54,13 @@ function Overlay(
 
 Overlay.props = {
   show: Boolean,
+  duration: [Number, String],
   className: null as any,
   customStyle: null as any,
   zIndex: {
     type: [Number, String],
     default: 1
   },
-  duration: {
-    type: [Number, String],
-    default: null
-  }
 };
 
 export default createComponent<OverlayProps, OverlayEvents>(Overlay);
diff --git a/src/pagination/index.js b/src/pagination/index.js
index f55f1b06c..81ad865fa 100644
--- a/src/pagination/index.js
+++ b/src/pagination/index.js
@@ -8,12 +8,21 @@ function makePage(number, text, active) {
 
 export default createComponent({
   props: {
-    value: Number,
     prevText: String,
     nextText: String,
-    pageCount: Number,
-    totalItems: Number,
     forceEllipses: Boolean,
+    value: {
+      type: Number,
+      default: 0
+    },
+    pageCount: {
+      type: Number,
+      default: 0
+    },
+    totalItems: {
+      type: Number,
+      default: 0
+    },
     mode: {
       type: String,
       default: 'multi'
diff --git a/src/password-input/index.tsx b/src/password-input/index.tsx
index 0b472b47b..446003dc6 100644
--- a/src/password-input/index.tsx
+++ b/src/password-input/index.tsx
@@ -60,8 +60,8 @@ function PasswordInput(
 
 PasswordInput.props = {
   info: String,
+  gutter: [Number, String],
   errorInfo: String,
-  gutter: [String, Number],
   mask: {
     type: Boolean,
     default: true
diff --git a/src/picker/PickerColumn.js b/src/picker/PickerColumn.js
index f3c2f8cdf..ca4236381 100644
--- a/src/picker/PickerColumn.js
+++ b/src/picker/PickerColumn.js
@@ -35,8 +35,11 @@ export default createComponent({
     className: String,
     itemHeight: Number,
     defaultIndex: Number,
-    initialOptions: Array,
-    visibleItemCount: Number
+    visibleItemCount: Number,
+    initialOptions: {
+      type: Array,
+      default: () => []
+    }
   },
 
   data() {
diff --git a/src/picker/index.js b/src/picker/index.js
index f62cda13e..a77417c09 100644
--- a/src/picker/index.js
+++ b/src/picker/index.js
@@ -11,8 +11,14 @@ const [createComponent, bem, t] = createNamespace('picker');
 export default createComponent({
   props: {
     ...pickerProps,
-    columns: Array,
-    defaultIndex: Number,
+    defaultIndex: {
+      type: Number,
+      default: 0
+    },
+    columns: {
+      type: Array,
+      default: () => []
+    },
     toolbarPosition: {
       type: String,
       default: 'top'
diff --git a/src/picker/test/__snapshots__/index.spec.js.snap b/src/picker/test/__snapshots__/index.spec.js.snap
index e1107b36c..295864757 100644
--- a/src/picker/test/__snapshots__/index.spec.js.snap
+++ b/src/picker/test/__snapshots__/index.spec.js.snap
@@ -2,7 +2,7 @@
 
 exports[`column watch default index 1`] = `
 <div class="van-picker-column">
-  <ul class="van-picker-column__wrapper" style="transform: translate3d(0, -75px, 0); transition-duration: 0ms; transition-property: none; line-height: 50px;">
+  <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 100px, 0); transition-duration: 0ms; transition-property: none; line-height: 50px;">
     <li class="van-ellipsis van-picker-column__item van-picker-column__item--disabled" style="height: 50px;">1</li>
     <li class="van-ellipsis van-picker-column__item" style="height: 50px;">1990</li>
     <li class="van-ellipsis van-picker-column__item" style="height: 50px;">1991</li>
@@ -16,7 +16,7 @@ exports[`column watch default index 1`] = `
 
 exports[`column watch default index 2`] = `
 <div class="van-picker-column">
-  <ul class="van-picker-column__wrapper" style="transform: translate3d(0, -125px, 0); transition-duration: 0ms; transition-property: none; line-height: 50px;">
+  <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 0px, 0); transition-duration: 0ms; transition-property: none; line-height: 50px;">
     <li class="van-ellipsis van-picker-column__item van-picker-column__item--disabled" style="height: 50px;">1</li>
     <li class="van-ellipsis van-picker-column__item" style="height: 50px;">1990</li>
     <li class="van-ellipsis van-picker-column__item" style="height: 50px;">1991</li>
diff --git a/src/picker/test/index.spec.js b/src/picker/test/index.spec.js
index edafbf54b..c19e4e99e 100644
--- a/src/picker/test/index.spec.js
+++ b/src/picker/test/index.spec.js
@@ -114,7 +114,8 @@ test('column watch default index', async () => {
     propsData: {
       initialOptions: [disabled, ...simpleColumn],
       valueKey: 'text',
-      itemHeight: 50
+      itemHeight: 50,
+      visibleItemCount: 5
     }
   });
 
diff --git a/src/popup/index.js b/src/popup/index.js
index bd71a4787..71a9cffe8 100644
--- a/src/popup/index.js
+++ b/src/popup/index.js
@@ -7,11 +7,8 @@ export default createComponent({
   mixins: [PopupMixin],
 
   props: {
+    duration: Number,
     transition: String,
-    duration: {
-      type: Number,
-      default: null
-    },
     position: {
       type: String,
       default: 'center'
diff --git a/src/rate/index.tsx b/src/rate/index.tsx
index 0616f99f3..b22135e26 100644
--- a/src/rate/index.tsx
+++ b/src/rate/index.tsx
@@ -154,12 +154,15 @@ function Rate(
 }
 
 Rate.props = {
-  value: Number,
-  size: [String, Number],
-  gutter: [String, Number],
+  size: [Number, String],
+  gutter: [Number, String],
   readonly: Boolean,
   disabled: Boolean,
   allowHalf: Boolean,
+  value: {
+    type: Number,
+    default: 0
+  },
   icon: {
     type: String,
     default: 'star'
diff --git a/src/sidebar-item/index.js b/src/sidebar-item/index.js
index b5ba38a44..3f87edd48 100644
--- a/src/sidebar-item/index.js
+++ b/src/sidebar-item/index.js
@@ -10,7 +10,7 @@ export default createComponent({
 
   props: {
     ...routeProps,
-    info: [String, Number],
+    info: [Number, String],
     title: String
   },
 
diff --git a/src/skeleton/index.tsx b/src/skeleton/index.tsx
index af98ae96e..58f247c11 100644
--- a/src/skeleton/index.tsx
+++ b/src/skeleton/index.tsx
@@ -84,9 +84,12 @@ function Skeleton(
 }
 
 Skeleton.props = {
-  row: Number,
   title: Boolean,
   avatar: Boolean,
+  row: {
+    type: Number,
+    default: 0
+  },
   loading: {
     type: Boolean,
     default: true
diff --git a/src/sku/Sku.js b/src/sku/Sku.js
index 2a6834bd3..fef237af1 100644
--- a/src/sku/Sku.js
+++ b/src/sku/Sku.js
@@ -20,21 +20,27 @@ export default createComponent({
   props: {
     sku: Object,
     goods: Object,
-    quota: Number,
     value: Boolean,
     buyText: String,
-    addCartText: String,
-    quotaUsed: Number,
     goodsId: [Number, String],
     hideStock: Boolean,
-    hideQuotaText: Boolean,
+    addCartText: String,
     stepperTitle: String,
     getContainer: Function,
+    hideQuotaText: Boolean,
+    resetStepperOnHide: Boolean,
     customSkuValidator: Function,
     closeOnClickOverlay: Boolean,
     disableStepperInput: Boolean,
-    resetStepperOnHide: Boolean,
     resetSelectedSkuOnHide: Boolean,
+    quota: {
+      type: Number,
+      default: 0
+    },
+    quotaUsed: {
+      type: Number,
+      default: 0
+    },
     initialSku: {
       type: Object,
       default: () => ({})
diff --git a/src/sku/components/SkuRowItem.js b/src/sku/components/SkuRowItem.js
index c1dc1de7d..cade376fa 100644
--- a/src/sku/components/SkuRowItem.js
+++ b/src/sku/components/SkuRowItem.js
@@ -5,11 +5,14 @@ const [createComponent] = createNamespace('sku-row-item');
 
 export default createComponent({
   props: {
-    skuList: Array,
     skuValue: Object,
     skuKeyStr: String,
     skuEventBus: Object,
-    selectedSku: Object
+    selectedSku: Object,
+    skuList: {
+      type: Array,
+      default: () => []
+    }
   },
 
   computed: {
diff --git a/src/sku/components/SkuStepper.js b/src/sku/components/SkuStepper.js
index f0fa91239..0f519194c 100644
--- a/src/sku/components/SkuStepper.js
+++ b/src/sku/components/SkuStepper.js
@@ -7,18 +7,24 @@ const { QUOTA_LIMIT, STOCK_LIMIT } = LIMIT_TYPE;
 
 export default createComponent({
   props: {
-    quota: Number,
-    quotaUsed: Number,
     hideStock: Boolean,
+    selectedSku: Object,
     skuEventBus: Object,
     skuStockNum: Number,
-    selectedSku: Object,
     selectedNum: Number,
     stepperTitle: String,
     hideQuotaText: Boolean,
     selectedSkuComb: Object,
     disableStepperInput: Boolean,
-    customStepperConfig: Object
+    customStepperConfig: Object,
+    quota: {
+      type: Number,
+      default: 0
+    },
+    quotaUsed: {
+      type: Number,
+      default: 0
+    }
   },
 
   data() {
diff --git a/src/slider/index.js b/src/slider/index.js
index 250474480..dd3cd1af4 100644
--- a/src/slider/index.js
+++ b/src/slider/index.js
@@ -8,12 +8,14 @@ export default createComponent({
   mixins: [TouchMixin],
 
   props: {
-    min: Number,
-    value: Number,
     disabled: Boolean,
     vertical: Boolean,
     activeColor: String,
     inactiveColor: String,
+    min: {
+      type: Number,
+      default: 0
+    },
     max: {
       type: Number,
       default: 100
@@ -22,6 +24,10 @@ export default createComponent({
       type: Number,
       default: 1
     },
+    value: {
+      type: Number,
+      default: 0
+    },
     barHeight: {
       type: String,
       default: '2px'
diff --git a/src/stepper/index.js b/src/stepper/index.js
index 5c8cd9345..9df870cea 100644
--- a/src/stepper/index.js
+++ b/src/stepper/index.js
@@ -10,24 +10,24 @@ export default createComponent({
     value: null,
     integer: Boolean,
     disabled: Boolean,
-    inputWidth: [String, Number],
-    buttonSize: [String, Number],
+    inputWidth: [Number, String],
+    buttonSize: [Number, String],
     asyncChange: Boolean,
     disableInput: Boolean,
     min: {
-      type: [String, Number],
+      type: [Number, String],
       default: 1
     },
     max: {
-      type: [String, Number],
+      type: [Number, String],
       default: Infinity
     },
     step: {
-      type: [String, Number],
+      type: [Number, String],
       default: 1
     },
     defaultValue: {
-      type: [String, Number],
+      type: [Number, String],
       default: 1
     }
   },
diff --git a/src/steps/index.js b/src/steps/index.js
index d6893dd6a..6d1c009f6 100644
--- a/src/steps/index.js
+++ b/src/steps/index.js
@@ -5,8 +5,11 @@ const [createComponent, bem] = createNamespace('steps');
 
 export default createComponent({
   props: {
-    active: Number,
     inactiveIcon: String,
+    active: {
+      type: Number,
+      default: 0
+    },
     direction: {
       type: String,
       default: 'horizontal'
diff --git a/src/submit-bar/index.tsx b/src/submit-bar/index.tsx
index cb9e47f84..50ff0aa82 100644
--- a/src/submit-bar/index.tsx
+++ b/src/submit-bar/index.tsx
@@ -94,17 +94,14 @@ function SubmitBar(
 
 SubmitBar.props = {
   tip: String,
-  tipIcon: String,
   label: String,
+  price: Number,
+  tipIcon: String,
   loading: Boolean,
   disabled: Boolean,
   buttonText: String,
   suffixLabel: String,
   safeAreaInsetBottom: Boolean,
-  price: {
-    type: Number,
-    default: null
-  },
   decimalLength: {
     type: Number,
     default: 2
diff --git a/src/swipe-cell/index.js b/src/swipe-cell/index.js
index c74710f2c..aecd512a9 100644
--- a/src/swipe-cell/index.js
+++ b/src/swipe-cell/index.js
@@ -22,7 +22,7 @@ export default createComponent({
     leftWidth: Number,
     rightWidth: Number,
     name: {
-      type: [String, Number],
+      type: [Number, String],
       default: ''
     }
   },
diff --git a/src/swipe/index.js b/src/swipe/index.js
index e8beee694..1675f5f05 100644
--- a/src/swipe/index.js
+++ b/src/swipe/index.js
@@ -25,23 +25,26 @@ export default createComponent({
     height: Number,
     autoplay: Number,
     vertical: Boolean,
-    initialSwipe: Number,
     indicatorColor: String,
     loop: {
       type: Boolean,
       default: true
     },
-    touchable: {
-      type: Boolean,
-      default: true
-    },
-    showIndicators: {
-      type: Boolean,
-      default: true
-    },
     duration: {
       type: Number,
       default: 500
+    },
+    touchable: {
+      type: Boolean,
+      default: true
+    },
+    initialSwipe: {
+      type: Number,
+      default: 0
+    },
+    showIndicators: {
+      type: Boolean,
+      default: true
     }
   },
 
diff --git a/src/tab/index.js b/src/tab/index.js
index dd5186e16..72ca1707e 100644
--- a/src/tab/index.js
+++ b/src/tab/index.js
@@ -8,7 +8,7 @@ export default createComponent({
   mixins: [ChildrenMixin('vanTabs')],
 
   props: {
-    name: [String, Number],
+    name: [Number, String],
     title: String,
     disabled: Boolean
   },
diff --git a/src/tabbar-item/index.js b/src/tabbar-item/index.js
index 3f3170a90..a02963c0d 100644
--- a/src/tabbar-item/index.js
+++ b/src/tabbar-item/index.js
@@ -11,10 +11,10 @@ export default createComponent({
 
   props: {
     ...routeProps,
-    icon: String,
     dot: Boolean,
-    name: [String, Number],
-    info: [String, Number]
+    icon: String,
+    name: [Number, String],
+    info: [Number, String]
   },
 
   data() {
diff --git a/src/tabbar/index.js b/src/tabbar/index.js
index 6020bec40..71d4c0445 100644
--- a/src/tabbar/index.js
+++ b/src/tabbar/index.js
@@ -12,7 +12,7 @@ export default createComponent({
     inactiveColor: String,
     safeAreaInsetBottom: Boolean,
     value: {
-      type: [String, Number],
+      type: [Number, String],
       default: 0
     },
     border: {
diff --git a/src/tabs/index.js b/src/tabs/index.js
index 1f2aebd48..e500d763d 100644
--- a/src/tabs/index.js
+++ b/src/tabs/index.js
@@ -31,13 +31,20 @@ export default createComponent({
     color: String,
     sticky: Boolean,
     animated: Boolean,
-    offsetTop: Number,
     swipeable: Boolean,
     background: String,
     lineWidth: [Number, String],
     lineHeight: [Number, String],
     titleActiveColor: String,
     titleInactiveColor: String,
+    type: {
+      type: String,
+      default: 'line'
+    },
+    active: {
+      type: [Number, String],
+      default: 0
+    },
     border: {
       type: Boolean,
       default: true
@@ -46,22 +53,18 @@ export default createComponent({
       type: Boolean,
       default: true
     },
-    lazyRender: {
-      type: Boolean,
-      default: true
-    },
-    active: {
-      type: [Number, String],
-      default: 0
-    },
-    type: {
-      type: String,
-      default: 'line'
-    },
     duration: {
       type: Number,
       default: 0.3
     },
+    offsetTop: {
+      type: Number,
+      default: 0
+    },
+    lazyRender: {
+      type: Boolean,
+      default: true
+    },
     swipeThreshold: {
       type: Number,
       default: 4
diff --git a/src/toast/Toast.js b/src/toast/Toast.js
index ec5de8d39..5bfa48d3d 100644
--- a/src/toast/Toast.js
+++ b/src/toast/Toast.js
@@ -13,7 +13,7 @@ export default createComponent({
     className: null,
     loadingType: String,
     forbidClick: Boolean,
-    message: [String, Number],
+    message: [Number, String],
     type: {
       type: String,
       default: 'text'
diff --git a/src/tree-select/index.tsx b/src/tree-select/index.tsx
index 1e2cc9a1b..b65989d61 100644
--- a/src/tree-select/index.tsx
+++ b/src/tree-select/index.tsx
@@ -35,7 +35,7 @@ function TreeSelect(
 ) {
   const { height, items, mainActiveIndex, activeId } = props;
 
-  const selectedItem = items[mainActiveIndex] || {};
+  const selectedItem: Partial<TreeSelectItem> = items[mainActiveIndex] || {};
   const subItems = selectedItem.children || [];
 
   return (
@@ -90,15 +90,21 @@ function TreeSelect(
 }
 
 TreeSelect.props = {
-  items: Array,
-  mainActiveIndex: Number,
-  activeId: {
-    type: [Number, String],
-    default: 0
+  items: {
+    type: Array,
+    default: () => []
   },
   height: {
     type: Number,
     default: 300
+  },
+  activeId: {
+    type: [Number, String],
+    default: 0
+  },
+  mainActiveIndex: {
+    type: Number,
+    default: 0
   }
 };
 
diff --git a/src/uploader/index.js b/src/uploader/index.js
index 9417ba97c..a41c70e23 100644
--- a/src/uploader/index.js
+++ b/src/uploader/index.js
@@ -18,27 +18,22 @@ export default createComponent({
   },
 
   props: {
-    fileList: Array,
     disabled: Boolean,
     uploadText: String,
     afterRead: Function,
     beforeRead: Function,
     previewSize: [Number, String],
     name: {
-      type: [String, Number],
+      type: [Number, String],
       default: ''
     },
-    previewImage: {
-      type: Boolean,
-      default: true
-    },
     accept: {
       type: String,
       default: 'image/*'
     },
-    resultType: {
-      type: String,
-      default: 'dataUrl'
+    fileList: {
+      type: Array,
+      default: () => []
     },
     maxSize: {
       type: Number,
@@ -47,6 +42,14 @@ export default createComponent({
     maxCount: {
       type: Number,
       default: Number.MAX_VALUE
+    },
+    previewImage: {
+      type: Boolean,
+      default: true
+    },
+    resultType: {
+      type: String,
+      default: 'dataUrl'
     }
   },
 
diff --git a/src/utils/create/component.ts b/src/utils/create/component.ts
index 5dcf7b3c9..99aa9f18a 100644
--- a/src/utils/create/component.ts
+++ b/src/utils/create/component.ts
@@ -25,26 +25,6 @@ export type TsxComponent<Props, Events, Slots> = (
   props: Partial<Props & Events & TsxBaseProps<Slots>>
 ) => VNode;
 
-const arrayProp = {
-  type: Array,
-  default: () => []
-};
-
-const numberProp = {
-  type: Number,
-  default: 0
-};
-
-function defaultProps(props: any) {
-  Object.keys(props).forEach(key => {
-    if (props[key] === Array) {
-      props[key] = arrayProp;
-    } else if (props[key] === Number) {
-      props[key] = numberProp;
-    }
-  });
-}
-
 function install(this: ComponentOptions<Vue>, Vue: VueConstructor) {
   const { name } = this;
   Vue.component(name as string, this);
@@ -89,10 +69,6 @@ export function createComponent(name: string) {
       sfc.mixins.push(SlotsMixin);
     }
 
-    if (sfc.props) {
-      defaultProps(sfc.props);
-    }
-
     sfc.name = name;
     sfc.install = install;