Internationalisation (i18n) en TypeScript : guide complet

Internationalisation (i18n) en TypeScript : aperçu des outils et des pratiques

L'internationalisation (i18n) est le processus de conception de logiciels permettant de les adapter à différentes langues et normes régionales sans modifications du code source. Pour les applications TypeScript, le choix d'une bibliothèque i18n appropriée est crucial : il détermine la sécurité de typage des traductions, les performances et la facilité de maintenance. Dans cet article, nous examinons trois approches et outils principaux pour implémenter l'i18n en TypeScript.

1. i18next — la solution classique

i18next est la bibliothèque d'internationalisation la plus populaire dans l'écosystème JavaScript/TypeScript. Elle prend en charge de nombreux frameworks (React, Vue, Angular) et dispose d'un vaste écosystème de plugins.

Installation :

npm install i18next i18next-browser-languagedetector

Configuration de base avec TypeScript :

import i18n from 'i18next';import { initReactI18next } from 'react-i18next';

// Typage des ressources de traductiondeclare module 'i18next' {  interface CustomTypeOptions {    defaultNS: 'common';    resources: {      common: typeof import('./locales/en/common.json');    };  }}

i18n.use(initReactI18next).init({  resources: {    en: { common: require('./locales/en/common.json') },    ru: { common: require('./locales/ru/common.json') },  },  lng: 'ru',  fallbackLng: 'en',  interpolation: { escapeValue: false },});

export default i18n;

Exemple d'utilisation dans un composant :

import { useTranslation } from 'react-i18next';

function Greeting() {  const { t } = useTranslation();  const userName = 'Анна';    return (    <div>      <p>{t('greeting', { name: userName })}</p>      <p>{t('itemsCount', { count: 5 })}</p>    </div>  );}

Avantages :

• Grande communauté et documentation
• Prise en charge du pluriel (pluralization)
• Interpolation de variables
• Chargement dynamique des ressources linguistiques

Inconvénients :

• Absence de typage strict prêt à l'emploi
• Nécessité d'une configuration supplémentaire de TypeScript pour une sécurité de typage complète
• Les fichiers JSON de traduction ne sont pas typés automatiquement

2. typesafe-i18n — typage strict

typesafe-i18n est une bibliothèque créée spécialement pour TypeScript. Sa principale caractéristique est la génération de types basés sur vos fichiers de traduction.

Installation :

npm install typesafe-i18n

Configuration et exemple :

// Création du fichier de traduction : src/i18n/en/index.tsexport const en = {  greeting: 'Hello {name}!',  itemsCount: 'You have {count} item | You have {count} items',} as const;

// Génération des types (exécutée automatiquement)// npx typesafe-i18n

// Utilisation dans un composantimport { i18n } from './i18n/i18n-util';

function Profile() {  const LL = i18n();    return (    <div>      <p>{LL.greeting({ name: 'Анна' })}</p>      <p>{LL.itemsCount({ count: 5 })}</p>    </div>  );}

Avantages :

• Sécurité de typage complète à toutes les étapes
• Saisie semi-automatique dans l'IDE (IntelliSense)
• Validation des paramètres à la compilation
• Prise en charge du pluriel et de l'interpolation

Inconvénients :

• Communauté et plugins moins nombreux
• Nécessite une génération de types à chaque modification des traductions
• Moins de flexibilité pour les scénarios non standard

3. Lingui — écosystème avec compilation

Lingui est une bibliothèque moderne qui utilise la compilation pour