Internationalisierung (i18n) in TypeScript

Internationalisierung (i18n) in TypeScript: Überblick über Tools und Praktiken

Internationalisierung (i18n) ist der Prozess des Software-Designs, der es ermöglicht, Software an verschiedene Sprachen und regionale Standards anzupassen, ohne den Quellcode zu ändern. Für TypeScript-Anwendungen ist die Wahl der geeigneten i18n-Bibliothek von entscheidender Bedeutung: Die Typsicherheit von Übersetzungen, die Leistung und die Wartbarkeit hängen davon ab. In diesem Artikel betrachten wir drei Hauptansätze und Tools zur Implementierung von i18n in TypeScript.

1. i18next – Die klassische Lösung

i18next ist die beliebteste Bibliothek für Internationalisierung im JavaScript/TypeScript-Ökosystem. Sie unterstützt zahlreiche Frameworks (React, Vue, Angular) und verfügt über ein umfangreiches Plugin-Ökosystem.

Installation:

npm install i18next i18next-browser-languagedetector

Basiseinrichtung mit TypeScript:

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

// Typisierung der Übersetzungsressourcendeclare 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;

Beispiel für die Verwendung in einer Komponente:

import { useTranslation } from 'react-i18next';

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

Vorteile:

Große Community und umfangreiche Dokumentation
Unterstützung für Pluralformen (Pluralization)
Variableninterpolation
Dynamisches Laden von Sprachressourcen

Nachteile:

Keine strenge Typisierung "out of the box"
Zusätzliche TypeScript-Konfiguration für vollständige Typsicherheit erforderlich
JSON-Übersetzungsdateien werden nicht automatisch typisiert

2. typesafe-i18n – Strenge Typisierung

typesafe-i18n ist eine Bibliothek, die speziell für TypeScript entwickelt wurde. Ihr Hauptmerkmal ist die Generierung von Typen basierend auf Ihren Übersetzungsdateien.

Installation:

npm install typesafe-i18n

Einrichtung und Beispiel:

// Übersetzungsdatei erstellen: src/i18n/en/index.tsexport const en = {  greeting: 'Hallo {name}!',  itemsCount: 'Sie haben {count} Element | Sie haben {count} Elemente',} as const;

// Typgenerierung (wird automatisch ausgeführt)// npx typesafe-i18n

// Verwendung in einer Komponenteimport { i18n } from './i18n/i18n-util';

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

Vorteile: