transitioning to ts

src/pages/settings/preload.ts

@@ -1,28 +1,29 @@
-let adBlock,
-  api,
-  customCSS,
-  disableBackgroundThrottle,
-  disableHardwareMediaKeys,
-  enableCustomHotkeys,
-  enableDiscord,
-  gpuRasterization,
-  menuBar,
-  minimizeOnClose,
-  mpris,
-  notifications,
-  playBackControl,
-  port,
-  singleInstance,
-  skipArtists,
-  skippedArtists,
-  trayIcon,
-  updateFrequency;
+let adBlock: HTMLInputElement,
+  api: HTMLInputElement,
+  customCSS: HTMLInputElement,
+  disableBackgroundThrottle: HTMLInputElement,
+  disableHardwareMediaKeys: HTMLInputElement,
+  enableCustomHotkeys: HTMLInputElement,
+  enableDiscord: HTMLInputElement,
+  gpuRasterization: HTMLInputElement,
+  menuBar: HTMLInputElement,
+  minimizeOnClose: HTMLInputElement,
+  mpris: HTMLInputElement,
+  notifications: HTMLInputElement,
+  playBackControl: HTMLInputElement,
+  port: HTMLInputElement,
+  singleInstance: HTMLInputElement,
+  skipArtists: HTMLInputElement,
+  skippedArtists: HTMLInputElement,
+  trayIcon: HTMLInputElement,
+  updateFrequency: HTMLInputElement;
 
 const { store, settings } = require("../../scripts/settings");
 const { ipcRenderer } = require("electron");
 const globalEvents = require("../../constants/globalEvents");
 const remote = require("@electron/remote");
 const { app } = remote;
+
 /**
  * Sync the UI forms with the current settings
  */
@@ -30,7 +31,7 @@ function refreshSettings() {
   adBlock.checked = store.get(settings.adBlock);
   api.checked = store.get(settings.api);
   customCSS.value = store.get(settings.customCSS);
-  disableBackgroundThrottle.checked = store.get("disableBackgroundThrottle");
+  disableBackgroundThrottle.checked = store.get(settings.disableBackgroundThrottle);
   disableHardwareMediaKeys.checked = store.get(settings.flags.disableHardwareMediaKeys);
   enableCustomHotkeys.checked = store.get(settings.enableCustomHotkeys);
   enableDiscord.checked = store.get(settings.enableDiscord);
@@ -43,7 +44,7 @@ function refreshSettings() {
   port.value = store.get(settings.apiSettings.port);
   singleInstance.checked = store.get(settings.singleInstance);
   skipArtists.checked = store.get(settings.skipArtists);
-  skippedArtists.value = store.get(settings.skippedArtists).join("\n");
+  skippedArtists.value = (store.get(settings.skippedArtists) as string[]).join("\n");
   trayIcon.checked = store.get(settings.trayIcon);
   updateFrequency.value = store.get(settings.updateFrequency);
 }
@@ -51,7 +52,7 @@ function refreshSettings() {
 /**
  * Open an url in the default browsers
  */
-function openExternal(url) {
+function openExternal(url: string) {
   const { shell } = require("electron");
   shell.openExternal(url);
 }
@@ -75,31 +76,31 @@ function restart() {
  * Bind UI components to functions after DOMContentLoaded
  */
 window.addEventListener("DOMContentLoaded", () => {
-  function get(id) {
-    return document.getElementById(id);
+  function get(id: string): HTMLInputElement {
+    return document.getElementById(id) as HTMLInputElement;
   }
 
   document.getElementById("close").addEventListener("click", hide);
   document.getElementById("restart").addEventListener("click", restart);
   document.querySelectorAll(".external-link").forEach((elem) =>
     elem.addEventListener("click", function (event) {
-      openExternal(event.target.getAttribute("data-url"));
+      openExternal((event.target as HTMLElement).getAttribute("data-url"));
     })
   );
 
-  function addInputListener(source, key) {
-    source.addEventListener("input", function (_event, _data) {
-      if (this.value === "on") {
+  function addInputListener(source: HTMLInputElement, key: string) {
+    source.addEventListener("input", () => {
+      if (source.value === "on") {
         store.set(key, source.checked);
       } else {
-        store.set(key, this.value);
+        store.set(key, source.value);
       }
       ipcRenderer.send(globalEvents.storeChanged);
     });
   }
 
-  function addTextAreaListener(source, key) {
-    source.addEventListener("input", function (_event, _data) {
+  function addTextAreaListener(source: HTMLInputElement, key: string) {
+    source.addEventListener("input", () => {
       store.set(key, source.value.split("\n"));
       ipcRenderer.send(globalEvents.storeChanged);
     });