Internationalisierung (i18n) in TypeScript: die Bibliothek i18next

Internationalisierung (i18n) in TypeScript mit der Bibliothek i18next

\n\n

Internationalisierung (i18n) ist der Prozess der Entwicklung einer Anwendung, die sich an verschiedene Sprachen und regionale Standards anpassen kann, ohne den Quellcode zu ändern. Für TypeScript-Anwendungen ist i18next eine der leistungsstärksten und beliebtesten Bibliotheken. Sie unterstützt alle modernen Frameworks (React, Vue, Angular) und bietet erstklassige TypeScript-Unterstützung, was typsichere Übersetzungen ermöglicht.

\n\n

Installation und grundlegende Konfiguration

\n\n

Installieren Sie zunächst die Pakete i18next und die erforderlichen Backends. Im folgenden Beispiel wird ein Datei-Backend zum Laden von JSON-Übersetzungsdateien verwendet:

\n\n

npm install i18next i18next-fs-backend\n# Für React zusätzlich:\nnpm install react-i18next

\n\n

Erstellen Sie eine Konfigurationsdatei i18n.ts:

\n\n

import i18n from 'i18next';\nimport Backend from 'i18next-fs-backend';\nimport { initReactI18next } from 'react-i18next';\n\ni18n\n  .use(Backend)\n  .use(initReactI18next)\n  .init({\n    fallbackLng: 'ru',\n    debug: process.env.NODE_ENV === 'development',\n    interpolation: {\n      escapeValue: false,\n    },\n    backend: {\n      loadPath: '/locales/{{lng}}/{{ns}}.json',\n    },\n  });\n\nexport default i18n;

\n\n

Struktur der Übersetzungsdateien

\n\n

Erstellen Sie einen Ordner public/locales mit Unterordnern für jede Sprache. Zum Beispiel:

\n\n

\n
• public/locales/ru/translation.json
\n
• public/locales/en/translation.json
\n

\n\n

Beispielinhalt der Datei ru/translation.json:

\n\n

{\n  "greeting": "Привет, {{name}}!",\n  "items": "У вас {{count}} сообщение",\n  "items_plural": "У вас {{count}} сообщений",\n  "nested": {\n    "title": "Заголовок",\n    "description": "Описание"\n  }\n}

\n\n

Englische Version en/translation.json:

\n\n

{\n  "greeting": "Hello, {{name}}!",\n  "items": "You have {{count}} message",\n  "items_plural": "You have {{count}} messages",\n  "nested": {\n    "title": "Title",\n    "description": "Description"\n  }\n}

\n\n

Typisierung von Übersetzungen in TypeScript

\n\n

Einer der Hauptvorteile von i18next ist die strenge Typisierung. Erstellen Sie eine Datei types/i18n.d.ts:

\n\n

import 'i18next';\n\ndeclare module 'i18next' {\n  interface CustomTypeOptions {\n    defaultNS: 'translation';\n    resources: {\n      translation: {\n        greeting: string;\n        items: string;\n        items_plural: string;\n        nested: {\n          title: string;\n          description: string;\n        };\n      };\n    };\n  }\n}

\n\n

Jetzt überprüft TypeScript die Übersetzungsschlüssel zur Kompilierzeit. Wenn Sie versuchen, einen nicht vorhandenen Schlüssel zu verwenden, erhalten Sie einen Fehler.

\n\n

Verwendung in React-Komponenten

\n\n

Die Bibliothek react-i18next bietet den Hook useTranslation und die Komponente Trans:

\n\n

import { useTranslation } from 'react-i18next';\n\nfunction Welcome() {\n  const { t, i18n } = useTranslation();\n\n  const changeLanguage = (lng: string) => {\n    i18n.changeLanguage(lng);\n  };\n\n  return (\n    <div>\n      <h2>{t('greeting', { name: 'Иван' })}</h2>\n      <button onClick={() => changeLanguage('en')}>English</button>\n      <button onClick={() => changeLanguage('ru')}>Русский</button>\n    </div>\n  );\n}

\n\n

Pluralisierung und Interpolation

\n\n

i18next unterstützt komplexe Pluralregeln. Im Russischen gibt es drei Formen (1, 2-4, 5+), im Englischen zwei. Die Bibliothek wählt automatisch die richtige Form basierend auf der Anzahl:

\n\n

// In der Übersetzungsdatei (ru):\n{\n  "apple": "{{count}} яблоко",\n  "apple_plural": "{{count}} яблока",\n  "apple_plural_2": "{{count}} яблок"\n}\n\n// Verwendung:\nconst