Typesafe-i18n TypeScript : guide complet avec exemples pratiques

Formateur Python en ligne pour débutants

Apprenez Python facilement sans surcharge théorique. Résolvez des tâches pratiques avec vérification automatique et écrivez du code directement dans le navigateur.

Start Course

Typesafe-i18n : Internationalisation avec une sécurité de type totale en TypeScript

Dans le développement web moderne, l'internationalisation (i18n) ne se limite pas à la traduction de texte : c'est un véritable système de gestion de la localisation. Typesafe-i18n est une bibliothèque TypeScript qui élève l'internationalisation à un niveau supérieur en garantissant une sécurité de type complète à chaque étape : de la rédaction des traductions à leur utilisation dans le code.

Pourquoi cette bibliothèque est-elle essentielle ? Les solutions i18n traditionnelles (comme i18next) fonctionnent souvent avec des chaînes dynamiques, ce qui entraîne des erreurs : fautes de frappe dans les clés, arguments incorrects ou traductions manquantes. Typesafe-i18n résout ce problème de manière radicale : si vous écrivez LL.WELCOME({name: "Alex"}), TypeScript vérifie si la clé WELCOME existe, si elle accepte le paramètre name et quel est le type de ce paramètre. Les erreurs de localisation deviennent des erreurs de compilation, et non des bugs d'exécution.

Cette bibliothèque est idéale pour les projets où une typage strict est crucial : applications React/Vue/Angular, serveurs Node.js, bibliothèques de composants. Elle prend en charge le pluriel, l'interpolation, les clés imbriquées, le chargement asynchrone et la génération de types à partir de vos fichiers de traduction. Dans cet article, nous explorerons tous les aspects de l'utilisation de Typesafe-i18n : de l'installation aux techniques avancées.

Installation

L'installation se fait via npm (ou yarn/pnpm) :

npm install typesafe-i18n

Pour la génération de types et de fichiers de traduction, un package supplémentaire est nécessaire :

npm install --save-dev typesafe-i18n-cli

Après l'installation, initialisez le projet :

npx typesafe-i18n --init

Cette commande crée la structure de dossiers et les fichiers de configuration de base.

Démarrage rapide : exemple minimal fonctionnel

Créons une application simple qui salue l'utilisateur dans différentes langues.

Étape 1 : Créez un fichier de traduction

Créez le fichier src/i18n/fr/index.ts :

import type { Translation } from '../i18n-types'

const fr: Translation = {
   HI: 'Bonjour {name} !',
   GOODBYE: 'Au revoir, {name} !'
}

export default fr

Étape 2 : Créez un fichier de traduction pour l'anglais

Créez le fichier src/i18n/en/index.ts :

import type { Translation } from '../i18n-types'

const en: Translation = {
   HI: 'Hello {name}!',
   GOODBYE: 'Goodbye, {name}!'
}

export default en

Étape 3 : Lancez la génération de types

npx typesafe-i18n

Étape 4 : Utilisez dans le code

import { i18n } from './i18n/i18n-util'
import { loadLocale } from './i18n/i18n-util.sync'
import { L } from './i18n/i18n-util'

// Chargement des locales
loadLocale('fr')
loadLocale('en')

// Création d'une instance pour le français
const LL_fr = i18n('fr')
console.log(LL_fr.HI({ name: 'Alex' })) // Affiche : Bonjour Alex !

// Passage à l'anglais
const LL_en = i18n('en')
console.log(LL_en.HI({ name: 'Alex' })) // Affiche : Hello Alex!

Remarque : si vous essayez d'appeler LL_fr.HI() sans l'argument name, TypeScript générera une erreur de compilation. Si vous faites une faute de frappe dans la clé (LL_fr.Hello), une erreur sera également levée.

Méthodes et fonctions principales

Examinons 8 fonctions et méthodes clés de la bibliothèque Typesafe-i18n.

1. i18n(locale: Locales): TranslationFunctions

Signature : i18n(locale: Locales): TranslationFunctions

Fonction : Crée une instance de traduction pour la locale spécifiée. Retourne un objet contenant toutes les fonctions de traduction.


  
  

Recommendations