Improve linting and fix build errors

src/components/Navbar.vue

@@ -18,11 +18,11 @@ import { useControllerStore } from '../store/useController';
 const roslib = useRoslibStore();
 const controller = useControllerStore();
 const currentTab = ref(0);
-const setCurrentTab = (e) => {
-  currentTab.value = e;
+const setCurrentTab = (newValue: number) => {
+  currentTab.value = newValue;
 };
 
-type PageIcon = { icon: string; label: string; helperText: string }[];
+type PageIcon = { icon: object; label: string; helperText: string }[];
 
 const pageIconArr: PageIcon = [
   {

src/components/telemetry/moteus/GenericMotorTelemetry.vue

@@ -1,6 +1,6 @@
 <!-- TODO: Need to refactor entire to fix Typescript issues -->
 <script lang="ts" setup>
 import { ref, onMounted, inject } from 'vue';
 import DropDownItem from './DropDownItem.vue';
 import TelemetryDataDisplay from './TelemetryDataDisplay.vue';
 import SaveCSVData from '../../../lib/saveCSVData';
@@ -9,28 +9,33 @@
 
 onMounted(() => initialize());
 
-const props = defineProps({
-  displayName: String,
-  dataSourceMethod: Function,
-  dataSourceParamater: String,
-  update_ms: String,
-  showAllFeatures: Boolean,
-  motorType: String,
-});
+export interface GenericMotorTelemetryProps {
+  displayName: string;
+  dataSourceMethod: (
+    param: number,
+    dataCallback: (result: { json_payload: string }) => void,
+  ) => void;
+  dataSourceParameter: number;
+  updateMs: number;
+  showAllFeatures: boolean;
+  motorType: string;
+}
+
+const props = defineProps<GenericMotorTelemetryProps>();
 
 let isRecordingData = false;
-let csvData;
+let csvData: SaveCSVData;
 
 // We use this to fill up csv data
 //Each element is another array that holds the actual data
 let showCheckbox = ref(true);
 
 let recordButtonText = ref('Start Recording');
 
-let pollingData; //Used to keep track of the object id when we do setInterval
+let pollingData: number; //Used to keep track of the object id when we do setInterval
 
 let getMoteusMotorStateService: ROSLIB.Service;
 const roslib = useRoslibStore();
 
 /**
  * This is used to store what kind of data we will be displaying
@@ -40,7 +45,15 @@
  * show up, assuming that the data recieved from the the rover also has these values
  */
 
-const moteuesDataChoice = ref([]);
+interface MoteuesDataChoice {
+  prettyName: string;
+  identifier: string;
+  dataValue: string;
+  isSelected: boolean;
+  shouldRecordData: boolean;
+}
+
+const moteuesDataChoice = ref<MoteuesDataChoice[]>([]);
 let hasBuiltMoteusDataChoice = false;
 
 function initialize() {
@@ -49,9 +62,9 @@
   // pollingData = setInterval(updateUIWithNewData, props.update_ms);
 }
 
-function updateUIWithNewData(jsonString) {
+function updateUIWithNewData(_jsonString: unknown) {
   if (props.dataSourceMethod !== undefined) {
-    let result = props.dataSourceMethod(props.dataSourceParamater, dataCallback);
+    let result = props.dataSourceMethod(props.dataSourceParameter, dataCallback);
   }
 
   if (isRecordingData) {
@@ -61,15 +74,15 @@
   //This code section is used to change the polling rate
   clearInterval(pollingData); //Stop the interval
 
-  if (props.update_ms < 4) {
+  if (props.updateMs === undefined || props.updateMs < 4) {
     //So we dont break the thing by going slower. It is 4 because browser limitations
     pollingData = setInterval(updateUIWithNewData, 4);
   } else {
-    pollingData = setInterval(updateUIWithNewData, props.update_ms);
+    pollingData = setInterval(updateUIWithNewData, props.updateMs);
   }
 }
 
-function dataCallback(result) {
+function dataCallback(result: { json_payload: string }) {
   if (!hasBuiltMoteusDataChoice) {
     hasBuiltMoteusDataChoice = true;
     buildMoteusDataChoice(result);
@@ -88,7 +101,7 @@
         if (!Number.isNaN(dataEntry)) {
           if (Number.isInteger(dataEntry)) {
             //if int
-            object.dataValue = dataEntry;
+            object.dataValue = dataEntry.toString();
           } else {
             object.dataValue = dataEntry.toFixed(5);
           }
@@ -100,7 +113,7 @@
   }
 }
 
-function buildMoteusDataChoice(result) {
+function buildMoteusDataChoice(result: { json_payload: string }) {
   let json = JSON.parse(result.json_payload);
 
   for (const key in json) {
@@ -129,7 +142,7 @@
     let entry = moteuesDataChoice.value[index];
 
     //If we have selected that entry to be recorded
-    if (entry.shouldRecordData === true) {
+    if (entry.shouldRecordData) {
       if (entry.dataValue !== 'N/A') {
         tempDataArray.push(entry.dataValue);
       } else {
@@ -150,7 +163,7 @@
 function itemClicked(itemName: string) {
   let mything = getMoteusDataObjectFromIdentifier(itemName);
   if (mything !== null) {
-    mything.isSelected.value = !mything.isSelected.value;
+    mything.isSelected = !mything.isSelected;
   }
 }
 
@@ -181,13 +194,15 @@
     recordButtonText.value = 'Start Recording';
     showCheckbox.value = true;
 
-    csvData.saveToFile(props.displayName);
+    if (props.displayName) {
+      csvData.saveToFile(props.displayName);
+    }
   }
 
   isRecordingData = !isRecordingData;
 }
 
-function getMoteusDataObjectFromIdentifier(itemName: string) {
+function getMoteusDataObjectFromIdentifier(itemName: string): MoteuesDataChoice | null {
   for (let index = 0; index < moteuesDataChoice.value.length; index++) {
     if (moteuesDataChoice.value[index].identifier === itemName) {
       return moteuesDataChoice.value[index];

src/lib/interface/robotInfo.ts

@@ -1,22 +1,20 @@
 import ROSLIB from 'roslib';
 
 export default class RobotInfo {
-  myROS = null;
-  getMoteusMotorStateService = null;
+  myROS: ROSLIB.Ros;
+  getMoteusMotorStateService: ROSLIB.Service<{ target_can_id: number }, { json_payload: string }>;
 
-  constructor(givenROS) {
+  constructor(givenROS: ROSLIB.Ros) {
     this.myROS = givenROS;
 
-    if (this.myROS !== null) {
-      this.getMoteusMotorStateService = new ROSLIB.Service({
-        ros: this.myROS,
-        name: '/get_moteus_motor_state',
-        serviceType: 'MoteusState',
-      });
-    }
+    this.getMoteusMotorStateService = new ROSLIB.Service({
+      ros: this.myROS,
+      name: '/get_moteus_motor_state',
+      serviceType: 'MoteusState',
+    });
   }
 
-  getMoteusMotorState(canfdID: number, callback) {
+  getMoteusMotorState(canfdID: number, callback: (result: { json_payload: string }) => void) {
     const request = {
       target_can_id: canfdID,
     };

src/lib/saveCSVData.ts

@@ -1,14 +1,14 @@
 export default class SaveCSVData {
   header: string[] = [];
-  csvDataObjects: object[] = [];
+  csvDataObjects: string[][] = [];
 
   constructor() {}
 
   setHeader(target: string[]) {
     this.header = target;
   }
 
-  addDataEntry(dataEntry: object[]) {
+  addDataEntry(dataEntry: string[]) {
     //console.log(dataEntry.toString())
     this.csvDataObjects.push(dataEntry);
   }
@@ -20,10 +20,7 @@ export default class SaveCSVData {
     // Fill in the values
     for (let fullEntryIndex = 0; fullEntryIndex < this.csvDataObjects.length; fullEntryIndex++) {
       //Grabs the data array entry from the list of data (csvDataObjects)
-      // TODO: Refactor so do not use "any"
-      // Make type probably
-      // eslint-disable-next-line  @typescript-eslint/no-explicit-any
-      const entryArray: any = this.csvDataObjects[fullEntryIndex];
+      const entryArray = this.csvDataObjects[fullEntryIndex];
       let entryString = '';
 
       //Builds the line

src/pages/Telemetry.vue

@@ -1,7 +1,7 @@
 <!-- All information about rover like motor speed etc, position, potential record and export to csv -->
 <script setup lang="ts">
 import GenericMotorTelemetry from '../components/telemetry/moteus/GenericMotorTelemetry.vue';
-import { ref, onMounted, watch } from 'vue';
+import { ref, onMounted, watch, useTemplateRef } from 'vue';
 import RobotInfo from '@/lib/interface/robotInfo';
 import { useRoslibStore } from '@/store/useRoslib';
 
@@ -68,9 +68,9 @@ let updateTimeMs = ref(100);
 let recordingAll = ref(false);
 let isFinishedLoading = ref(false);
 
-const myChild = ref(null);
+const myChild = useTemplateRef<(typeof GenericMotorTelemetry)[]>('myChild');
 
-let robotInfo;
+let robotInfo: RobotInfo;
 
 onMounted(() => initialize());
 
@@ -100,7 +100,10 @@ function recordAllPressed() {
   recordingAll.value = !recordingAll.value;
 }
 
-function getMoteusStateProxy(param, dataCallback) {
+function getMoteusStateProxy(
+  param: number,
+  dataCallback: (result: { json_payload: string }) => void,
+) {
   return robotInfo.getMoteusMotorState(param, dataCallback);
 }
 </script>
@@ -136,10 +139,10 @@ function getMoteusStateProxy(param, dataCallback) {
           class="telemetry-motor"
           :display-name="item.displayName"
           :show-all-features="true"
-          :update-ms="updateTimeMs.toString()"
+          :update-ms="updateTimeMs"
           :motor-type="item.controller"
           :data-source-method="getMoteusStateProxy"
-          :data-source-paramater="item.canfdID.toString()"
+          :data-source-parameter="item.canfdID"
         >
         </GenericMotorTelemetry>
       </div>

src/types.ts

@@ -1 +1,13 @@
 // Any Global Types go here
+declare module 'vue-material-design-icons/*.vue' {
+  import type { DefineComponent } from 'vue';
+
+  const IconVue: DefineComponent<{
+    /// `size` defaults to 24
+    size?: number;
+    /// `fillColor` defaults to 'currentColor'
+    fillColor?: string;
+    title?: string;
+  }>;
+  export default IconVue;
+}

tsconfig.json

@@ -4,10 +4,9 @@
   "compilerOptions": {
     "importsNotUsedAsValues": "remove",
     "isolatedModules": false,
-    "noImplicitAny": false,
+    "noImplicitAny": true,
+    "strict": true,
     "baseUrl": ".",
-    "types": ["node"],
-
     "paths": {
       "@/*": ["./src/*"]
     },