Frontend: add actual type checking

.github/workflows/test-and-deploy.yml

@@ -62,6 +62,9 @@ jobs:
       - name: Bun lint
         run: bun --cwd ./core/frontend lint
 
+      - name: Bun type-check
+        run: bun --cwd ./core/frontend type-check
+
       - name: Bun build
         run: bun run --cwd ./core/frontend build
 

core/frontend/package.json

@@ -11,7 +11,8 @@
     "dev": "vite --host",
     "build": "NODE_ENV=production vite build",
     "serve": "echo 'This is a preview server for testing the built website. Please use `dev` command over `serve`.\nStarting preview server in 5 seconds..\n';sleep 5; vite preview",
-    "lint": "eslint --max-warnings=0 --ext .js,.vue --ignore-path .gitignore --ignore-pattern src/components/vue-tour src"
+    "lint": "eslint --max-warnings=0 --ext .js,.vue --ignore-path .gitignore --ignore-pattern src/components/vue-tour src",
+    "type-check": "vue-tsc --noEmit"
   },
   "dependencies": {
     "@google/model-viewer": "^3.0.0",
@@ -57,9 +58,10 @@
     "vue-router": "^3.6.5",
     "vue-tooltip-directive": "^1.0.2",
     "vue-tour": "^2.0.0",
+    "vue-tsc": "^2.1.6",
     "vuedraggable": "^2.24.3",
     "vuetify": "2.7.1",
-    "vuex": "^3.4.0",
+    "vuex": "^3.6.2",
     "vuex-module-decorators": "^1.0.1",
     "webpack": "^5.74.0",
     "wifi-qr-code-generator": "^1.1.1"
@@ -79,7 +81,7 @@
     "eslint-plugin-simple-import-sort": "^10.0.0",
     "eslint-plugin-vue": "^9.9.0",
     "sass": "~1.32.0",
-    "typescript": "~4.9.5",
+    "typescript": "^5.6.2",
     "unplugin-vue-components": "^0.25.2",
     "vite": "3",
     "vite-plugin-pwa": "^0.16.5",

core/frontend/src/App.vue

@@ -15,7 +15,6 @@
           :key="index"
           v-model="selected_widgets"
           :label="name"
-          :value="name"
           class="pa-0 pl-3 ma-0"
         />
       </v-list>

core/frontend/src/components/common/DefaultTooltip.vue

@@ -10,7 +10,7 @@
   </v-tooltip>
 </template>
 
-<script>
+<script lang="ts">
 import Vue from 'vue'
 
 export default Vue.extend({

core/frontend/src/components/common/JsonEditor.vue

@@ -35,7 +35,7 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import 'jsoneditor/dist/jsoneditor.min.css'
 
 import JSONEditor from 'jsoneditor'

core/frontend/src/components/vehiclesetup/calibration.ts

@@ -57,6 +57,10 @@ class Calibrator {
    * @param {PreflightCalibration} type
    */
   private static start(type: PreflightCalibration): void {
+    const getParamValue = (mapping: Partial<Record<PreflightCalibration, number>>): number => {
+      return mapping[type] ?? 0;
+    };
+
     mavlink2rest.sendMessage({
       header: {
         system_id: 255,
@@ -65,38 +69,38 @@ class Calibrator {
       },
       message: {
         type: MAVLinkType.COMMAND_LONG,
-        param1: {
+        param1: getParamValue({
           [PreflightCalibration.GYROSCOPE]: 1,
           [PreflightCalibration.GYROSCOPE_TEMPERATURE]: 3,
-        }[type] || 0,
+        }),
         param2: type === PreflightCalibration.MAGNETOMETER ? 1 : 0,
         param3: type === PreflightCalibration.PRESSURE ? 1 : 0,
-        param4: {
+        param4: getParamValue({
           [PreflightCalibration.RC]: 1,
           [PreflightCalibration.RC_TRIM]: 2,
-        }[type] || 0,
-        param5: {
+        }),
+        param5: getParamValue({
           [PreflightCalibration.ACCELEROMETER]: 1,
           [PreflightCalibration.BOARD_LEVEL]: 2,
           [PreflightCalibration.ACCELEROMETER_TEMPERATURE]: 3,
           [PreflightCalibration.SIMPLE_ACCELEROMETER]: 4,
-        }[type] || 0,
-        param6: {
+        }),
+        param6: getParamValue({
           [PreflightCalibration.COMPASS_MOTOR_INTERFERENCE]: 1,
           [PreflightCalibration.AIRPSEED]: 2,
-        }[type] || 0,
-        param7: {
+        }),
+        param7: getParamValue({
           [PreflightCalibration.ESC]: 1,
           [PreflightCalibration.BAROMETER_TEMPERATURE]: 3,
-        }[type] || 0,
+        }),
         command: {
           type: MavCmd.MAV_CMD_PREFLIGHT_CALIBRATION,
         },
         target_system: autopilot_data.system_id,
         target_component: 1,
         confirmation: 0,
       },
-    })
+    });
   }
 
   /**

core/frontend/src/components/wifi/WifiManager.vue

@@ -47,7 +47,7 @@
         v-if="current_network"
         connected
         :network="current_network"
-        :ip-address="wifi_status.ip_address"
+        :ip-address="wifi_status?.ip_address"
         @click="openDisconnectionDialog"
       />
 
@@ -66,7 +66,7 @@
             clearable
             class="ml-7 mr-7"
           />
-          <div v-if="!filtered_networks.isEmpty()">
+          <div v-if="!filtered_networks?.isEmpty()">
             <wifi-network-card
               v-for="(network, key) in filtered_networks"
               :key="key"

core/frontend/src/components/wizard/DefaultParamLoader.vue

@@ -87,7 +87,7 @@
 <script lang="ts">
 import { SemVer } from 'semver'
 import Vue, { PropType } from 'vue'
-import { Dictionary } from 'vue-router'
+import { Dictionary } from '@/types/common'
 
 import { OneMoreTime } from '@/one-more-time'
 import autopilot_data from '@/store/autopilot'
@@ -125,7 +125,7 @@ export default Vue.extend({
     fetch_current_board_task: new OneMoreTime({ delay: 10000, disposeWith: this }),
   }),
   computed: {
-    filtered_param_sets(): Dictionary<Dictionary<number>> | undefined {
+    filtered_param_sets(): Dictionary<Dictionary<number>> {
       const fw_patch = `${this.vehicle}/${this.version}/${this.board}`
       const fw_minor = `${this.vehicle}/${this.version?.major}.${this.version?.minor}/${this.board}`
       const fw_major = `${this.vehicle}/${this.version?.major}/${this.board}`

core/frontend/src/components/wizard/Wizard.vue

@@ -316,12 +316,17 @@ enum ApplyStatus {
   Failed,
 }
 
+interface Binds {
+    configurations: any,
+    loading: any,
+}
+
 // There is no type that could serve for generic binds and generic vue components
 interface VehicleConfigurationPage {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   page: any,
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  binds: any,
+  binds: Binds
 }
 
 export default Vue.extend({
@@ -383,7 +388,7 @@ export default Vue.extend({
     current_page(): unknown {
       return this.configuration_pages[this.configuration_page_index].page
     },
-    current_page_bind(): unknown {
+    current_page_bind(): Binds {
       return this.configuration_pages[this.configuration_page_index].binds
     },
   },
@@ -702,8 +707,11 @@ export default Vue.extend({
       const response = await fetch(`${REPOSITORY_ROOT}/scripts/ardupilot/${script}`)
       return response.text()
     },
+    param_loader(): any {
+      return this.$refs.param_loader
+    },
     validateParams(): boolean {
-      return this.$refs.param_loader?.validateParams()
+      return (this.param_loader as any).validateParams()
     },
   },
 })

core/frontend/src/main.ts

@@ -59,6 +59,7 @@ if (version && isOfficialTag) {
 }
 
 new Vue({
+  // @ts-ignore
   router,
   store,
   vuetify,

core/frontend/src/one-more-time.ts

@@ -72,7 +72,7 @@ export class OneMoreTime {
       const id = setInterval(() => {
         // Check if object does not exist anymore or if it was destroyed by vue
         // eslint-disable-next-line
-        if (!ref.deref() || ref.deref()._isDestroyed) {
+        if (!ref.deref() || (ref.deref() as any)._isDestroyed) {
           this.stop()
           clearInterval(id)
         }
@@ -133,7 +133,7 @@ export class OneMoreTime {
   }
 
   // Celebrate and dance so free
-  [Symbol.dispose](): void {
+  [(Symbol as any).dispose](): void {
     this.isDisposed = true
   }
 

core/frontend/src/store/autopilot.ts

@@ -11,6 +11,7 @@ import ParameterFetcher from '@/types/autopilot/parameter-fetcher'
 
 const parameterFetcher = new ParameterFetcher()
 
+// @ts-ignore
 @Module({
   dynamic: true,
   store,

core/frontend/src/store/autopilot_manager.ts

@@ -8,6 +8,7 @@ import {
   FlightController, SerialEndpoint,
 } from '@/types/autopilot'
 
+// @ts-ignore
 @Module({
   dynamic: true,
   store,

core/frontend/src/store/beacon.ts

@@ -16,6 +16,7 @@ let prefetched_domains = false
 let prefetched_ips = false
 let prefetched_names = false
 
+// @ts-ignore
 @Module({
   dynamic: true,
   store,

core/frontend/src/store/bridget.ts

@@ -15,6 +15,7 @@ const notifier = new Notifier(bridget_service)
 let prefetched_bridges = false
 let prefetched_serial = false
 
+// @ts-ignore
 @Module({
   dynamic: true,
   store,

core/frontend/src/store/ethernet.ts

@@ -5,6 +5,7 @@ import {
 import store from '@/store'
 import { EthernetInterface } from '@/types/ethernet'
 
+// @ts-ignore
 @Module({
   dynamic: true,
   store,

core/frontend/src/store/frontend.ts

@@ -5,6 +5,7 @@ import {
 
 import store from '@/store'
 
+// @ts-ignore
 @Module({
   dynamic: true,
   store,

core/frontend/src/store/helper.ts

@@ -20,6 +20,7 @@ type CheckSiteStatus = {
 
 type SiteStatus = Record<string, CheckSiteStatus>
 
+// @ts-ignore
 @Module({
   dynamic: true,
   store,

core/frontend/src/store/mavlink.ts

@@ -16,6 +16,7 @@ interface messsageRefreshRate {
   refreshRate: number
 }
 
+// @ts-ignore
 @Module({
   dynamic: true,
   store,

core/frontend/src/store/nmea-injector.ts

@@ -10,6 +10,7 @@ import back_axios from '@/utils/api'
 
 const notifier = new Notifier(nmea_injector_service)
 
+// @ts-ignore
 @Module({
   dynamic: true,
   store,

core/frontend/src/store/notifications.ts

@@ -7,6 +7,7 @@ import {
   CumulatedNotification, Notification, NotificationLevel,
 } from '@/types/notifications'
 
+// @ts-ignore
 @Module({
   dynamic: true,
   store,

core/frontend/src/store/ping.ts

@@ -14,6 +14,7 @@ const notifier = new Notifier(ping_service)
 
 let prefecthed_pings = false
 
+// @ts-ignore
 @Module({
   dynamic: true,
   store,

core/frontend/src/store/settings.ts

@@ -7,6 +7,7 @@ import store from '@/store'
 import beacon from '@/store/beacon'
 import { castString } from '@/utils/helper_functions'
 
+// @ts-ignore
 @Module({
   dynamic: true,
   store,

core/frontend/src/store/system-information.ts

@@ -37,6 +37,7 @@ export enum FetchType {
 
 const notifier = new Notifier(system_information_service)
 
+// @ts-ignore
 @Module({
   dynamic: true,
   store,

core/frontend/src/store/video.ts

@@ -20,6 +20,7 @@ export interface Thumbnail {
 
 const notifier = new Notifier(video_manager_service)
 
+// @ts-ignore
 @Module({
   dynamic: true,
   store,

core/frontend/src/store/wifi.ts

@@ -8,12 +8,12 @@ import {
 } from '@/types/wifi'
 import { sorted_networks } from '@/utils/wifi'
 
+// @ts-ignore
 @Module({
   dynamic: true,
   store,
   name: 'wifi',
 })
-
 class WifiStore extends VuexModule {
   API_URL = '/wifi-manager/v1.0'
 

core/frontend/src/types/autopilot/parameter-table.ts

@@ -148,7 +148,7 @@ export default class ParametersTable {
             console.log(`ignoring ${name} : ${parameter}`)
             continue
           }
-          this.metadata[name] = parameter
+          this.metadata[name] = (parameter as Metadata)
         }
       }
     }