[improvement] watcher (#645)

example/app.wxss

@@ -1,5 +1,6 @@
 page {
   color: #333;
+  font-size: 16px;
   background: #f8f8f8;
   min-height: 100vh;
   box-sizing: border-box;

packages/area/index.ts

@@ -8,14 +8,8 @@ type AreaItem = {
 VantComponent({
   props: {
     title: String,
+    value: String,
     loading: Boolean,
-    value: {
-      type: String,
-      observer(value) {
-        this.code = value;
-        this.setValues();
-      }
-    },
     itemHeight: {
       type: Number,
       value: 44
@@ -30,10 +24,7 @@ VantComponent({
     },
     areaList: {
       type: Object,
-      value: {},
-      observer() {
-        this.setValues();
-      }
+      value: {}
     }
   },
 
@@ -49,6 +40,15 @@ VantComponent({
     }
   },
 
+  watch: {
+    value(value) {
+      this.code = value;
+      this.setValues();
+    },
+
+    areaList: 'setValues'
+  },
+
   methods: {
     onCancel() {
       this.$emit('cancel', {

packages/badge-group/index.ts

@@ -20,8 +20,7 @@ VantComponent({
   props: {
     active: {
       type: Number,
-      value: 0,
-      observer: 'setActive'
+      value: 0
     }
   },
 
@@ -29,6 +28,10 @@ VantComponent({
     badges: []
   },
 
+  watch: {
+    active: 'setActive'
+  },
+
   beforeCreate() {
     this.currentActive = -1;
   },

packages/common/component.ts

@@ -11,18 +11,19 @@ function mapKeys(source: object, target: object, map: object) {
   });
 }
 
-function VantComponent<Data, Props, Methods, Computed>(
-  sfc: VantComponentOptions<
+function VantComponent<Data, Props, Watch, Methods, Computed>(
+  vantOptions: VantComponentOptions<
     Data,
     Props,
+    Watch,
     Methods,
     Computed,
-    CombinedComponentInstance<Data, Props, Methods, Computed>
+    CombinedComponentInstance<Data, Props, Watch, Methods, Computed>
   >
 ): void {
   const options: any = {};
 
-  mapKeys(sfc, options, {
+  mapKeys(vantOptions, options, {
     data: 'data',
     props: 'properties',
     mixins: 'behaviors',
@@ -44,7 +45,7 @@ function VantComponent<Data, Props, Methods, Computed>(
   options.behaviors.push(basic);
 
   // map field to form-field behavior
-  if (sfc.field) {
+  if (vantOptions.field) {
     options.behaviors.push('wx://form-field');
   }
 
@@ -54,7 +55,7 @@ function VantComponent<Data, Props, Methods, Computed>(
     addGlobalClass: true
   };
 
-  observe(sfc, options);
+  observe(vantOptions, options);
   Component(options);
 }
 

packages/dialog/index.ts

@@ -2,25 +2,13 @@ import { VantComponent } from '../common/component';
 
 VantComponent({
   props: {
+    show: Boolean,
     title: String,
     message: String,
     useSlot: Boolean,
     asyncClose: Boolean,
     showCancelButton: Boolean,
     confirmButtonOpenType: String,
-    show: {
-      type: Boolean,
-      observer(show) {
-        if (!show) {
-          this.setData({
-            loading: {
-              confirm: false,
-              cancel: false
-            }
-          });
-        }
-      }
-    },
     zIndex: {
       type: Number,
       value: 100
@@ -54,6 +42,19 @@ VantComponent({
     }
   },
 
+  watch: {
+    show(show) {
+      if (!show) {
+        this.setData({
+          loading: {
+            confirm: false,
+            cancel: false
+          }
+        });
+      }
+    }
+  },
+
   methods: {
     onConfirm() {
       this.handleAction('confirm');

packages/mixins/button.ts

@@ -27,23 +27,23 @@ export const button = Behavior({
   },
 
   methods: {
-    bindgetuserinfo(event = {}) {
+    bindgetuserinfo(event: Partial<Weapp.Event>) {
       this.$emit('getuserinfo', event.detail);
     },
 
-    bindcontact(event = {}) {
+    bindcontact(event: Partial<Weapp.Event>) {
       this.$emit('contact', event.detail);
     },
 
-    bindgetphonenumber(event = {}) {
+    bindgetphonenumber(event: Partial<Weapp.Event>) {
       this.$emit('getphonenumber', event.detail);
     },
 
-    bindopensetting(event = {}) {
+    bindopensetting(event: Partial<Weapp.Event>) {
       this.$emit('opensetting', event.detail);
     },
 
-    binderror(event = {}) {
+    binderror(event: Partial<Weapp.Event>) {
       this.$emit('error', event.detail);
     }
   }

packages/mixins/observer/index.ts

@@ -1,11 +1,26 @@
 import { behavior } from './behavior';
 import { observeProps } from './props';
 
-export function observe(sfc, options) {
-  if (sfc.computed) {
+export function observe(vantOptions, options) {
+  const { watch, computed } = vantOptions;
+
+  if (watch) {
+    options.properties = options.properties || {};
+    Object.keys(watch).forEach(key => {
+      if (key in options.properties) {
+        let prop = options.properties[key];
+        if (prop === null || !prop.type) {
+          prop = { type: prop };
+        }
+        prop.observer = watch[key];
+      }
+    });
+  }
+
+  if (computed) {
     options.behaviors.push(behavior);
     options.methods = options.methods || {};
-    options.methods.$options = () => sfc;
+    options.methods.$options = () => vantOptions;
 
     if (options.properties) {
       observeProps(options.properties);

packages/mixins/transition.ts

@@ -3,17 +3,9 @@ export const transition = function(showDefaultValue) {
     properties: {
       customStyle: String,
       show: {
-        value: showDefaultValue,
         type: Boolean,
-        observer(value) {
-          if (value) {
-            this.show();
-          } else {
-            this.setData({
-              type: 'leave'
-            });
-          }
-        }
+        value: showDefaultValue,
+        observer: 'observeShow'
       },
       duration: {
         type: Number,
@@ -34,6 +26,16 @@ export const transition = function(showDefaultValue) {
     },
 
     methods: {
+      observeShow(value) {
+        if (value) {
+          this.show();
+        } else {
+          this.setData({
+            type: 'leave'
+          });
+        }
+      },
+
       show() {
         this.setData({
           inited: true,

packages/notice-bar/index.ts

@@ -7,10 +7,7 @@ VantComponent({
   props: {
     text: {
       type: String,
-      value: '',
-      observer() {
-        this.setData({}, this.init);
-      }
+      value: ''
     },
     mode: {
       type: String,
@@ -61,6 +58,12 @@ VantComponent({
     timer: null
   },
 
+  watch: {
+    text() {
+      this.setData({}, this.init);
+    }
+  },
+
   created() {
     if (this.data.mode) {
       this.setData({

packages/notify/notify.ts

@@ -1,5 +1,10 @@
 import { isObj } from '../common/utils';
 
+type NotifyOptions = {
+  selector?: string;
+  duration?: number;
+}
+
 const defaultOptions = {
   selector: '#van-notify',
   duration: 3000
@@ -9,7 +14,7 @@ function parseOptions(text) {
   return isObj(text) ? text : { text };
 }
 
-export default function Notify(options = {}) {
+export default function Notify(options: NotifyOptions = {}) {
   const pages = getCurrentPages();
   const ctx = pages[pages.length - 1];
 

packages/overlay/index.ts

@@ -1,3 +1,4 @@
+
 import { VantComponent } from '../common/component';
 
 VantComponent({

packages/progress/index.js

@@ -1,104 +0,0 @@
-import { VantComponent } from '../common/component';
-
-VantComponent({
-  props: {
-    inactive: {
-      type: Boolean,
-      observer() {
-        this.setPivotStyle();
-        this.setPortionStyle();
-      }
-    },
-    pivotColor: {
-      type: String,
-      observer: 'setPivotStyle'
-    },
-    percentage: {
-      type: Number,
-      observer() {
-        this.setText();
-        this.setPortionStyle();
-      }
-    },
-    showPivot: {
-      type: Boolean,
-      value: true,
-      observer: 'getWidth'
-    },
-    pivotText: {
-      type: String,
-      observer() {
-        this.setText();
-        this.getWidth();
-      }
-    },
-    color: {
-      type: String,
-      value: '#38f',
-      observer() {
-        this.setPivotStyle();
-        this.setPortionStyle();
-      }
-    },
-    textColor: {
-      type: String,
-      value: '#fff',
-      observer: 'setPivotStyle'
-    }
-  },
-
-  data: {
-    pivotWidth: 0,
-    progressWidth: 0
-  },
-
-  mounted() {
-    this.setText();
-    this.setPivotStyle();
-    this.getWidth();
-  },
-
-  methods: {
-    getCurrentColor() {
-      return this.data.inactive ? '#cacaca' : this.data.color;
-    },
-
-    setText() {
-      this.setData({
-        text: this.data.pivotText || this.data.percentage + '%'
-      });
-    },
-
-    setPortionStyle() {
-      const width = (this.data.progressWidth - this.data.pivotWidth) * this.data.percentage / 100 + 'px';
-      const background = this.getCurrentColor();
-      this.setData({
-        portionStyle: `width: ${width}; background: ${background}; `
-      });
-    },
-
-    setPivotStyle() {
-      const color = this.data.textColor;
-      const background = this.data.pivotColor || this.getCurrentColor();
-      this.setData({
-        pivotStyle: `color: ${color}; background: ${background}`
-      });
-    },
-
-    getWidth() {
-      this.getRect('.van-progress').then(rect => {
-        this.setData({
-          progressWidth: rect.width
-        });
-        this.setPortionStyle();
-      });
-
-      this.getRect('.van-progress__pivot').then(rect => {
-        this.setData({
-          pivotWidth: rect.width || 0
-        });
-        this.setPortionStyle();
-      });
-    }
-  }
-});

packages/progress/index.ts

@@ -0,0 +1,74 @@
+import { VantComponent } from '../common/component';
+
+VantComponent({
+  props: {
+    inactive: Boolean,
+    percentage: Number,
+    pivotText: String,
+    pivotColor: String,
+    showPivot: {
+      type: Boolean,
+      value: true
+    },
+    color: {
+      type: String,
+      value: '#38f'
+    },
+    textColor: {
+      type: String,
+      value: '#fff'
+    }
+  },
+
+  data: {
+    pivotWidth: 0,
+    progressWidth: 0
+  },
+
+  watch: {
+    pivotText: 'getWidth',
+    showPivot: 'getWidth'
+  },
+
+  computed: {
+    portionStyle() {
+      const width = (this.data.progressWidth - this.data.pivotWidth) * this.data.percentage / 100 + 'px';
+      const background = this.getCurrentColor();
+      return `width: ${width}; background: ${background}; `;
+    },
+
+    pivotStyle() {
+      const color = this.data.textColor;
+      const background = this.data.pivotColor || this.getCurrentColor();
+      return `color: ${color}; background: ${background}`
+    },
+
+    text() {
+      return this.data.pivotText || this.data.percentage + '%';
+    }
+  },
+
+  mounted() {
+    this.getWidth();
+  },
+
+  methods: {
+    getCurrentColor() {
+      return this.data.inactive ? '#cacaca' : this.data.color;
+    },
+
+    getWidth() {
+      this.getRect('.van-progress').then(rect => {
+        this.setData({
+          progressWidth: rect.width
+        });
+      });
+
+      this.getRect('.van-progress__pivot').then(rect => {
+        this.setData({
+          pivotWidth: rect.width || 0
+        });
+      });
+    }
+  }
+});

packages/radio-group/index.js

@@ -1,37 +0,0 @@
-import { VantComponent } from '../common/component';
-
-VantComponent({
-  relations: {
-    '../radio/index': {
-      type: 'descendant',
-      linked(target) {
-        const { value, disabled } = this.data;
-        target.setData({
-          value: value,
-          disabled: disabled || target.data.disabled
-        });
-      }
-    }
-  },
-
-  props: {
-    value: {
-      type: null,
-      observer(value) {
-        const children = this.getRelationNodes('../radio/index');
-        children.forEach(child => {
-          child.setData({ value });
-        });
-      }
-    },
-    disabled: {
-      type: Boolean,
-      observer(disabled) {
-        const children = this.getRelationNodes('../radio/index');
-        children.forEach(child => {
-          child.setData({ disabled: disabled || children.data.disabled });
-        });
-      }
-    }
-  }
-});

packages/radio-group/index.ts

@@ -0,0 +1,37 @@
+import { VantComponent } from '../common/component';
+
+VantComponent({
+  relations: {
+    '../radio/index': {
+      type: 'descendant',
+      linked(target) {
+        const { value, disabled } = this.data;
+        target.setData({
+          value: value,
+          disabled: disabled || target.data.disabled
+        });
+      }
+    }
+  },
+
+  props: {
+    value: null,
+    disabled: Boolean
+  },
+
+  watch: {
+    value(value) {
+      const children = this.getRelationNodes('../radio/index');
+      children.forEach(child => {
+        child.setData({ value });
+      });
+    },
+
+    disabled(disabled) {
+      const children = this.getRelationNodes('../radio/index');
+      children.forEach(child => {
+        child.setData({ disabled: disabled || child.data.disabled });
+      });
+    }
+  }
+});

packages/radio/index.ts

@@ -30,14 +30,13 @@ VantComponent({
 
   methods: {
     emitChange(value) {
-      const parent = this.getRelationNodes('../radio-group/index')[0];
-      (parent || this).$emit('input', value);
-      (parent || this).$emit('change', value);
+      const instance = this.getRelationNodes('../radio-group/index')[0] || this;
+      instance.$emit('input', value);
+      instance.$emit('change', value);
     },
 
     onChange(event) {
-      const { value } = event.detail;
-      this.emitChange(value);
+      this.emitChange(event.detail.value);
     },
 
     onClickLabel() {

packages/row/index.ts

@@ -14,10 +14,11 @@ VantComponent({
   },
 
   props: {
-    gutter: {
-      type: Number,
-      observer: 'setGutter'
-    }
+    gutter: Number
+  },
+
+  watch: {
+    gutter: 'setGutter'
   },
 
   mounted() {

packages/search/index.ts

@@ -22,6 +22,10 @@ VantComponent({
     }
   },
 
+  data: {
+    value: ''
+  },
+
   methods: {
     onChange(event) {
       this.setData({ value: event.detail });

packages/stepper/index.ts

@@ -31,6 +31,10 @@ VantComponent({
     }
   },
 
+  data: {
+    value: 0
+  },
+
   created() {
     this.setData({
       value: this.range(this.data.value)

packages/steps/index.ts

@@ -3,14 +3,8 @@ import { VantComponent } from '../common/component';
 VantComponent({
   props: {
     icon: String,
-    steps: {
-      type: Array,
-      observer: 'formatSteps'
-    },
-    active: {
-      type: Number,
-      observer: 'formatSteps'
-    },
+    steps: Array,
+    active: Number,
     direction: {
       type: String,
       value: 'horizontal'
@@ -21,6 +15,11 @@ VantComponent({
     }
   },
 
+  watch: {
+    steps: 'formatSteps',
+    active: 'formatSteps'
+  },
+
   created() {
     this.formatSteps();
   },

packages/switch-cell/index.ts

@@ -6,20 +6,21 @@ VantComponent({
   props: {
     title: String,
     border: Boolean,
+    checked: Boolean,
     loading: Boolean,
     disabled: Boolean,
-    checked: {
-      type: Boolean,
-      observer(value) {
-        this.setData({ value });
-      }
-    },
     size: {
       type: String,
       value: '26px'
     }
   },
 
+  watch: {
+    checked(value) {
+      this.setData({ value });
+    }
+  },
+
   created() {
     this.setData({ value: this.data.checked });
   },

packages/switch/index.ts

@@ -6,20 +6,21 @@ VantComponent({
   classes: ['node-class'],
 
   props: {
+    checked: Boolean,
     loading: Boolean,
     disabled: Boolean,
-    checked: {
-      type: Boolean,
-      observer(value) {
-        this.setData({ value });
-      }
-    },
     size: {
       type: String,
       value: '30px'
     }
   },
 
+  watch: {
+    checked(value) {
+      this.setData({ value });
+    }
+  },
+
   created() {
     this.setData({ value: this.data.checked });
   },

packages/tab/index.js

@@ -1,36 +0,0 @@
-import { VantComponent } from '../common/component';
-
-VantComponent({
-  props: {
-    disabled: {
-      type: Boolean,
-      observer() {
-        const parent = this.getRelationNodes('../tabs/index')[0];
-        if (parent) {
-          parent.updateTabs();
-        }
-      }
-    },
-    title: {
-      type: String,
-      observer() {
-        const parent = this.getRelationNodes('../tabs/index')[0];
-        if (parent) {
-          parent.setLine();
-          parent.updateTabs();
-        }
-      }
-    }
-  },
-
-  relations: {
-    '../tabs/index': {
-      type: 'ancestor'
-    }
-  },
-
-  data: {
-    inited: false,
-    active: false
-  }
-});

packages/tab/index.ts

@@ -0,0 +1,36 @@
+import { VantComponent } from '../common/component';
+
+VantComponent({
+  relations: {
+    '../tabs/index': {
+      type: 'ancestor'
+    }
+  },
+
+  props: {
+    title: String,
+    disabled: Boolean
+  },
+
+  data: {
+    inited: false,
+    active: false
+  },
+
+  watch: {
+    disabled() {
+      const parent = this.getRelationNodes('../tabs/index')[0];
+      if (parent) {
+        parent.updateTabs();
+      }
+    },
+
+    title() {
+      const parent = this.getRelationNodes('../tabs/index')[0];
+      if (parent) {
+        parent.setLine();
+        parent.updateTabs();
+      }
+    }
+  }
+});

packages/tabbar/index.ts

@@ -2,13 +2,7 @@ import { VantComponent } from '../common/component';
 
 VantComponent({
   props: {
-    active: {
-      type: Number,
-      observer(active) {
-        this.setData({ currentActive: active });
-        this.setActiveItem();
-      }
-    },
+    active: Number,
     fixed: {
       type: Boolean,
       value: true
@@ -24,6 +18,13 @@ VantComponent({
     currentActive: -1
   },
 
+  watch: {
+    active(active) {
+      this.setData({ currentActive: active });
+      this.setActiveItem();
+    }
+  },
+
   created() {
     this.setData({ currentActive: this.data.active });
   },

packages/tabs/index.ts

@@ -1,5 +1,10 @@
 import { VantComponent } from '../common/component';
 
+type TabItemData = {
+  active: boolean;
+  inited?: boolean;
+};
+
 VantComponent({
   relations: {
     '../tab/index': {
@@ -25,18 +30,11 @@ VantComponent({
   },
 
   props: {
-    color: {
-      type: String,
-      observer: 'setLine'
-    },
-    lineWidth: {
-      type: Number,
-      observer: 'setLine'
-    },
+    color: String,
+    lineWidth: Number,
     active: {
       type: null,
-      value: 0,
-      observer: 'setActiveTab'
+      value: 0
     },
     type: {
       type: String,
@@ -52,19 +50,26 @@ VantComponent({
     },
     swipeThreshold: {
       type: Number,
-      value: 4,
-      observer() {
-        this.setData({
-          scrollable: this.data.tabs.length > this.data.swipeThreshold
-        });
-      }
+      value: 4
     }
   },
 
   data: {
     tabs: [],
     lineStyle: '',
-    scrollLeft: 0
+    scrollLeft: 0,
+    scrollable: false
+  },
+
+  watch: {
+    swipeThreshold() {
+      this.setData({
+        scrollable: this.data.tabs.length > this.data.swipeThreshold
+      });
+    },
+    color: 'setLine',
+    lineWidth: 'setLine',
+    active: 'setActiveTab'
   },
 
   mounted() {
@@ -133,7 +138,7 @@ VantComponent({
 
     setActiveTab() {
       this.data.tabs.forEach((item, index) => {
-        const data = {
+        const data: TabItemData = {
           active: index === this.data.active
         };
 

packages/toast/toast.ts

@@ -1,5 +1,30 @@
 import { isObj } from '../common/utils';
 
+type ToastMessage = string | number;
+
+export type ToastOptions = {
+  show?: boolean;
+  type?: string;
+  mask?: boolean;
+  zIndex?: number;
+  position?: string;
+  duration?: number;
+  selector?: string;
+  forbidClick?: boolean;
+  loadingType?: string;
+  message?: ToastMessage;
+}
+
+export interface Toast {
+  (message: ToastOptions | ToastMessage, options?: ToastOptions): Weapp.Component;
+  loading?(options?: ToastOptions | ToastMessage): Weapp.Component;
+  success?(options?: ToastOptions | ToastMessage): Weapp.Component;
+  fail?(options?: ToastOptions | ToastMessage): Weapp.Component;
+  clear?(): void;
+  setDefaultOptions?(options: ToastOptions): void;
+  resetDefaultOptions?(): void;
+}
+
 const defaultOptions = {
   type: 'text',
   mask: false,
@@ -14,17 +39,17 @@ const defaultOptions = {
 };
 
 let queue = [];
-let currentOptions = { ...defaultOptions };
+let currentOptions: ToastOptions = { ...defaultOptions };
 
-function parseOptions(message) {
+function parseOptions(message): ToastOptions {
   return isObj(message) ? message : { message };
 }
 
-function Toast(options = {}) {
+const Toast: Toast = (options = {}) => {
   options = {
     ...currentOptions,
     ...parseOptions(options)
-  };
+  } as ToastOptions;
 
   const pages = getCurrentPages();
   const ctx = pages[pages.length - 1];
@@ -54,7 +79,7 @@ const createMethod = type => options => Toast({
   Toast[method] = createMethod(method);
 });
 
-Toast.clear = all => {
+Toast.clear = () => {
   queue.forEach(toast => {
     toast.clear();
   });

packages/tree-select/index.ts

@@ -4,17 +4,10 @@ const ITEM_HEIGHT = 44;
 
 VantComponent({
   props: {
-    items: {
-      type: Array,
-      observer() {
-        this.updateSubItems();
-        this.updateMainHeight();
-      }
-    },
+    items: Array,
     mainActiveIndex: {
       type: Number,
-      value: 0,
-      observer: 'updateSubItems'
+      value: 0
     },
     activeId: {
       type: Number,
@@ -22,11 +15,7 @@ VantComponent({
     },
     maxHeight: {
       type: Number,
-      value: 300,
-      observer() {
-        this.updateItemHeight();
-        this.updateMainHeight();
-      }
+      value: 300
     }
   },
 
@@ -36,6 +25,20 @@ VantComponent({
     itemHeight: 0
   },
 
+  watch: {
+    items() {
+      this.updateSubItems();
+      this.updateMainHeight();
+    },
+
+    maxHeight() {
+      this.updateItemHeight();
+      this.updateMainHeight();
+    },
+
+    mainActiveIndex: 'updateSubItems'
+  },
+
   methods: {
     // 当一个子项被选择时
     onSelectItem(event) {
@@ -59,14 +62,22 @@ VantComponent({
 
     // 更新组件整体高度，根据最大高度和当前组件需要展示的高度来决定
     updateMainHeight() {
-      const maxHeight = Math.max(this.data.items.length * ITEM_HEIGHT, this.data.subItems.length * ITEM_HEIGHT);
+      const maxHeight = Math.max(
+        this.data.items.length * ITEM_HEIGHT,
+        this.data.subItems.length * ITEM_HEIGHT
+      );
 
       this.setData({ mainHeight: Math.min(maxHeight, this.data.maxHeight) });
     },
 
     // 更新子项列表高度，根据可展示的最大高度和当前子项列表的高度决定
     updateItemHeight() {
-      this.setData({ itemHeight: Math.min(this.data.subItems.length * ITEM_HEIGHT, this.data.maxHeight) });
+      this.setData({
+        itemHeight: Math.min(
+          this.data.subItems.length * ITEM_HEIGHT,
+          this.data.maxHeight
+        )
+      });
     }
   }
 });

types/index.d.ts

@@ -21,6 +21,7 @@ type RecordToReturn<T> = {
 export type CombinedComponentInstance<
   Data,
   Props,
+  Watch,
   Methods,
   Computed
 > = Methods &
@@ -30,11 +31,12 @@ export type CombinedComponentInstance<
     data: Data & RecordToAny<Props> & RecordToReturn<Computed>;
   };
 
-export type VantComponentOptions<Data, Props, Methods, Computed, Instance> = {
+export type VantComponentOptions<Data, Props, Watch, Methods, Computed, Instance> = {
   data?: Data;
-  props?: Props & ThisType<Instance>;
   field?: boolean;
   mixins?: Mixins;
+  props?: Props & ThisType<Instance>;
+  watch?: Watch & ThisType<Instance>;
   computed?: Computed & ThisType<Instance>;
   relations?: Relations<Instance>;
   classes?: ExternalClasses;
@@ -42,7 +44,7 @@ export type VantComponentOptions<Data, Props, Methods, Computed, Instance> = {
 
   // lifetimes
   beforeCreate?: (this: Instance) => void;
-  created?: () => void;
-  mounted?: () => void;
-  destroyed?: () => void;
+  created?: (this: Instance) => void;
+  mounted?: (this: Instance) => void;
+  destroyed?: (this: Instance) => void;
 };

types/weapp.d.ts

@@ -13,6 +13,7 @@ declare function getCurrentPages(): Weapp.Page[];
 
 declare namespace Weapp {
   interface Component {
+    [key: string]: any;
     getRelationNodes(selector: string): any[];
     setData(data: any, callback?: Function): void;
   }