fix: improve TypeScript type safety across views

Changes:
- Add proper type annotations for component properties
- Fix null checks with optional chaining
- Add missing interface properties
- Replace any with proper types where possible
- Move interfaces from endorserServer to interfaces/
- Add proper Router and Route typing
- Add default empty string for optional text fields

This improves type safety and reduces TypeScript errors across views.

src/views/GiftedDetailsView.vue

@@ -261,21 +261,20 @@
 
 <script lang="ts">
 import { Component, Vue } from "vue-facing-decorator";
-import { Router } from "vue-router";
+import { RouteLocationNormalizedLoaded, Router } from "vue-router";
 
 import ImageMethodDialog from "../components/ImageMethodDialog.vue";
 import QuickNav from "../components/QuickNav.vue";
 import TopMessage from "../components/TopMessage.vue";
 import { DEFAULT_IMAGE_API_SERVER, NotificationIface } from "../constants/app";
 import { db, retrieveSettingsForActiveAccount } from "../db/index";
+import { GenericCredWrapper, GiveVerifiableCredential } from "../interfaces";
 import {
   createAndSubmitGive,
   didInfo,
   editAndSubmitGive,
-  GenericCredWrapper,
   getHeaders,
   getPlanFromCache,
-  GiveVerifiableCredential,
   hydrateGive,
 } from "../libs/endorserServer";
 import * as libsUtil from "../libs/util";
@@ -290,6 +289,8 @@ import { retrieveAccountDids } from "../libs/util";
 })
 export default class GiftedDetails extends Vue {
   $notify!: (notification: NotificationIface, timeout?: number) => void;
+  $route!: RouteLocationNormalizedLoaded;
+  $router!: Router;
 
   activeDid = "";
   apiServer = "";
@@ -322,9 +323,9 @@ export default class GiftedDetails extends Vue {
 
   async mounted() {
     try {
-      this.prevCredToEdit = (this.$route as Router).query["prevCredToEdit"]
+      this.prevCredToEdit = (this.$route.query["prevCredToEdit"] as string)
         ? (JSON.parse(
-            (this.$route as Router).query["prevCredToEdit"],
+            (this.$route.query["prevCredToEdit"] as string),
           ) as GenericCredWrapper<GiveVerifiableCredential>)
         : undefined;
     } catch (error) {
@@ -341,24 +342,22 @@ export default class GiftedDetails extends Vue {
 
     const prevAmount = this.prevCredToEdit?.claim?.object?.amountOfThisGood;
     this.amountInput =
-      (this.$route as Router).query["amountInput"] ||
+      (this.$route.query["amountInput"] as string) ||
       (prevAmount ? String(prevAmount) : "") ||
       this.amountInput;
     this.description =
-      (this.$route as Router).query["description"] ||
+      (this.$route.query["description"] as string) ||
       this.prevCredToEdit?.claim?.description ||
       this.description;
-    this.destinationPathAfter = (this.$route as Router).query[
-      "destinationPathAfter"
-    ];
-    this.giverDid = ((this.$route as Router).query["giverDid"] ||
-      this.prevCredToEdit?.claim?.agent?.identifier ||
+    this.destinationPathAfter = (this.$route.query["destinationPathAfter"] as string) || "";
+    this.giverDid = ((this.$route.query["giverDid"] as string) ||
+      (this.prevCredToEdit?.claim?.agent as any)?.identifier ||
       this.giverDid) as string;
     this.giverName =
-      ((this.$route as Router).query["giverName"] as string) || "";
+      ((this.$route.query["giverName"] as string) || "");
     this.hideBackButton =
-      (this.$route as Router).query["hideBackButton"] === "true";
-    this.message = ((this.$route as Router).query["message"] as string) || "";
+      (this.$route.query["hideBackButton"] as string) === "true";
+    this.message = ((this.$route.query["message"] as string) || "");
 
     // find any offer ID
     const fulfills = this.prevCredToEdit?.claim?.fulfills;
@@ -368,7 +367,7 @@ export default class GiftedDetails extends Vue {
         ? [fulfills]
         : [];
     const offer = fulfillsArray.find((rec) => rec["@type"] === "Offer");
-    this.offerId = ((this.$route as Router).query["offerId"] ||
+    this.offerId = ((this.$route.query["offerId"] as string) ||
       offer?.identifier ||
       this.offerId) as string;
 
@@ -378,7 +377,7 @@ export default class GiftedDetails extends Vue {
     );
     // eslint-disable-next-line prettier/prettier
     this.fulfillsProjectId =
-      ((this.$route as Router).query["fulfillsProjectId"] ||
+      ((this.$route.query["fulfillsProjectId"] as string) ||
       fulfillsProject?.identifier ||
       this.fulfillsProjectId) as string;
 
@@ -392,40 +391,38 @@ export default class GiftedDetails extends Vue {
     const providerProject = providerArray.find(
       (rec) => rec["@type"] === "PlanAction",
     );
-    this.providerProjectId = ((this.$route as Router).query[
-      "providerProjectId"
-    ] ||
+    this.providerProjectId = ((this.$route.query["providerProjectId"] as string) ||
       providerProject?.identifier ||
       this.providerProjectId) as string;
 
-    this.recipientDid = ((this.$route as Router).query["recipientDid"] ||
+    this.recipientDid = ((this.$route.query["recipientDid"] as string) ||
       this.prevCredToEdit?.claim?.recipient?.identifier) as string;
     this.recipientName =
-      ((this.$route as Router).query["recipientName"] as string) || "";
-    this.unitCode = ((this.$route as Router).query["unitCode"] ||
+      ((this.$route.query["recipientName"] as string) || "");
+    this.unitCode = ((this.$route.query["unitCode"] as string) ||
       this.prevCredToEdit?.claim?.object?.unitCode ||
       this.unitCode) as string;
 
     this.imageUrl =
-      ((this.$route as Router).query["imageUrl"] as string) ||
+      ((this.$route.query["imageUrl"] as string) ||
       this.prevCredToEdit?.claim?.image ||
       localStorage.getItem("imageUrl") ||
-      this.imageUrl;
+      this.imageUrl) as string;
 
     // this is an endpoint for sharing project info to highlight something given
     // https://developer.mozilla.org/en-US/docs/Web/Manifest/share_target
-    if ((this.$route as Router).query["shareTitle"]) {
+    if ((this.$route.query["shareTitle"] as string)) {
       this.description =
-        ((this.$route as Router).query["shareTitle"] as string) +
+        ((this.$route.query["shareTitle"] as string) || "") +
         (this.description ? "\n" + this.description : "");
     }
-    if ((this.$route as Router).query["shareText"]) {
+    if ((this.$route.query["shareText"] as string)) {
       this.description =
         (this.description ? this.description + "\n" : "") +
-        ((this.$route as Router).query["shareText"] as string);
+        ((this.$route.query["shareText"] as string) || "");
     }
-    if ((this.$route as Router).query["shareUrl"]) {
-      this.imageUrl = (this.$route as Router).query["shareUrl"] as string;
+    if ((this.$route.query["shareUrl"] as string)) {
+      this.imageUrl = (this.$route.query["shareUrl"] as string);
     }
 
     const settings = await retrieveSettingsForActiveAccount();