Internationalisation (i18n) en TypeScript

Internationalisation (i18n) en TypeScript avec la bibliothèque i18next

L'internationalisation (i18n) est le processus de développement d'une application capable de s'adapter à différentes langues et normes régionales sans modifier le code source. Pour les applications TypeScript, l'une des bibliothèques les plus puissantes et populaires est i18next. Elle prend en charge tous les frameworks modernes (React, Vue, Angular) et offre un support de premier ordre pour TypeScript, permettant de créer des traductions typées et sécurisées.

Installation et configuration de base

Pour commencer, installez les paquets i18next et les backends nécessaires. L'exemple ci-dessous utilise un backend fichier pour charger les fichiers JSON de traduction :

npm install i18next i18next-fs-backend
# Pour React en supplément :
npm install react-i18next

Créez un fichier de configuration i18n.ts :

import i18n from 'i18next';
import Backend from 'i18next-fs-backend';
import { initReactI18next } from 'react-i18next';

i18n
  .use(Backend)
  .use(initReactI18next)
  .init({
    fallbackLng: 'ru',
    debug: process.env.NODE_ENV === 'development',
    interpolation: {
      escapeValue: false,
    },
    backend: {
      loadPath: '/locales/{{lng}}/{{ns}}.json',
    },
  });

export default i18n;

Structure des fichiers de traduction

Créez un dossier public/locales avec des sous-dossiers pour chaque langue. Par exemple :

public/locales/ru/translation.json
public/locales/en/translation.json

Exemple de contenu du fichier ru/translation.json :

{
  "greeting": "Привет, {{name}}!",
  "items": "У вас {{count}} сообщение",
  "items_plural": "У вас {{count}} сообщений",
  "nested": {
    "title": "Заголовок",
    "description": "Описание"
  }
}

Version anglaise en/translation.json :

{
  "greeting": "Hello, {{name}}!",
  "items": "You have {{count}} message",
  "items_plural": "You have {{count}} messages",
  "nested": {
    "title": "Title",
    "description": "Description"
  }
}

Typage des traductions en TypeScript

L'un des principaux avantages d'i18next est le typage strict. Créez un fichier types/i18n.d.ts :

import 'i18next';

declare module 'i18next' {
  interface CustomTypeOptions {
    defaultNS: 'translation';
    resources: {
      translation: {
        greeting: string;
        items: string;
        items_plural: string;
        nested: {
          title: string;
          description: string;
        };
      };
    };
  }
}

Désormais, TypeScript vérifiera les clés de traduction à la compilation. Si vous essayez d'utiliser une clé inexistante, vous obtiendrez une erreur.

Utilisation dans les composants React

La bibliothèque react-i18next fournit le hook useTranslation et le composant Trans :

import { useTranslation } from 'react-i18next';

function Welcome() {
  const { t, i18n } = useTranslation();

  const changeLanguage = (lng: string) => {
    i18n.changeLanguage(lng);
  };

  return (
    <div>
      <h2>{t('greeting', { name: 'Иван' })}</h2>
      <button onClick={() => changeLanguage('en')}>English</button>
      <button onClick={() => changeLanguage('ru')}>Русский</button>
    </div>
  );
}

Pluriel et interpolation

i18next prend en charge les règles complexes de pluriel. En russe, il existe trois formes (1, 2-4, 5+), en anglais deux. La bibliothèque sélectionne automatiquement la forme correcte en fonction du nombre :

// Dans le fichier de traduction (ru) :
{
  "apple": "{{count}} яблоко",
  "apple_plural": "{{count}} яблока",
  "apple_plural_2": "{{count}} яблок"
}

// Utilisation :
const