Stellen Sie Ihre Frage und erhalten Sie einen Resümee des Dokuments, indem Sie diese Seite und den AI-Anbieter Ihrer Wahl referenzieren
Durch die Integration des Intlayer MCP-Servers in Ihren bevorzugten AI-Assistenten können Sie alle Dokumente direkt von ChatGPT, DeepSeek, Cursor, VSCode usw. abrufen.
Dokumentation des MCP-Servers ansehenDer Inhalt dieser Seite wurde mit einer KI übersetzt.
Den englischen Originaltext ansehenWenn Sie eine Idee haben, um diese Dokumentation zu verbessern, zögern Sie bitte nicht, durch das Einreichen eines Pull-Requests auf GitHub beizutragen.
GitHub-Link zur DokumentationMarkdown des Dokuments in die Zwischenablage kopieren
Übersetzung
Übersetzungen definieren
Die Funktion t in intlayer ermöglicht es Ihnen, Inhalte in mehreren Sprachen zu deklarieren. Diese Funktion gewährleistet Typsicherheit und löst einen Fehler aus, wenn Übersetzungen fehlen, was besonders in TypeScript-Umgebungen nützlich ist.
Hier ist ein Beispiel, wie man Inhalte mit Übersetzungen deklariert.
Kopieren Sie den Code in die Zwischenablage
import { t, type Dictionary } from "intlayer";interface Content { welcomeMessage: string;}export default { key: "multi_lang", content: { welcomeMessage: t({ en: "Welcome to our application", fr: "Bienvenue dans notre application", es: "Bienvenido a nuestra aplicación", }), },} satisfies Dictionary<Content>;
Konfiguration der Sprachen
Um eine korrekte Übersetzungsverarbeitung sicherzustellen, können Sie die akzeptierten Sprachen in intlayer.config.ts konfigurieren. Diese Konfiguration ermöglicht es Ihnen, die Sprachen zu definieren, die Ihre Anwendung unterstützt:
Kopieren Sie den Code in die Zwischenablage
import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = { internationalization: { locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH], },};export default config;
Verwendung von Übersetzungen in React-Komponenten
Mit react-intlayer können Sie Übersetzungen in React-Komponenten verwenden. Hier ist ein Beispiel:
Kopieren Sie den Code in die Zwischenablage
import type { FC } from "react";import { useIntlayer } from "react-intlayer";const MyComponent: FC = () => { const content = useIntlayer("multi_lang"); return ( <div> <p>{content.welcomeMessage}</p> </div> );};export default MyComponent;
Diese Komponente ruft die entsprechende Übersetzung basierend auf der aktuell in Ihrer Anwendung eingestellten Sprache ab.
Benutzerdefinierte Inhaltsobjekte
intlayer unterstützt benutzerdefinierte Inhaltsobjekte für Übersetzungen, die es Ihnen ermöglichen, komplexere Strukturen zu definieren und dabei die Typensicherheit zu gewährleisten. Hier ist ein Beispiel mit einem benutzerdefinierten Objekt:
Kopieren Sie den Code in die Zwischenablage
import { t, type Dictionary } from "intlayer";interface ICustomContent { title: string; content: string;}const customContent = { key: "custom_content", content: { profileText: t<ICustomContent>({ en: { title: "Seitentitel", content: "Seiteninhalt", }, fr: { title: "Titre de la Page", content: "Contenu de la Page", }, es: { title: "Título de la Página", content: "Contenido de la Página", }, }), },} satisfies Dictionary;export default customContent;
Dokumentationsverlauf
- 5.5.10 - 2025-06-29: Initialer Verlauf