TypeScript - Lingo.dev CLI

Was ist TypeScript-Lokalisierung?

TypeScript-Lokalisierungsdateien verwenden die TypeScript/JavaScript-Objektsyntax zur Speicherung von Übersetzungsstrings. Sie werden häufig in modernen Webanwendungen für typsichere Internationalisierung eingesetzt.

Beispiel:

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

  forms: {
    title: "Contact Form",
    nameLabel: "Your Name",
    submitButton: "Send Message"
  },
};

export default messages;

Was ist Lingo.dev CLI?

Lingo.dev CLI ist ein kostenloses Open-Source-CLI-Tool zur Übersetzung von Apps und Inhalten mit KI. Es wurde entwickelt, um herkömmliche Translation-Management-Software zu ersetzen und sich gleichzeitig in bestehende Pipelines zu integrieren.

Weitere Informationen finden Sie unter Übersicht.

Über diesen Leitfaden

Dieser Leitfaden erklärt, wie Sie TypeScript-Lokalisierungsdateien mit Lingo.dev CLI übersetzen.

Sie lernen Folgendes:

Ein Projekt von Grund auf erstellen
Eine Übersetzungspipeline konfigurieren
Übersetzungen mit KI generieren

Voraussetzungen

Um Lingo.dev CLI zu verwenden, stellen Sie sicher, dass Node.js v18+ installiert ist:

❯ node -v
v22.17.0

Schritt 1. Projekt einrichten

Erstellen Sie im Verzeichnis Ihres Projekts eine Datei i18n.json:

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

Diese Datei definiert das Verhalten der Übersetzungspipeline, einschließlich der Sprachen, zwischen denen übersetzt werden soll, und des Speicherorts der lokalisierbaren Inhalte im Dateisystem.

Weitere Informationen zu den verfügbaren Eigenschaften finden Sie unter i18n.json.

Schritt 2. Quell-Locale konfigurieren

Das Quell-Locale ist die ursprüngliche Sprache und Region, in der Ihre Inhalte verfasst wurden. Um das Quell-Locale zu konfigurieren, setzen Sie die Eigenschaft locale.source in der Datei i18n.json:

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

Das Quell-Locale muss als BCP 47 Language Tag angegeben werden.

Eine vollständige Liste der von der Lingo.dev CLI unterstützten Locale-Codes finden Sie unter Unterstützte Locale-Codes.

Schritt 3. Konfiguration der Zielsprachen

Die Zielsprachen sind die Sprachen und Regionen, in die Sie Ihre Inhalte übersetzen möchten. Um die Zielsprachen zu konfigurieren, setzen Sie die Eigenschaft locale.targets in der Datei i18n.json:

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

Schritt 4. Erstellung der Quellinhalte

Falls noch nicht geschehen, erstellen Sie eine oder mehrere TypeScript-Lokalisierungsdateien, die die zu übersetzenden Inhalte enthalten. Diese Dateien müssen sich in einem Pfad befinden, der die Quellsprache irgendwo im Pfad enthält (z. B. als Verzeichnisname wie en/ oder als Teil des Dateinamens wie messages.en.ts).

Schritt 5. Erstellung eines Buckets

Fügen Sie in der Datei i18n.json ein Objekt "typescript" zum Objekt buckets hinzu:

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

Definieren Sie im Objekt "typescript" ein Array aus einem oder mehreren includeMustern:
```
{
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {
    "typescript": {
      "include": ["./[locale]/example.ts"]
    }
  }
}
```
Diese Muster definieren, welche Dateien übersetzt werden sollen.

Die Muster selbst:
- müssen [locale] als Platzhalter für die konfigurierte Locale enthalten
- können auf Dateipfade verweisen (z. B. "[locale]/messages.ts")
- können Sternchen als Wildcard-Platzhalter verwenden (z. B. "[locale]/*.ts")
Rekursive Glob-Muster (z. B. **/*.ts) werden nicht unterstützt.

Schritt 6. Konfiguration eines LLM

Die Lingo.dev CLI verwendet Large Language Models (LLMs), um Inhalte mit KI zu übersetzen. Um eines dieser Modelle zu verwenden, benötigen Sie einen API-Schlüssel von einem unterstützten Anbieter.

Um so schnell wie möglich einsatzbereit zu sein, empfehlen wir die Verwendung der Lingo.dev Engine – unserer eigenen, gehosteten Plattform, die 10.000 Tokens kostenlose monatliche Nutzung bietet:

Registrieren Sie sich für ein Lingo.dev-Konto.
Führen Sie den folgenden Befehl aus:
```
npx lingo.dev@latest login
```
Dies öffnet Ihren Standardbrowser und fordert Sie zur Authentifizierung auf.
Folgen Sie den Anweisungen.

Schritt 7. Übersetzungen generieren

Führen Sie im Verzeichnis, das die i18n.jsonDatei enthält, folgenden Befehl aus:

npx lingo.dev@latest run

Dieser Befehl:

Liest die i18n.jsonDatei.
Findet die Dateien, die übersetzt werden müssen.
Extrahiert den übersetzbaren Inhalt aus den Dateien.
Verwendet das konfigurierte LLM, um den extrahierten Inhalt zu übersetzen.
Schreibt den übersetzten Inhalt zurück in das Dateisystem.

Beim ersten Generieren von Übersetzungen wird eine i18n.lockDatei erstellt. Diese Datei verfolgt, welcher Inhalt übersetzt wurde, und verhindert unnötige erneute Übersetzungen bei nachfolgenden Durchläufen.

Beispiel

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