chore: major type annotation improvement

we now have auto completion and type checking in all components now see vuejs/vetur#1707
sb-im · Oct 10, 2021 · 4bf4620 · 4bf4620
1 parent ffc2dd3
commit 4bf4620
Show file tree

Hide file tree

Showing 53 changed files with 333 additions and 191 deletions.
diff --git a/src/api/mqtt.js b/src/api/mqtt.js
@@ -33,8 +33,7 @@ export class MqttClient extends EventEmitter2 {
    * - `nodes/:id/msg/{position,battery,weather,...}`
    * - `plans/:id/{term,dialog,running}`
    * @param {string} topic
-   * @typedef {{ entity: 'nodes'|'plans'|string, id: number, category: string, param: string }} TopicInfo
-   * @returns {TopicInfo}
+   * @returns {SDWC.MqttTopicInfo}
    */
   static parseTopic(topic) {
     const parts = topic.split('/');
@@ -150,7 +149,7 @@ export class MqttClient extends EventEmitter2 {
    * @param {number|string} target target node id
    * @param {string} method method name
    * @param {any} arg method argument
-   * @param {SDWC.MqttControlOptions} [options]
+   * @param {SDWC.MqttRpcOptions} [options]
    * @returns {Promise<any>}
    */
   invoke(target, method, arg, options) {
@@ -169,7 +168,7 @@ export class MqttClient extends EventEmitter2 {
    * @param {number|string} target target node id
    * @param {string} method method name
    * @param {any} arg method argument
-   * @param {SDWC.MqttControlOptions} [options]
+   * @param {SDWC.MqttRpcOptions} [options]
    */
   _invoke(target, method, arg, options = {}) {
     const rpcId = this.nextRpcId();
@@ -192,7 +191,7 @@ export class MqttClient extends EventEmitter2 {
   }
 
   /**
-   * @param {TopicInfo} topic
+   * @param {SDWC.MqttTopicInfo} topic
    * @param {string} str
    */
   onNode(topic, str) {
@@ -264,7 +263,7 @@ export class MqttClient extends EventEmitter2 {
   }
 
   /**
-   * @param {TopicInfo} topic
+   * @param {SDWC.MqttTopicInfo} topic
    * @param {string} str
    */
   onPlan(topic, str) {

diff --git a/src/components/battery.vue b/src/components/battery.vue
@@ -72,18 +72,23 @@ export default {
     }
   },
   computed: {
+    /** @returns {SDWC.NodeBattery} */
     battery() {
       return this.msg.battery;
     },
+    /** @returns {string} */
     current() {
-      const I = ((this.battery.cur || 0) / 1000);
+      const I = (this.battery.cur || 0) / 1000;
       return Math.abs(I) > 1 ? I.toFixed(1) : I.toFixed(2);
     },
+    /** @returns {string} */
     voltage() {
       return (this.battery.vol_cell || '').replace(/\//g, ' / ');
     },
+    /** @returns {string} */
     totalVoltage() {
-      return (this.battery.vol_cell || '').split('/').reduce((a, b) => +b + a, 0) / 1000;
+      const U = (this.battery.vol_cell || '').split('/').reduce((a, b) => +b + a, 0) / 1000;
+      return U.toFixed(3);
     }
   },
   watch: {

diff --git a/src/components/card.vue b/src/components/card.vue
@@ -34,6 +34,7 @@ export default {
     }
   },
   computed: {
+    /** @returns {{ [key: string]: boolean }} */
     className() {
       return {
         'sd-card--dense': this.dense

diff --git a/src/components/control.vue b/src/components/control.vue
@@ -30,7 +30,7 @@ import Icon from '@/components/sd-icon.vue';
 
 /**
  * custom control group
- * @type {{ icon: string, item: SDWC.ControlButton[] }[]}
+ * @type {ControlButtonGroup[]}
  */
 const Controls = [
   {
@@ -61,15 +61,22 @@ export default {
     };
   },
   computed: {
+    /** @returns {boolean} */
     disabled() {
       return this.status.code !== 0;
     },
+    /** @returns {string} */
     disabledText() {
       return this.$t('control.abnormal');
     },
+    /**
+     * override in derived class
+     * @returns {SDWC.ControlButtonGroup[]}
+     */
     staticControls() {
       return Controls;
     },
+    /** @returns {SDWC.ControlButtonGroup[]} */
     controls() {
       return this.point.params || this.staticControls;
     }

diff --git a/src/components/countdown-button.vue b/src/components/countdown-button.vue
@@ -1,7 +1,7 @@
 <template>
   <el-button v-bind="$attrs" v-on="$listeners" :disabled="disabled" ref="button">
     <span v-t="text"></span>
-    <span>{{confirmSuffix}}</span>
+    <span v-t="confirmSuffix"></span>
   </el-button>
 </template>
 
@@ -37,9 +37,11 @@ export default {
     };
   },
   computed: {
+    /** @returns {boolean} */
     disabled() {
       return this.mode === 'delay' && this.remain > 0;
     },
+    /** @returns {string} */
     confirmSuffix() {
       return this.remain > 0 ? ` (${this.remain})` : '';
     }

diff --git a/src/components/custom/custom.vue b/src/components/custom/custom.vue
@@ -27,12 +27,15 @@ export default {
     }
   },
   computed: {
+    /** @returns {string} */
     icon() {
       return this.point.params.icon || 'views';
     },
+    /** @returns {string} */
     title() {
       return this.point.params.title || 'custom.title';
     },
+    /** @returns {{ label: string, field: string, unit?: string, value: any }[]} */
     items() {
       const { topic = 'custom', items = [] } = this.point.params;
       const pool = this.msg[topic] || {};

diff --git a/src/components/debug.vue b/src/components/debug.vue
@@ -61,12 +61,15 @@ export default {
     };
   },
   computed: {
+    /** @returns {boolean} */
     disabled() {
       return this.status.code !== 0;
     },
+    /** @returns {string} */
     disabledText() {
       return this.$t('control.abnormal');
     },
+    /** @returns {{ value: string }[]} */
     commands() {
       return this.point.name.trim().split(' ').filter(c => c !== '').map(value => ({ value }));
     }
@@ -118,7 +121,7 @@ export default {
      * @param {KeyboardEvent} e
      */
     onKeyPress(e) {
-      if (e.keyCode === 13 || e.key === 'Enter') {
+      if (e.key === 'Enter') {
         this.handleSend();
       }
     }

diff --git a/src/components/depot/status.vue b/src/components/depot/status.vue
@@ -36,14 +36,17 @@ export default {
   name: 'sd-depot-status',
   inheritAttrs: false,
   props: {
+    /** @type {Vue.PropOptions<SDWC.NodePoint>} */
     point: {
       type: Object,
       required: true
     },
+    /** @type {Vue.PropOptions<SDWC.NodeConnectionStatus>} */
     status: {
       type: Object,
       required: true
     },
+    /** @type {Vue.PropOptions<SDWC.NodeMsg>} */
     msg: {
       type: Object,
       required: true
@@ -61,6 +64,7 @@ export default {
     }
   }),
   computed: {
+    /** @returns {SDWC.StatusItem[]} */
     items() {
       const s = this.msg.depot_status;
       const c = this.msg.charger;

diff --git a/src/components/drone/map.vue b/src/components/drone/map.vue
@@ -67,7 +67,7 @@
 
 <script>
 import get from 'lodash/get';
-import { mapActions, mapGetters, mapState } from 'vuex';
+import { mapActions } from 'vuex';
 
 import { PlaceStyle } from '@/constants/drone-place-style';
 import NodeMap from '@/components/map/map.vue';
@@ -139,20 +139,23 @@ export default {
     };
   },
   computed: {
-    ...mapState([
-      'preference'
-    ]),
-    ...mapGetters([
-      'depots'
-    ]),
+    /** @returns {SDWC.Preference} */
+    preference() { return this.$store.state.preference; },
+    /** @returns {SDWC.Node[]} */
+    drones() { return this.$store.getters.drones; },
+    /** @returns {SDWC.Node[]} */
+    depots() { return this.$store.getters.depots; },
+    /** @returns {SDWC.DroneMapControl[]} */
     commands() {
       if (!this.point.params) return DefaultCommands;
       return get(this.point, 'params.common.move', DefaultCommands);
     },
+    /** @returns {{ [key: string]: SDWC.DronePlaceStyle }} */
     placeStyle() {
       if (!this.point.params) return PlaceStyle;
       return Object.assign({}, PlaceStyle, get(this.point, 'params.common.place', {}));
     },
+    /** @return {SDWC.MapPolyline[]} */
     polylines() {
       const polylines = [];
       /** @type {{ position: SDWC.NodePosition[], place: SDWC.NodePlaces }} */
@@ -220,6 +223,7 @@ export default {
       }
       return markers;
     },
+    /** @returns {SDWC.MarkerPlace[]} */
     placeMarkers() {
       const { place } = this.msg;
       const markers = [];
@@ -235,6 +239,7 @@ export default {
       }
       return markers;
     },
+    /** @returns {SDWC.Marker[]} */
     markers() {
       return [
         ...this.waypoints.map(w => w.markers).flat(),

diff --git a/src/components/drone/monitor.vue b/src/components/drone/monitor.vue
@@ -179,14 +179,17 @@ export default {
   name: 'sd-drone-mointor',
   inheritAttrs: false,
   props: {
+    /** @type {Vue.PropOptions<SDWC.NodePoint>} */
     point: {
       type: Object,
       required: true
     },
+    /** @type {Vue.PropOptions<SDWC.NodeConnectionStatus>} */
     status: {
       type: Object,
       required: true
     },
+    /** @type {Vue.PropOptions<SDWC.NodeMsg>} */
     msg: {
       type: Object,
       required: true
@@ -241,12 +244,15 @@ export default {
     };
   },
   computed: {
+    /** @returns {boolean} */
     allDisabled() {
       return this.status.code !== 0;
     },
+    /** @returns {{ source: string, label: string }[]} */
     videoSources() {
       return get(this.point.params, 'source', []);
     },
+    /** @returns {{ type: string, method: string, label: string }[]} */
     availableControls() {
       const controls = [];
       for (const [k, v] of Object.entries(get(this.point.params, 'control', {}))) {
@@ -255,27 +261,34 @@ export default {
       }
       return controls;
     },
+    /** @returns {boolean} */
     hasClickControl() {
       // single click `pin_screen`
       return has(this.point.params, 'control.click');
     },
+    /** @returns {boolean} */
     hasTargetControl() {
       // double click `gimbal_target`
       return has(this.point.params, 'control.target');
     },
+    /** @returns {boolean} */
     hasGimbalControl() {
       return has(this.point.params, 'control.gimbal');
     },
+    /** @returns {boolean} */
     hasZoomControl() {
       return has(this.point.params, 'control.zoom');
     },
+    /** @returns {boolean} */
     hasStickControl() {
       return has(this.point.params, 'control.stick');
     },
+    /** @returns {{ method: string, label: string }[]} */
     availableActions() {
       const enabled = this.msg.action_enabled;
       return get(this.point.params, 'action', []).filter(a => enabled.includes(a.method));
     },
+    /** @returns {{ viewBox: string, elements: { type: string, text: string }[] }} */
     overlaySVG() {
       const { width = 1280, height = 720, shapes = [] } = this.msg.overlay_screen;
       const elements = [];
@@ -295,9 +308,11 @@ export default {
       }
       return { viewBox: `0 0 ${width} ${height}`, elements };
     },
+    /** @returns {boolean} */
     gimbalDisabled() {
       return this.allDisabled || !this.control.enabled.gimbal;
     },
+    /** @returns {{ [key: string]: boolean }} */
     wrapperClass() {
       return {
         'monitor-drone-control--moving': this.gesture.moving
@@ -306,7 +321,7 @@ export default {
   },
   methods: {
     /**
-     * @param {'visual' | 'thermal' | 'msx'} source
+     * @param {string} source
      * @param {MouseEvent} event
      */
     async handleVideoSource(source, event) {
@@ -594,7 +609,7 @@ export default {
           const [min, max] = get(this, 'point.params.control.zoom.zoom', [1, 5.5]);
           if (value > max) {
             value = max;
-          } else if (value < min){
+          } else if (value < min) {
             value = min;
           }
           if (Math.abs(value - this.gimbal.zoom) < 1e-2) {

diff --git a/src/components/drone/status.vue b/src/components/drone/status.vue
@@ -28,14 +28,17 @@ export default {
     }
   },
   computed: {
+    /** @returns {string} */
     flightStatus() {
       const key = `air.status.${this.msg.drone_status.status}`;
       return this.$te(key) ? this.$t(key) : this.msg.drone_status.status;
     },
+    /** @returns {string} */
     flightMode() {
       const key = `air.mode.${this.msg.drone_status.mode}`;
       return this.$t(this.$te(key) ? key : 'air.mode.unknown');
     },
+    /** @returns {string} */
     flightTime() {
       const { time } = this.msg.drone_status;
       /** @type {Intl.DateTimeFormatOptions} */
@@ -48,6 +51,7 @@ export default {
       if (time >= 3600) options.hour = 'numeric';
       return new Date(time * 1000).toLocaleString('en-US', options);
     },
+    /** @returns {SDWC.StatusItem[]} */
     items() {
       const s = this.msg.drone_status;
       return [

diff --git a/src/components/job-file/job-file.vue b/src/components/job-file/job-file.vue
@@ -43,6 +43,7 @@ export default {
     }
   }),
   computed: {
+    /** @returns {string} */
     compo() {
       if (typeof this.file.filename !== 'string') return null;
       const filename = this.file.filename.toLowerCase();