refactor: migrate to typescript

.github/workflows/compare.yml

@@ -71,8 +71,8 @@ jobs:
               }
           }
 
-          $appInstallApp = "app/src/assets/js/appinstall.js"
-          $appInstallWeb = "website/src/assets/js/appinstall.js"
+          $appInstallApp = "app/src/assets/js/appinstall.ts"
+          $appInstallWeb = "website/src/assets/js/appinstall.ts"
 
           if ((Test-Path $appInstallApp) -and (Test-Path $appInstallWeb)) {
               if ((Get-FileHash $appInstallApp).Hash -ne (Get-FileHash $appInstallWeb).Hash) {
@@ -81,8 +81,8 @@ jobs:
               }
           }
 
-          $scriptsApp = "app/src/assets/js/scripts.js"
-          $scriptsWeb = "website/src/assets/js/scripts.js"
+          $scriptsApp = "app/src/assets/js/scripts.ts"
+          $scriptsWeb = "website/src/assets/js/scripts.ts"
 
           if ((Test-Path $scriptsApp) -and (Test-Path $scriptsWeb)) {
               if ((Get-FileHash $scriptsApp).Hash -ne (Get-FileHash $scriptsWeb).Hash) {

app/src/assets/js/appinstall.js → app/src/assets/js/appinstall.ts

@@ -235,7 +235,7 @@ function appsInstallChocolatey() {
   function getCheckedUrls() {
     return appListChocolatey
       .filter((app) => {
-        const element = document.getElementById(app.id);
+        const element = document.getElementById(app.id) as HTMLInputElement;
         return element && element.checked;
       })
       .map((app) => app.url);
@@ -244,7 +244,7 @@ function appsInstallChocolatey() {
   // Function to update the command display
   function updateCommandDisplay() {
     const checkedUrls = getCheckedUrls();
-    const allUrls = [...checkedUrls, ...window.manualURLs];
+    const allUrls = [...checkedUrls, ...(window.manualURLs ?? [])];
     const finalURL = allUrls
       .filter((url) => url && url.trim() !== "")
       .map((url) => `\\"${url}\\"`)
@@ -261,19 +261,29 @@ function appsInstallChocolatey() {
         : "";
 
     // Display the final URL in the div
-    document.querySelector(".div-install").style.display = allUrls.length > 0 ? "block" : "none";
-    document.querySelector(".winget-container").style.display = "none";
-    document.querySelector(".chocolatey-container").style.display =
-      allUrls.length > 0 ? "block" : "none";
-
+    const divInstall = document.querySelector(".div-install") as HTMLDivElement;
+    const wingetContainer = document.querySelector(".winget-container") as HTMLDivElement;
+    const chocolateyContainer = document.querySelector(".chocolatey-container") as HTMLDivElement;
     const commandDisplay = document.querySelector(".commandDisplay");
-    commandDisplay.textContent = command;
-
     const installingApps = document.querySelector(".installingApps");
+    if (
+      !divInstall ||
+      !wingetContainer ||
+      !chocolateyContainer ||
+      !commandDisplay ||
+      !installingApps
+    )
+      return;
+
+    divInstall.style.display = allUrls.length > 0 ? "block" : "none";
+    wingetContainer.style.display = "none";
+    chocolateyContainer.style.display = allUrls.length > 0 ? "block" : "none";
+
+    commandDisplay.textContent = command;
     installingApps.textContent = allUrls.join(", ");
 
     const manualList = document.getElementById("manualList");
-    if (window.manualURLs.length > 0) {
+    if (manualList && window.manualURLs && window.manualURLs.length > 0) {
       manualList.innerHTML = "Manual packages added: " + window.manualURLs.join(" | ");
     }
   }
@@ -523,7 +533,7 @@ function appsInstallWinget() {
   function getCheckedUrls() {
     return appListWinget
       .filter((app) => {
-        const element = document.getElementById(app.id);
+        const element = document.getElementById(app.id) as HTMLInputElement;
         return element && element.checked;
       })
       .map((app) => app.url);
@@ -532,7 +542,7 @@ function appsInstallWinget() {
   // Function to update the command display
   function updateCommandDisplay() {
     const checkedUrls = getCheckedUrls();
-    const allUrls = [...checkedUrls, ...window.manualURLs];
+    const allUrls = [...checkedUrls, ...(window.manualURLs ?? [])];
     const finalURL = allUrls
       .filter((url) => url && url.trim() !== "")
       .map((url) => `\\"${url}\\"`)
@@ -546,22 +556,33 @@ function appsInstallWinget() {
         : "";
 
     // Display the final URL in the div
-    document.querySelector(".div-install").style.display = allUrls.length > 0 ? "block" : "none";
-    document.querySelector(".chocolatey-container").style.display = "none";
-    document.querySelector(".winget-container").style.display =
-      allUrls.length > 0 ? "block" : "none";
-
+    const divInstall = document.querySelector(".div-install") as HTMLDivElement;
+    const wingetContainer = document.querySelector(".winget-container") as HTMLDivElement;
+    const chocolateyContainer = document.querySelector(".chocolatey-container") as HTMLDivElement;
     const commandDisplay = document.querySelector(".commandDisplay");
-    commandDisplay.textContent = command;
-
     const installingApps = document.querySelector(".installingApps");
+    const wingetUpgrade = document.getElementById("wingetUpgrade");
+    if (
+      !divInstall ||
+      !wingetContainer ||
+      !chocolateyContainer ||
+      !commandDisplay ||
+      !installingApps ||
+      !wingetUpgrade
+    )
+      return;
+
+    divInstall.style.display = allUrls.length > 0 ? "block" : "none";
+    chocolateyContainer.style.display = "none";
+    wingetContainer.style.display = allUrls.length > 0 ? "block" : "none";
+
+    commandDisplay.textContent = command;
     installingApps.textContent = allUrls.join(", ");
 
-    const wingetUpgrade = document.getElementById("wingetUpgrade");
     wingetUpgrade.textContent = `$v = winget -v; if ([version]($v.TrimStart('v')) -lt [version]'1.7.0') { Write-Output '-- Old Winget version detected, upgrading.'; Set-Location $env:USERPROFILE; Invoke-WebRequest -Uri 'https://aka.ms/getwinget' -OutFile 'winget.msixbundle'; Add-AppPackage -ForceApplicationShutdown .\\winget.msixbundle; Remove-Item .\\winget.msixbundle } else { Write-Output 'Winget is already up to date, skipping upgrade.' }`;
 
     const manualList = document.getElementById("manualList");
-    if (window.manualURLs.length > 0) {
+    if (manualList && window.manualURLs && window.manualURLs.length > 0) {
       manualList.innerHTML = "Manual packages added: " + window.manualURLs.join(" | ");
     }
   }
@@ -572,45 +593,58 @@ function appsInstallWinget() {
 appsInstallWinget();
 appsInstallChocolatey();
 
-const selectedPackageManager = document.getElementById("packageManager");
-selectedPackageManager.addEventListener("change", () => {
-  if (selectedPackageManager.value === "chocolatey") {
-    appsInstallChocolatey();
-  } else if (selectedPackageManager.value === "winget") {
-    appsInstallWinget();
-  }
-});
+const selectedPackageManager = document.getElementById("packageManager") as HTMLInputElement;
+if (selectedPackageManager) {
+  selectedPackageManager.addEventListener("change", () => {
+    if (selectedPackageManager.value === "chocolatey") {
+      appsInstallChocolatey();
+    } else if (selectedPackageManager.value === "winget") {
+      appsInstallWinget();
+    }
+  });
+}
 
 // Check manual IDs
-function isValidManualId(manualId) {
+function isValidManualId(manualId: string) {
   return /^[A-Za-z0-9._+\-]+$/.test(manualId);
 }
 
 // Manual IDs button listener
 const addButton = document.getElementById("addApp");
-addButton.addEventListener("click", () => {
-  const manualInput = document.getElementById("manualInput").value.trim();
-  if (manualInput) {
-    if (!isValidManualId(manualInput)) {
-      const manualList = document.getElementById("manualList");
+if (addButton) {
+  addButton.addEventListener("click", () => {
+    const manualInput = document.getElementById("manualInput") as HTMLInputElement;
+    const manualList = document.getElementById("manualList");
+    const inputValue = manualInput.value.trim();
+    if (!manualInput || !manualList) return;
+
+    if (!isValidManualId(inputValue)) {
       manualList.innerHTML = "Please enter a valid package ID.";
       return;
     }
-    window.manualURLs.push(manualInput);
-    document.getElementById("manualInput").value = ""; // Clear input
+
+    if (window.manualURLs) {
+      window.manualURLs.push(inputValue);
+    }
+
+    manualInput.value = ""; // Clear input
     if (selectedPackageManager.value === "chocolatey") {
       appsInstallChocolatey();
     } else if (selectedPackageManager.value === "winget") {
       appsInstallWinget();
     }
-  }
-});
+  });
+}
 
 // Checkboxes event listeners
 const apps = document.querySelectorAll('[js-target="install"]');
 document.addEventListener("DOMContentLoaded", () => {
   document.body.addEventListener("change", (event) => {
-    if (event.target.matches("[js-target=install]")) {
+    if (
+      event.target &&
+      event.target instanceof Element &&
+      event.target.matches("[js-target=install]")
+    ) {
       if (selectedPackageManager.value === "chocolatey") {
         appsInstallChocolatey();
       } else if (selectedPackageManager.value === "winget") {

app/src/assets/js/global.d.ts

@@ -0,0 +1,7 @@
+declare global {
+  interface Window {
+    manualURLs?: string[];
+  }
+}
+
+export {};