Converting storage helper to TS, adding types for subscribe functions

src/lib/browser/StorageHelper.ts

@@ -1,57 +1,53 @@
+/**
+ * Changes subscribe function. It receives changes with old and new value for keys of the storage.
+ */
+export type StorageChangeSubscriber = (changes: Record<string, chrome.storage.StorageChange>) => void;
+
 /**
  * Helper class to read and write JSON objects to the local storage.
- * @class
  */
-class StorageHelper {
-  /**
-   * @type {chrome.storage.StorageArea}
-   */
-  #storageArea;
+export default class StorageHelper {
+  readonly #storageArea: chrome.storage.StorageArea;
 
-  /**
-   * @param {chrome.storage.StorageArea} storageArea
-   */
-  constructor(storageArea) {
+  constructor(storageArea: chrome.storage.StorageArea) {
     this.#storageArea = storageArea;
   }
 
   /**
    * Read the following entry from the local storage as a JSON object.
    *
-   * @param {string} key Key of the entry to read.
-   * @param {any} defaultValue Default value to return if the entry does not exist.
+   * @param key Key of the entry to read.
+   * @param defaultValue Default value to return if the entry does not exist.
    *
-   * @return {Promise<any>} The JSON object or the default value if the entry does not exist.
+   * @return The JSON object or the default value if the entry does not exist.
    */
-  async read(key, defaultValue = null) {
+  async read<Type = any, DefaultType = any>(key: string, defaultValue: DefaultType | null = null): Promise<Type | DefaultType> {
     return (await this.#storageArea.get(key))?.[key] || defaultValue;
   }
 
   /**
    * Write the following JSON object to the local storage.
    *
-   * @param {string} key Key of the entry to write.
-   * @param {any} value JSON object to write.
+   * @param key Key of the entry to write.
+   * @param value Value to write.
    */
-  write(key, value) {
+  write(key: string, value: any): void {
     void this.#storageArea.set({[key]: value});
   }
 
   /**
    * Subscribe to changes in the local storage.
-   * @param {function(Record<string, chrome.storage.StorageChange>): void} callback
+   * @param callback Listener function to receive changes.
    */
-  subscribe(callback) {
+  subscribe(callback: StorageChangeSubscriber): void {
     this.#storageArea.onChanged.addListener(callback);
   }
 
   /**
    * Unsubscribe from changes in the local storage.
-   * @param {function(Record<string, chrome.storage.StorageChange>): void} callback
+   * @param callback Reference to the callback for unsubscribing.
    */
-  unsubscribe(callback) {
+  unsubscribe(callback: StorageChangeSubscriber): void {
     this.#storageArea.onChanged.removeListener(callback);
   }
 }
-
-export default StorageHelper;

src/lib/extension/ConfigurationController.ts

@@ -1,4 +1,4 @@
-import StorageHelper from "$lib/browser/StorageHelper";
+import StorageHelper, { type StorageChangeSubscriber } from "$lib/browser/StorageHelper";
 
 export default class ConfigurationController {
   readonly #configurationName: string;
@@ -18,7 +18,7 @@ export default class ConfigurationController {
    *
    * @return The setting value or the default value if the setting does not exist.
    */
-  async readSetting<Type = any, DefaultType = any>(settingName: string, defaultValue: DefaultType|null = null): Promise<Type|DefaultType> {
+  async readSetting<Type = any, DefaultType = any>(settingName: string, defaultValue: DefaultType | null = null): Promise<Type | DefaultType> {
     const settings = await ConfigurationController.#storageHelper.read(this.#configurationName, {});
     return settings[settingName] ?? defaultValue;
   }
@@ -61,7 +61,7 @@ export default class ConfigurationController {
    * @return {function(): void} Unsubscribe function.
    */
   subscribeToChanges(callback: (record: Record<string, any>) => void): () => void {
-    const changesSubscriber = (changes: Record<string, chrome.storage.StorageChange>) => {
+    const subscriber: StorageChangeSubscriber = changes => {
       if (!changes[this.#configurationName]) {
         return;
       }
@@ -69,9 +69,9 @@ export default class ConfigurationController {
       callback(changes[this.#configurationName].newValue);
     }
 
-    ConfigurationController.#storageHelper.subscribe(changesSubscriber);
+    ConfigurationController.#storageHelper.subscribe(subscriber);
 
-    return () => ConfigurationController.#storageHelper.unsubscribe(changesSubscriber);
+    return () => ConfigurationController.#storageHelper.unsubscribe(subscriber);
   }
 
   static #storageHelper = new StorageHelper(chrome.storage.local);

src/lib/extension/EntitiesController.ts

@@ -1,4 +1,4 @@
-import StorageHelper from "$lib/browser/StorageHelper";
+import StorageHelper, { type StorageChangeSubscriber } from "$lib/browser/StorageHelper";
 import type StorageEntity from "$lib/extension/base/StorageEntity";
 
 export default class EntitiesController {
@@ -71,7 +71,7 @@ export default class EntitiesController {
     /**
      * Watch the changes made to the storage and call the callback when the entity changes.
      */
-    const storageChangesSubscriber = (changes: Record<string, chrome.storage.StorageChange>) => {
+    const subscriber: StorageChangeSubscriber = changes => {
       if (!changes[entityName]) {
         return;
       }
@@ -80,8 +80,8 @@ export default class EntitiesController {
         .then(callback);
     }
 
-    this.#storageHelper.subscribe(storageChangesSubscriber);
+    this.#storageHelper.subscribe(subscriber);
 
-    return () => this.#storageHelper.unsubscribe(storageChangesSubscriber);
+    return () => this.#storageHelper.unsubscribe(subscriber);
   }
 }