Client-side resource integration

The Localizer class in TypeScript is used to manage localized resources in frontend applications.

This solution allows localized text to be loaded and displayed based on the specified culture and context, ensuring a consistent user experience across multilingual environments. The Localizer class shares some logic with its server-side counterpart, but is designed specifically for use in the client-side context.

Initializing the Localizer Class

To initialize Localizer, you must load the localized resources by specifying the default culture and the contexts to retrieve. A context represents a collection of resources that can be used in a specific part of the application, such as resources for account management or the newsletter section.

import Localizer from "@Scripts/Common/Localizer";

export default class BasePage {
   public static async init() {
       await Localizer.init({
           defaultCulture: "en-US",
           resourceContexts: ["App", "Account", "Newsletter"]
       });
   }
}

Configuration parameters:

• defaultCulture: The default culture used to retrieve assets (e.g. "en-US")
• resourceContexts: An array of contexts to load (e.g. ["App", "Account", "Newsletter"])

Resource Recovery

Once initialized, Localizer allows you to retrieve resources through the get method by providing the localized resource key.

localizer.get("Account.Common.EmailOrUserName");

This command will return the localized text corresponding to the key "Account.Common.EmailOrUserName".

Parameter interpolation

You can use interpolation to insert dynamic parameters within localized text. For example:

localizer.getByCulture("Account.Common.EmailOrUserName", "en-US");

This will return the localized resource for the given culture (in this case, "en-US").