chore(web): enforce valid translation keys using typescript (#12106)

web/src/app.d.ts

@@ -27,3 +27,31 @@ interface Element {
   // Make optional, because it's unavailable on iPhones.
   requestFullscreen?(options?: FullscreenOptions): Promise<void>;
 }
+
+import type en from '$lib/i18n/en.json';
+import 'svelte-i18n';
+
+type NestedKeys<T, K = keyof T> = K extends keyof T & string
+  ? `${K}` | (T[K] extends object ? `${K}.${NestedKeys<T[K]>}` : never)
+  : never;
+
+declare module 'svelte-i18n' {
+  import type { InterpolationValues } from '$lib/components/i18n/format-message.svelte';
+  import type { Readable } from 'svelte/store';
+
+  type Translations = NestedKeys<typeof en>;
+
+  interface MessageObject {
+    id: Translations;
+    locale?: string;
+    format?: string;
+    default?: string;
+    values?: InterpolationValues;
+  }
+
+  type MessageFormatter = (id: Translations | MessageObject, options?: Omit<MessageObject, 'id'>) => string;
+
+  const format: Readable<MessageFormatter>;
+  const t: Readable<MessageFormatter>;
+  const _: Readable<MessageFormatter>;
+}