Übersetzung

Übersetzungen definieren

Die t Funktion in intlayer ermöglicht es Ihnen, Inhalte in mehreren Sprachen zu deklarieren. Diese Funktion gewährleistet die Typensicherheit und gibt einen Fehler aus, wenn Übersetzungen fehlen, was besonders nützlich in TypeScript-Umgebungen ist.

TypeScript verwenden

Hier ist ein Beispiel, wie Sie Inhalte mit Übersetzungen deklarieren.

import { t, type DeclarationContent } from "intlayer";interface Content {  welcomeMessage: string;}export default {  key: "multi_lang",  content: {    welcomeMessage: t({      en: "Willkommen in unserer Anwendung",      fr: "Bienvenue dans notre application",      es: "Bienvenido a nuestra aplicación",    }),  },} satisfies DeclarationContent<Content>;

Konfiguration der lokalen Einstellungen

Um eine ordnungsgemäße Handhabung von Übersetzungen 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:

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:

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 aktuellen Sprache ab, die in Ihrer Anwendung gesetzt ist.

Benutzerdefinierte Inhaltsobjekte

intlayer unterstützt benutzerdefinierte Inhaltsobjekte für Übersetzungen, sodass Sie komplexere Strukturen definieren können, während die Typensicherheit gewährleistet bleibt. Hier ist ein Beispiel mit einem benutzerdefinierten Objekt:

import { t, type DeclarationContent } from "intlayer";interface ICustomContent {  title: string;  content: string;}const customContent = {  key: "custom_content",  content: {    profileText: t<ICustomContent>({      en: {        title: "Seitenüberschrift",        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 DeclarationContent;export default customContent;