Convert Settings class to TS (#37218)

app/javascript/mastodon/actions/search.ts

@@ -144,7 +144,7 @@ export const hydrateSearch = createAppAsyncThunk(
   'search/hydrate',
   (_args, { dispatch, getState }) => {
     const me = getState().meta.get('me') as string;
-    const history = searchHistory.get(me) as RecentSearch[] | null;
+    const history = searchHistory.get(me);
 
     if (history !== null) {
       dispatch(updateSearchHistory(history));

app/javascript/mastodon/features/audio/index.tsx

@@ -41,8 +41,8 @@ const persistVolume = (volume: number, muted: boolean) => {
 };
 
 const restoreVolume = (audio: HTMLAudioElement) => {
-  const volume = (playerSettings.get('volume') as number | undefined) ?? 0.5;
-  const muted = (playerSettings.get('muted') as boolean | undefined) ?? false;
+  const volume = playerSettings.get('volume') ?? 0.5;
+  const muted = playerSettings.get('muted') ?? false;
 
   audio.volume = volume;
   audio.muted = muted;

app/javascript/mastodon/settings.js

@@ -1,51 +0,0 @@
-export default class Settings {
-
-  constructor(keyBase = null) {
-    this.keyBase = keyBase;
-  }
-
-  generateKey(id) {
-    return this.keyBase ? [this.keyBase, `id${id}`].join('.') : id;
-  }
-
-  set(id, data) {
-    const key = this.generateKey(id);
-    try {
-      const encodedData = JSON.stringify(data);
-      localStorage.setItem(key, encodedData);
-      return data;
-    } catch {
-      return null;
-    }
-  }
-
-  get(id) {
-    const key = this.generateKey(id);
-    try {
-      const rawData = localStorage.getItem(key);
-      return JSON.parse(rawData);
-    } catch {
-      return null;
-    }
-  }
-
-  remove(id) {
-    const data = this.get(id);
-    if (data) {
-      const key = this.generateKey(id);
-      try {
-        localStorage.removeItem(key);
-      } catch {
-        // ignore if the key is not found
-      }
-    }
-    return data;
-  }
-
-}
-
-export const pushNotificationsSetting = new Settings('mastodon_push_notification_data');
-export const tagHistory = new Settings('mastodon_tag_history');
-export const bannerSettings = new Settings('mastodon_banner_settings');
-export const searchHistory = new Settings('mastodon_search_history');
-export const playerSettings = new Settings('mastodon_player');

app/javascript/mastodon/settings.ts

@@ -0,0 +1,65 @@
+import type { RecentSearch } from './models/search';
+
+export class Settings<T extends Record<string, unknown>> {
+  keyBase: string | null;
+
+  constructor(keyBase: string | null = null) {
+    this.keyBase = keyBase;
+  }
+
+  private generateKey(id: string | number | symbol): string {
+    const idStr = typeof id === 'string' ? id : String(id);
+    return this.keyBase ? [this.keyBase, `id${idStr}`].join('.') : idStr;
+  }
+
+  set<K extends keyof T>(id: K, data: T[K]): T[K] | null {
+    const key = this.generateKey(id);
+    try {
+      const encodedData = JSON.stringify(data);
+      localStorage.setItem(key, encodedData);
+      return data;
+    } catch {
+      return null;
+    }
+  }
+
+  get<K extends keyof T>(id: K): T[K] | null {
+    const key = this.generateKey(id);
+    try {
+      const rawData = localStorage.getItem(key);
+      if (rawData === null) return null;
+      return JSON.parse(rawData) as T[K];
+    } catch {
+      return null;
+    }
+  }
+
+  remove<K extends keyof T>(id: K): T[K] | null {
+    const data = this.get(id);
+    if (data !== null) {
+      const key = this.generateKey(id);
+      try {
+        localStorage.removeItem(key);
+      } catch {
+        // ignore if the key is not found
+      }
+    }
+    return data;
+  }
+}
+
+export const pushNotificationsSetting = new Settings<
+  Record<string, { alerts: unknown }>
+>('mastodon_push_notification_data');
+export const tagHistory = new Settings<Record<string, string[]>>(
+  'mastodon_tag_history',
+);
+export const bannerSettings = new Settings<Record<string, boolean>>(
+  'mastodon_banner_settings',
+);
+export const searchHistory = new Settings<Record<string, RecentSearch[]>>(
+  'mastodon_search_history',
+);
+export const playerSettings = new Settings<{ volume: number; muted: boolean }>(
+  'mastodon_player',
+);