Vue module augmentation and Convert main.js to main.ts

1. Vue module augmentation (src/shims-vue.d.ts)
*Added ComponentCustomProperties so this.$store is typed as Store<RootState> in components.
*Extended Window for $ and jQuery so the jQuery global assignment type-checks.
2. Convert main.js to main.ts
*Renamed main.js to main.ts.
*Removed the vue.config.js entry override so the Vue CLI TypeScript plugin uses main.ts.
*Updated jest.config.js to exclude main.ts from coverage.
*Adjusted the error handler to use unknown for err and vm to match Vue’s types.
*Added as unknown to the jQuery require for type safety.

jest.config.js

@@ -13,7 +13,7 @@ module.exports = {
   moduleFileExtensions: ["js", "ts", "vue"],
   collectCoverageFrom: [
     "src/**/*.{js,ts,vue}",
-    "!src/main.js",
+    "!src/main.ts",
     "!src/constants/*.js",
     "!src/router/**/*.js",
     "!src/helpers/unit-test-helper.js",

src/main.ts

@@ -10,8 +10,8 @@ import experimentMixin from "@/mixins/experiment-mixin.js";
 import "../node_modules/bootstrap/dist/js/bootstrap.js";
 import "../node_modules/jquery-ui/dist/jquery-ui.min.js";
 
-// Make jQuery avaialble globally
-window.$ = window.jQuery = require("jquery");
+// Make jQuery available globally
+window.$ = window.jQuery = require("jquery") as unknown;
 
 import Logger from "@/helpers/logger";
 // Instantiate global logging object
@@ -29,9 +29,14 @@ vueApp.mixin(analyticsMixin);
 vueApp.mixin(experimentMixin);
 
 // Vue Error Handling
-vueApp.config.errorHandler = (err, vm, info) => {
+vueApp.config.errorHandler = (err: unknown, vm: unknown, info: string) => {
+    const error = err instanceof Error ? err : new Error(String(err));
+    const pageName =
+        vm && typeof (vm as { getPageName?: () => string }).getPageName === "function"
+            ? (vm as { getPageName: () => string }).getPageName()
+            : "Unknown";
     global.$logger.logError(
-        `Page Name - ${vm.getPageName()} - ${info}: ${err.message}\n${err.stack}`
+        `Page Name - ${pageName} - ${info}: ${error.message}\n${error.stack}`
     );
 };
 

src/shims-vue.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Vue module augmentation for typed $store in components.
+ * Enables this.$store to be typed with RootState in Vue components.
+ */
+import type { Store } from "vuex";
+import type { RootState } from "@/store/types";
+
+declare module "@vue/runtime-core" {
+    interface ComponentCustomProperties {
+        $store: Store<RootState>;
+    }
+}
+
+declare global {
+    interface Window {
+        $: unknown;
+        jQuery: unknown;
+    }
+}
+
+export {};

tsconfig.json

@@ -16,6 +16,6 @@
       "@/*": ["src/*"]
     }
   },
-  "include": ["src/**/*.ts", "src/**/*.vue"],
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue"],
   "exclude": ["node_modules", "dist", "playwright-tests"]
 }

vue.config.js

@@ -3,10 +3,6 @@ const { environmentVariablesWithDefaults } = require('./environment-variables.js
 
 module.exports = {
     outputDir: "dist/fmg",
-    chainWebpack: (config) => {
-        // Override Vue CLI TypeScript plugin's main.ts entry for gradual migration
-        config.entry("app").clear().add("./src/main.js");
-    },
     publicPath: "/fmg",
     css: {
         loaderOptions: {