Internationalisierung von TypeScript-Anwendungen: Vollständiger Leitfaden mit Beispielen

So überwinden Sie die Angst vor der Lokalisierung: Internationalisierung von TypeScript-Anwendungen

Haben Sie sich jemals gefragt, warum einige Projekte internationale Reichweite erlangen, während andere "russischsprachige Startups" bleiben? Meistens ist die Antwort einfach: Lokalisierung. Ja, diese furchteinflößende Abkürzung i18n, die bei vielen Entwicklern einen Nervenzusammenbruch auslöst. Aber seien wir ehrlich: Eine TypeScript-Anwendung zu internationalisieren ist keine Raketenwissenschaft. Es ist nur eine Reihe von richtigen Ansätzen und Werkzeugen. Heute werden wir das in der Praxis durchgehen, mit lebendigen Codebeispielen, ohne Schnickschnack und ohne abstruse Theorien.

Warum TypeScript der ideale Kandidat für i18n ist

TypeScript gibt uns, was einfaches JavaScript nicht hat: statische Typisierung. Wenn es um Übersetzungen geht, wird dies zu einer Superkraft. Stellen Sie sich vor: Sie ändern einen Übersetzungsschlüssel, und TypeScript schreit, noch bevor die App läuft: "Hey, du hast vergessen, die Übersetzung im spanischen Gebietsschema zu aktualisieren!". Stimmen Sie zu, das ist besser, als Fehler in der Produktion zu fangen.

Darüber hinaus ermöglichen es moderne Bibliotheken für i18n in TypeScript, Typen direkt aus Übersetzungsdateien zu generieren. Das bedeutet, dass die Autovervollständigung in der IDE wie ein Uhrwerk funktioniert. Keine magischen Zeichenketten, keine Tippfehler. Nur sauberer, sicherer Code.

Auswahl einer Bibliothek: i18next vs react-intl

Es gibt zwei Hauptakteure auf dem Markt: i18next und react-intl (Teil von FormatJS). Beide funktionieren hervorragend mit TypeScript, aber ihre Ansätze unterscheiden sich.

• i18next — das Schweizer Taschenmesser der Internationalisierung. Unterstützt Pluralisierung, Interpolation, Kontexte, Lazy Loading. Großartig für große Projekte.
• react-intl — leichter, auf React zugeschnitten. Verwendet einen komponentenbasierten Ansatz (<FormattedMessage>) und ein leistungsstarkes ICU MessageFormat-System.

In diesem Artikel werden wir i18next mit dem offiziellen React-Adapter react-i18next verwenden. Warum? Weil es der beliebteste Stack ist und Ihnen maximale Kontrolle gibt.

Schritt-für-Schritt-Einrichtung: Von Null zur ersten Übersetzung

Kommen wir direkt zur Sache. Installieren Sie die Abhängigkeiten:

npm install i18next react-i18next i18next-browser-languagedetector

Jetzt erstellen wir eine Konfigurationsdatei. Dies ist das Herzstück der Internationalisierung unserer TypeScript-Anwendung.

// i18n.tsimport i18n from 'i18next';import { initReactI18next } from 'react-i18next';import LanguageDetector from 'i18next-browser-languagedetector';

import enTranslation from './locales/en/translation.json';import ruTranslation from './locales/ru/translation.json';

i18n  .use(LanguageDetector) // automatische Erkennung der Browsersprache  .use(initReactI18next) // Integration mit React  .init({    resources: {      en: { translation: enTranslation },      ru: { translation: ruTranslation },    },    fallbackLng: 'en', // falls Übersetzung nicht gefunden    interpolation: {      escapeValue: false, // React escaped bereits    },  });

export default i18n;

Beachten Sie das fallbackLng. Dies ist entscheidend für die Benutzererfahrung: Wenn ein Benutzer mit einem Browser kommt, der auf Swahili eingestellt ist, zeigen wir ihm die englische Version an, keinen leeren Bildschirm.

Struktur der Übersetzungsdateien

Erstellen wir einen Ordner locales und darin Unterordner für jede Sprache. Hier ist ein Beispiel für die Datei en/translation.json:

{  "welcome": "Welcome to our application!",  "description": "This is a {{framework}} app with i18n support.",  "items": {    "zero": "No items",    "one": "One item",    "other": "{{count}} items"  }}

Und hier ist ihr russisches Gegenstück:

{  "welcome": "Добро пожаловать в наше приложение!",  "description": "Это приложение на {{framework}} с поддержкой i18n.",  "items": {    "zero": "Нет элементов",