Функция t в intlayer позволяет объявлять контент на нескольких языках. Эта функция обеспечивает типовую безопасность, выдавая ошибку, если какие-либо переводы отсутствуют, что особенно полезно в средах TypeScript.

Вот пример того, как объявить контент с переводами.

**/*.content.ts

Копировать код

Копировать код в буфер обмена

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

Конфигурация локалей

Для обеспечения правильной обработки переводов вы можете настроить поддерживаемые локали в файле intlayer.config.ts. Эта конфигурация позволяет определить языки, которые поддерживает ваше приложение:

intlayer.config.ts

Копировать код

Копировать код в буфер обмена

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

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

export default config;

Использование переводов в React-компонентах

С помощью react-intlayer вы можете использовать переводы в React-компонентах. Вот пример:

**/*.tsx

Копировать код

Копировать код в буфер обмена

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;

Этот компонент получает соответствующий перевод на основе текущей локали, установленной в вашем приложении.

Пользовательские объекты контента

intlayer поддерживает пользовательские объекты контента для перевода, позволяя определять более сложные структуры при обеспечении типовой безопасности. Вот пример с пользовательским объектом:

**/*.content.ts

Копировать код

Копировать код в буфер обмена

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;

Объявление контента

Множественное число

Создание:2024-08-11Последнее обновление:2025-06-29

Ссылайтесь на этот документ на ваш любимый ассистент AI

ChatGPT

Claude

DeepSeek

Google AI mode Gemini

Perplexity Mistral

Grok

Спросите свой вопрос и получите сводку документа, используя эту страницу и выбранного вами поставщика AI

Этот документ устарел, базовая версия была обновлена 23 августа 2025 г..

Перейти к английской документации

История версий

"Инициализация истории"
v5.5.1029.06.2025

Содержимое этой страницы было переведено с помощью ИИ.

Смотреть последнюю версию оригинального контента на английском

Изменить эту документацию

Ссылка на документацию GitHub

Копировать

Копировать Markdown документа в буфер обмена

Перевод

Определение переводов

Вот пример того, как объявить контент с переводами.

**/*.content.ts

Копировать код

Копировать код в буфер обмена

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

Конфигурация локалей

intlayer.config.ts

Копировать код

Копировать код в буфер обмена

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

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

export default config;

Использование переводов в React-компонентах

С помощью react-intlayer вы можете использовать переводы в React-компонентах. Вот пример:

**/*.tsx

Копировать код

Копировать код в буфер обмена

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;

Пользовательские объекты контента

**/*.content.ts

Копировать код

Копировать код в буфер обмена

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;

Объявление контента

Множественное число