TypeScript中多语言JSON字典与.d.ts类型定义关联求助

Problem Context #

I have two JSON dictionary files for different languages with the same structure, like this example:

{
"Account" : {
"AccountLockText" : "Your account is locked",
"Login" : {
"CreateAccount" : "Create an account",
"LoginBtn" : "Login",
"LoginHeader" : "Login"
}
}
}

I also have a dictionaries.d.ts file with this content:

declare module "dictionaries" {
  var Account: any;
}

I want to use these dictionaries in my TypeScript app but don't know how to link them properly. Can someone help?

Step-by-Step Solution #

1. Replace any with Strongly-Typed Interfaces

First, update your dictionaries.d.ts to define exact types for your dictionary structure—this replaces the vague any with proper type safety:

declare module "dictionaries" {
  // Define nested translation types first
  interface LoginTranslations {
    CreateAccount: string;
    LoginBtn: string;
    LoginHeader: string;
  }

  // Define top-level account translations
  interface AccountTranslations {
    AccountLockText: string;
    Login: LoginTranslations;
  }

  // Export the type so you can reference it in your app
  export type { AccountTranslations };
}

2. Load JSON Files with Type Assertion

Next, import your JSON dictionaries in your TypeScript code and assert they match the type you defined. First, make sure your tsconfig.json has these settings (to enable JSON imports):

{
  "compilerOptions": {
    "resolveJsonModule": true,
    "esModuleInterop": true
  }
}

Then import and type-check your dictionaries:

// Import your language files (adjust paths to match your project)
import englishDict from './dictionaries/en.json';
import spanishDict from './dictionaries/es.json';

// Assert the JSON matches our defined type
const enTranslations = englishDict as import('dictionaries').AccountTranslations;
const esTranslations = spanishDict as import('dictionaries').AccountTranslations;

// Now you get full TypeScript intellisense!
console.log(enTranslations.AccountLockText);
console.log(esTranslations.Login.CreateAccount);

3. Add a Language Switcher (Optional)

For cleaner language switching, wrap your dictionaries in a utility function that maintains type safety:

import { AccountTranslations } from 'dictionaries';
import en from './dictionaries/en.json';
import es from './dictionaries/es.json';

// Map language codes to their dictionaries
const languageMap: Record<string, AccountTranslations> = {
  en: en as AccountTranslations,
  es: es as AccountTranslations
};

// Get the correct dictionary for a given language
export function getTranslations(lang: string): AccountTranslations {
  // Fallback to English if the requested language doesn't exist
  return languageMap[lang] || languageMap.en;
}

// Usage example
const currentTranslations = getTranslations('es');
console.log(currentTranslations.Login.LoginBtn); // Outputs Spanish login button text

4. Validate Type Safety

Now when you work with your dictionaries, TypeScript will:

• Show autocomplete for all valid keys
• Throw errors if you misspell a key (e.g., AccountLockTex instead of AccountLockText)
• Ensure you don't access non-existent properties

内容的提问来源于stack exchange，提问作者Gonçalo