Switched tsc for vue-tsc and fixed remaining errors

Author: ebkr

package.json

@@ -23,7 +23,7 @@
     "publish-win": "quasar build --mode electron -T win32 --publish always",
     "publish-linux": "quasar build --mode electron -T linux --publish always",
     "test": "vitest run ./test/vitest",
-    "typecheck": "tsc"
+    "typecheck": "vue-tsc"
   },
   "dependencies": {
     "@node-steam/vdf": "^2.1.0",
@@ -100,12 +100,12 @@
     "sass": "^1.70.0",
     "sass-loader": "^16.0.5",
     "sinon": "^11.1.1",
-    "tsc": "^2.0.4",
     "tsx": "^4.20.5",
     "typescript": "^5.9.2",
     "vite-plugin-node-polyfills": "^0.23.0",
     "vitest": "^3.2.4",
     "vue": "^3.5.16",
+    "vue-tsc": "^3.3.5",
     "wallaby-vue-compiler": "^1.0.3"
   },
   "engines": {

src-electron/ipc/node-path-impl.ts

@@ -5,8 +5,8 @@ export function hookPathIpc(browserWindow: BrowserWindow) {
     ipcMain.on("node:path:join", (event, ...args) => {
         event.returnValue = path.join(...args);
     });
-    ipcMain.on("node:path:basename", (event, toResolve) => {
-        event.returnValue = path.basename(toResolve);
+    ipcMain.on("node:path:basename", (event, base, suffix) => {
+        event.returnValue = path.basename(base, suffix);
     });
     ipcMain.on("node:path:resolve", (event, ...args) => {
         event.returnValue = path.resolve(...args);

src/components/DeferredInput.vue

@@ -22,5 +22,5 @@ function emitChange(value: string): void {
 </script>
 
 <template>
-    <input class="input" :value="modelValue" @input="e => debounceExecutor(e.target.value)" />
+    <input class="input" :value="modelValue" @input="e => debounceExecutor((e.target! as HTMLInputElement).value!)" />
 </template>

src/components/Progress.vue

@@ -18,8 +18,7 @@ type ProgressProps = {
 
 const props = withDefaults(defineProps<ProgressProps>(), {
     max: 100,
-    value: undefined,
-    className: []
+    className: () => [] as string[]
 });
 </script>
 

src/components/buttons/DonateButton.vue

@@ -1,6 +1,6 @@
 <template>
     <ExternalLink v-if="mod && mod.getDonationLink()"
-          :url="mod.getDonationLink()"
+          :url="mod.getDonationLink()!"
           class="button"
           v-tooltip.top="{content: 'Donate to the mod author', distance: 10}">
         <i class='fas fa-heart margin-right margin-right--half-width'></i>

src/components/buttons/DonateIconButton.vue

@@ -1,6 +1,6 @@
 <template>
     <span v-if="mod && mod.getDonationLink() && extraRenderCondition" class="card-header-icon">
-        <ExternalLink :url="mod.getDonationLink()" tag="span">
+        <ExternalLink :url="mod.getDonationLink()!" tag="span">
             <i class="fas fa-heart" v-tooltip.left="'Donate to the mod author'"></i>
         </ExternalLink>
     </span>

src/components/importing/LocalFileImportModal.vue

@@ -133,7 +133,7 @@ async function selectFile() {
         filters: []
     }).then(value => {
         if (value.length > 0) {
-            fileToImport.value = value[0];
+            fileToImport.value = value[0]!;
             assumeDefaults();
         } else {
             waitingForSelection.value = false;
@@ -228,28 +228,28 @@ function inferFieldValuesFromFile(file: string): ImportFieldAttributes {
     }
 
     if (hyphenSeparated.length === 3) {
-        data.modAuthor = hyphenSeparated[0];
-        data.modName = hyphenSeparated[1];
-        const modVersion = santizeVersionNumber(hyphenSeparated[2]).toString().split(".");
+        data.modAuthor = hyphenSeparated[0]!;
+        data.modName = hyphenSeparated[1]!;
+        const modVersion = santizeVersionNumber(hyphenSeparated[2]!).toString().split(".");
         data.modVersionMajor = Number(modVersion[0]);
         data.modVersionMinor = Number(modVersion[1]);
         data.modVersionPatch = Number(modVersion[2]);
     } else if (hyphenSeparated.length === 2) {
-        data.modName = hyphenSeparated[0];
-        const modVersion = santizeVersionNumber(hyphenSeparated[1]).toString().split(".");
+        data.modName = hyphenSeparated[0]!;
+        const modVersion = santizeVersionNumber(hyphenSeparated[1]!).toString().split(".");
         data.modVersionMajor = Number(modVersion[0]);
         data.modVersionMinor = Number(modVersion[1]);
         data.modVersionPatch = Number(modVersion[2]);
     } else if (underscoreSeparated.length === 3) {
-        data.modAuthor = underscoreSeparated[0];
-        data.modName = underscoreSeparated[1];
-        const modVersion = santizeVersionNumber(underscoreSeparated[2]).toString().split(".");
+        data.modAuthor = underscoreSeparated[0]!;
+        data.modName = underscoreSeparated[1]!;
+        const modVersion = santizeVersionNumber(underscoreSeparated[2]!).toString().split(".");
         data.modVersionMajor = Number(modVersion[0]);
         data.modVersionMinor = Number(modVersion[1]);
         data.modVersionPatch = Number(modVersion[2]);
     } else if (underscoreSeparated.length === 2) {
-        data.modName = underscoreSeparated[0];
-        const modVersion = santizeVersionNumber(underscoreSeparated[1]).toString().split(".");
+        data.modName = underscoreSeparated[0]!;
+        const modVersion = santizeVersionNumber(underscoreSeparated[1]!).toString().split(".");
         data.modVersionMajor = Number(modVersion[0]);
         data.modVersionMinor = Number(modVersion[1]);
         data.modVersionPatch = Number(modVersion[2]);

src/components/input/MultiSelect.vue

@@ -46,7 +46,7 @@ const visibleSelectedOptions = computed(() => {
     return props.selected.filter(value => value.trim().length > 0);
 })
 
-function updateSelection(event: InputEvent) {
+function updateSelection(event: Event) {
     const target = event.target as HTMLSelectElement;
     emits('selection-changed', [...props.selected, target.value]);
     target.selectedIndex = 0;

src/components/modals/CategorySelectorModal.vue

@@ -9,15 +9,15 @@ type CategorySelectorModalProps = {
 const props = defineProps<CategorySelectorModalProps>();
 const emits = defineEmits<{
     'selected-category': [ev: Event];
-    'deselectedCategory': [value: string];
+    'deselected-category': [value: string];
 }>();
 
 function emitSelected(event: Event) {
     emits('selected-category', event)
 }
 
 function emitDeselected(key: string) {
-    emits("deselected-category", key);
+    emits('deselected-category', key);
 }
 </script>
 

src/components/modals/ErrorModal.vue

@@ -28,8 +28,8 @@ function close() {
                     <h5 class="title is-5">Suggestion</h5>
                     <p>{{solution}}</p>
                 </div>
-                <div class="mt-3 text-right" v-if="error.action">
-                    <button class="button is-white" @click="() => { error.action.function(); close(); }">
+                <div class="mt-3 text-right" v-if="error && error.action">
+                    <button class="button is-white" @click="() => { error?.action?.function(); close(); }">
                         {{error.action.label}}
                     </button>
                 </div>