Autor:

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

Prześlij ten dokument do swojego ulubionego asystenta AIChatGPT 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

Name: Intlayer
Author: Intlayer

Definiowanie tłumaczeń

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

With react-intlayer, you can use translations in React components. Here's an example:

**/*.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;

This component fetches the corresponding translation based on the current locale set in your application.

With next-intlayer, you can use translations in React Server Components or Client Components. Here's an example in a Client Component:

**/*.tsx

Kopiuj kod

Skopiuj kod do schowka

"use client";

import type { FC } from "react";
import { useIntlayer } from "next-intlayer";

const MyComponent: FC = () => {
const content = useIntlayer("multi_lang");

return (
  <div>
    <p>{content.welcomeMessage}</p>
  </div>
);
};

export default MyComponent;

With vue-intlayer, you can use translations in Vue components. Here's an example:

**/*.vue

Kopiuj kod

Skopiuj kod do schowka

<script setup lang="ts">import { useIntlayer } from "vue-intlayer";const content = useIntlayer("multi_lang");</script><template><div>  <p>{{ content.welcomeMessage }}</p></div></template>

With svelte-intlayer, you can use translations in Svelte components. The hook returns a Svelte store. Here's an example:

**/*.svelte

Kopiuj kod

Skopiuj kod do schowka

<script lang="ts">import { useIntlayer } from "svelte-intlayer";const content = useIntlayer("multi_lang");</script><div><p>{$content.welcomeMessage}</p></div>

With preact-intlayer, you can use translations in Preact components. Here's an example:

**/*.tsx

Kopiuj kod

Skopiuj kod do schowka

import type { FC } from "preact";
import { useIntlayer } from "preact-intlayer";

const MyComponent: FC = () => {
const content = useIntlayer("multi_lang");

return (
  <div>
    <p>{content.welcomeMessage}</p>
  </div>
);
};

export default MyComponent;

With solid-intlayer, you can use translations in SolidJS components. Here's an example:

**/*.tsx

Kopiuj kod

Skopiuj kod do schowka

import type { Component } from "solid-js";
import { useIntlayer } from "solid-intlayer";

const MyComponent: Component = () => {
const content = useIntlayer("multi_lang");

return (
  <div>
    <p>{content.welcomeMessage}</p>
  </div>
);
};

export default MyComponent;

With angular-intlayer, you can use translations in Angular components. Here's an example:

app.component.ts

Kopiuj kod

Skopiuj kod do schowka

import { Component } from "@angular/core";import { useIntlayer } from "angular-intlayer";@Component({selector: "app-my-component",template: `  <div>    <p>{{ content().welcomeMessage }}</p>  </div>`,})export class MyComponent {content = useIntlayer("multi_lang");}

With vanilla-intlayer, you can use translations by subscribing to content changes. Here's an example:

**/*.ts

Kopiuj kod

Skopiuj kod do schowka

import { installIntlayer, useIntlayer } from "vanilla-intlayer";

installIntlayer();

const content = useIntlayer("multi_lang").onChange((newContent) => {
document.getElementById("welcome-message")!.textContent = String(
  newContent.welcomeMessage
);
});

// Initial render
document.getElementById("welcome-message")!.textContent = String(
content.welcomeMessage
);

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