Funkcja t w intlayer pozwala na deklarowanie treści w wielu językach. Funkcja ta zapewnia bezpieczeństwo typów, zgłaszając błąd, jeśli brakuje jakichkolwiek tłumaczeń, co jest szczególnie przydatne w środowiskach TypeScript.

Oto przykład, jak zadeklarować treść z tłumaczeniami.

**/*.content.ts

Kopiuj kod

Skopiuj kod do schowka

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>;

Konfiguracja lokalizacji

Aby zapewnić prawidłowe zarządzanie tłumaczeniami, możesz skonfigurować akceptowane lokalizacje w pliku intlayer.config.ts. Ta konfiguracja pozwala zdefiniować języki, które Twoja aplikacja obsługuje:

intlayer.config.ts

Kopiuj kod

Skopiuj kod do schowka

import { Locales, type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  internationalization: {
    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
  },
};

export default config;

Używanie tłumaczeń w komponentach React

Dzięki react-intlayer możesz używać tłumaczeń w komponentach React. Oto przykład:

**/*.tsx

Kopiuj kod

Skopiuj kod do schowka

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;

Ten komponent pobiera odpowiednie tłumaczenie na podstawie aktualnie ustawionego języka w Twojej aplikacji.

Niestandardowe obiekty treści

intlayer obsługuje niestandardowe obiekty treści do tłumaczenia, co pozwala na definiowanie bardziej złożonych struktur przy jednoczesnym zapewnieniu bezpieczeństwa typów. Oto przykład z niestandardowym obiektem:

**/*.content.ts

Kopiuj kod

Skopiuj kod do schowka

import { t, type Dictionary } from "intlayer";

interface ICustomContent {
  title: string;
  content: string;
}

const customContent = {
  key: "custom_content",
  content: {
    profileText: t<ICustomContent>({
      en: {
        title: "Page Title",
        content: "Page Content",
      },
      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;

Deklaracja zawartości

Liczba mnoga

Data utworzenia:2025-08-23Ostatnia aktualizacja:2025-08-23

Prześlij ten dokument do swojego ulubionego asystenta AI

ChatGPT

Claude

DeepSeek

Google AI mode Gemini

Perplexity Mistral

Grok

Zadaj pytanie i otrzymaj streszczenie dokumentu, odwołując się do tej strony i wybranego dostawcy AI

Historia wersji

"Inicjalizacja historii"
v5.5.1029.06.2025

Treść tej strony została przetłumaczona przy użyciu sztucznej inteligencji.

Zobacz ostatnią wersję oryginalnej treści w języku angielskim

Edytuj tę dokumentację

Jeśli masz pomysł na ulepszenie tej dokumentacji, zachęcamy do przesłania pull requesta na GitHubie.

Link do dokumentacji na GitHubie

Kopiuj

Kopiuj dokument Markdown do schowka

Tłumaczenie

Definiowanie tłumaczeń

Oto przykład, jak zadeklarować treść z tłumaczeniami.

**/*.content.ts

Kopiuj kod

Skopiuj kod do schowka

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>;

Konfiguracja lokalizacji

intlayer.config.ts

Kopiuj kod

Skopiuj kod do schowka

import { Locales, type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  internationalization: {
    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
  },
};

export default config;

Używanie tłumaczeń w komponentach React

Dzięki react-intlayer możesz używać tłumaczeń w komponentach React. Oto przykład:

**/*.tsx

Kopiuj kod

Skopiuj kod do schowka

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;

Ten komponent pobiera odpowiednie tłumaczenie na podstawie aktualnie ustawionego języka w Twojej aplikacji.

Niestandardowe obiekty treści

**/*.content.ts

Kopiuj kod

Skopiuj kod do schowka

import { t, type Dictionary } from "intlayer";

interface ICustomContent {
  title: string;
  content: string;
}

const customContent = {
  key: "custom_content",
  content: {
    profileText: t<ICustomContent>({
      en: {
        title: "Page Title",
        content: "Page Content",
      },
      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;

Deklaracja zawartości

Liczba mnoga