TypeScript

Traduction IA pour les fichiers de localisation TypeScript avec Lingo.dev CLI

Qu'est-ce que la localisation TypeScript ?

Les fichiers de localisation TypeScript utilisent la syntaxe d'objet TypeScript/JavaScript pour stocker les chaînes de traduction. Ils sont couramment utilisés dans les applications web modernes pour une internationalisation typée.

Par exemple :

const messages = {
  navigation: {
    home: "Accueil",
    about: "À propos",
    contact: "Contactez-nous"
  },

  forms: {
    title: "Formulaire de contact",
    nameLabel: "Votre nom",
    submitButton: "Envoyer le message"
  },
};

export default messages;

Qu'est-ce que Lingo.dev CLI ?

Lingo.dev CLI est une CLI gratuite et open-source pour traduire des applications et du contenu avec l'IA. Elle est conçue pour remplacer les logiciels traditionnels de gestion de traduction tout en s'intégrant aux pipelines existants.

Pour en savoir plus, consultez Vue d'ensemble.

À propos de ce guide

Ce guide explique comment traduire des fichiers de localisation TypeScript avec Lingo.dev CLI.

Vous apprendrez à :

  • Créer un projet à partir de zéro
  • Configurer un pipeline de traduction
  • Générer des traductions avec l'IA

Prérequis

Pour utiliser Lingo.dev CLI, assurez-vous que Node.js v18+ est installé :

❯ node -v
v22.17.0

Étape 1. Configurer un projet

Dans le répertoire de votre projet, créez un fichier i18n.json :

{
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {}
}

Ce fichier définit le comportement du pipeline de traduction, y compris les langues à traduire et l'emplacement du contenu localisable dans le système de fichiers.

Pour en savoir plus sur les propriétés disponibles, consultez i18n.json.

Étape 2. Configurer la locale source

La locale source est la langue et la région d'origine dans lesquelles votre contenu a été rédigé. Pour configurer la locale source, définissez la propriété locale.source dans le fichier i18n.json :

{
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {}
}

La locale source doit être fournie sous forme de balise de langue BCP 47.

Pour la liste complète des codes de locale pris en charge par Lingo.dev CLI, consultez Codes de locale pris en charge.

Étape 3. Configurer les locales cibles

Les locales cibles sont les langues et régions vers lesquelles vous souhaitez traduire votre contenu. Pour configurer les locales cibles, définissez la propriété locale.targets dans le fichier i18n.json :

{
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {}
}

Étape 4. Créer le contenu source

Si ce n'est pas déjà fait, créez un ou plusieurs fichiers de localisation TypeScript contenant le contenu à traduire. Ces fichiers doivent être situés dans un chemin qui inclut la locale source quelque part dans le chemin (par exemple, comme nom de répertoire tel que en/ ou comme partie du nom de fichier tel que messages.en.ts).

Étape 5. Créer un bucket

  1. Dans le fichier i18n.json, ajoutez un objet "typescript" à l'objet buckets :

    {
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {
    "typescript": {}
  }
}

  2. Dans l'objet "typescript", définissez un tableau d'un ou plusieurs motifs include :

    {
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {
    "typescript": {
      "include": ["./[locale]/example.ts"]
    }
  }
}

    Ces motifs définissent quels fichiers traduire.

    Les motifs eux-mêmes :

    • doivent contenir [locale] comme placeholder pour la locale configurée
    • peuvent pointer vers des chemins de fichiers (par exemple, "[locale]/messages.ts")
    • peuvent utiliser des astérisques comme placeholders génériques (par exemple, "[locale]/*.ts")

    Les motifs glob récursifs (par exemple, **/*.ts) ne sont pas pris en charge.

Étape 6. Configurer un LLM

Lingo.dev CLI utilise des modèles de langage de grande taille (LLMs) pour traduire du contenu avec l'IA. Pour utiliser l'un de ces modèles, vous avez besoin d'une clé API d'un fournisseur pris en charge.

Pour démarrer le plus rapidement possible, nous recommandons d'utiliser Lingo.dev Engine — notre propre plateforme hébergée qui offre 10 000 tokens d'utilisation mensuelle gratuite :

  1. Créez un compte Lingo.dev.

  2. Exécutez la commande suivante :

    npx lingo.dev@latest login

    Cela ouvrira votre navigateur par défaut et vous demandera de vous authentifier.

  3. Suivez les instructions.

Étape 7. Générer les traductions

Dans le répertoire qui contient le fichier i18n.json, exécutez la commande suivante :

npx lingo.dev@latest run

Cette commande :

  1. Lit le fichier i18n.json.
  2. Trouve les fichiers qui doivent être traduits.
  3. Extrait le contenu traduisible des fichiers.
  4. Utilise le LLM configuré pour traduire le contenu extrait.
  5. Écrit le contenu traduit dans le système de fichiers.

La première fois que les traductions sont générées, un fichier i18n.lock est créé. Ce fichier garde une trace du contenu qui a été traduit, évitant ainsi des retraductions inutiles lors des exécutions ultérieures.

Exemple

en/example.ts

const messages = {
  navigation: {
    home: "Home",
    about: "About Us",
    contact: "Contact Us",
    services: "Our Services"
  },

  forms: {
    title: "Contact Form",
    nameLabel: "Your Name",
    emailLabel: "Email Address",
    messageLabel: "Your Message",
    submitButton: "Send Message",
    successMessage: "Thank you for your message!",
    locked_key_1: "This value is locked and should not be changed",
    ignored_key_1: "This value is ignored and should not be processed"
  },
};

export default messages;

es/example.ts

const messages = {
  navigation: {
    home: "Inicio",
    about: "Sobre Nosotros",
    contact: "Contáctanos",
    services: "Nuestros Servicios"
  },

  forms: {
    title: "Formulario de Contacto",
    nameLabel: "Tu Nombre",
    emailLabel: "Dirección de Correo Electrónico",
    messageLabel: "Tu Mensaje",
    submitButton: "Enviar Mensaje",
    successMessage: "¡Gracias por tu mensaje!",
    locked_key_1: "This value is locked and should not be changed",
  },
};

export default messages;

i18n.json

{
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {
    "typescript": {
      "include": ["./[locale]/example.ts"],
      "lockedKeys": ["locked_key_1"],
      "ignoredKeys": ["ignored_key_1"]
    }
  },
  "$schema": "https://lingo.dev/schema/i18n.json"
}

i18n.lock

version: 1
checksums:
  0cdc4f3ba34edc7f3ba4d996158306ad:
    navigation/home: 104a3db3b671c04e167eafbe21e57881
    navigation/about: 8f89131a66d4659be07cd5af2c7ea898
    navigation/contact: 2a75337dc9603915c4ec1d1905afb7b9
    navigation/services: 999f32026e64978cb3ec794a496b0bb8
    forms/title: ac85dea7c7f0bf1cd7d48cc1b4da3acc
    forms/nameLabel: 03c6ae7996d5841f743cd406b4eff72d
    forms/emailLabel: 0ee22bbbe989a0c61a18023407d12dc2
    forms/messageLabel: 1e460d0909502d0e94b9be562643af0d
    forms/submitButton: 487177489aafc9c0243c57ef3850a2d9
    forms/successMessage: a0a7aa980dffa31d4d194af718a917b3
    forms/locked_key_1: 73fc105de1aefc3f0a97d187a80cf0a4
    forms/ignored_key_1: d88a7aa6c5661ca901ee0f4cb51e3a0d