adapter-svelte with SvelteKit: Using TypeScript and app.d.ts

[oscard0m]

When integrating typesafe-i18n with SvelteKit I was facing a TypeScript problem:
locale was resolved as string instead of Locales

After checking existing SvelteKit example with typesafe-i18n I noticed the issue was I was defining a wrong app.d.ts:

// app.d.ts
+ type Locales = import('$i18n/i18n-types').Locales;
+ type TranslationFunctions = import('$i18n/i18n-types').TranslationFun;
  declare global {
     namespace App {
        interface Locals {
-          locale: string;
+          locale: Locales;
+          LL: TranslationFunctions;
        }
     }
  }

Would it make sense to auto-generate this file? Is it even possible? Why is this app.d.ts necessary for SvelteKit but not other frameworks?

[ivanhofer]

Would it make sense to auto-generate this file? Is it even possible?

Auto-generating the file is not an option as it would override existing modifications to that file.
We could add a section to the docs: https://github.com/ivanhofer/typesafe-i18n/tree/main/packages/adapter-svelte
Do you want to add that?

Why is this app.d.ts necessary for SvelteKit but not other frameworks?

SvelteKit cares about TypeScript and provides options to strongly type almost everything. Other frameworks are more relaxed.
Depending on how you set typesafe-i18n up for other frameworks, you may also need to add some type declarations.

[oscard0m]

👍🏽 Done in:

• docs: add disclaimer for adapting app.d.ts for full TS type inference typesafe-i18n-demo-sveltekit#39
• docs: add example for JS + JSDocs for SvelteKit #724