A função t em intlayer permite que você declare conteúdo em múltiplos idiomas. Essa função garante segurança de tipos, gerando um erro caso alguma tradução esteja faltando, o que é particularmente útil em ambientes TypeScript.

Aqui está um exemplo de como declarar conteúdo com traduções.

**/*.content.ts

Copiar código

Copiar o código para a área de transferência

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

Configuração para Locales

Para garantir o manuseio adequado das traduções, você pode configurar os locales aceitos em intlayer.config.ts. Essa configuração permite definir os idiomas que sua aplicação suporta:

intlayer.config.ts

Copiar código

Copiar o código para a área de transferência

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

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

export default config;

Usando Traduções em Componentes React

Com react-intlayer, você pode usar traduções em componentes React. Aqui está um exemplo:

**/*.tsx

Copiar código

Copiar o código para a área de transferência

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;

Este componente busca a tradução correspondente com base no idioma atual definido em sua aplicação.

Objetos de Conteúdo Personalizados

intlayer suporta objetos de conteúdo personalizados para tradução, permitindo que você defina estruturas mais complexas enquanto garante a segurança de tipos. Aqui está um exemplo com um objeto personalizado:

**/*.content.ts

Copiar código

Copiar o código para a área de transferência

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 da Página",
        content: "Conteúdo da Página",
      },
    }),
  },
} satisfies Dictionary;

export default customContent;

Declaração de conteúdo

Plural

Criação:2024-08-11Última atualização:2025-06-29

Referência esta documentação ao seu assistente AI favorito

ChatGPT

Claude

DeepSeek

Google AI mode Gemini

Perplexity Mistral

Grok

Faça sua pergunta e obtenha um resumo do documento referenciando esta página e o provedor AI de sua escolha

Este documento está desatualizado, a versão base foi atualizada em 23 de agosto de 2025.

Ir para a documentação em inglês

Histórico de versões

"Histórico inicial"
v5.5.1029/06/2025

O conteúdo desta página foi traduzido com uma IA.

Veja a última versão do conteúdo original em inglês

Editar esta documentação

Se você tiver uma ideia para melhorar esta documentação, sinta-se à vontade para contribuir enviando uma pull request no GitHub.

Link do GitHub para a documentação

Copiar

Copiar o Markdown do documento para a área de transferência

Tradução

Definindo Traduções

Aqui está um exemplo de como declarar conteúdo com traduções.

**/*.content.ts

Copiar código

Copiar o código para a área de transferência

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

Configuração para Locales

Para garantir o manuseio adequado das traduções, você pode configurar os locales aceitos em intlayer.config.ts. Essa configuração permite definir os idiomas que sua aplicação suporta:

intlayer.config.ts

Copiar código

Copiar o código para a área de transferência

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

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

export default config;

Usando Traduções em Componentes React

Com react-intlayer, você pode usar traduções em componentes React. Aqui está um exemplo:

**/*.tsx

Copiar código

Copiar o código para a área de transferência

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;

Este componente busca a tradução correspondente com base no idioma atual definido em sua aplicação.

Objetos de Conteúdo Personalizados

**/*.content.ts

Copiar código

Copiar o código para a área de transferência

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 da Página",
        content: "Conteúdo da Página",
      },
    }),
  },
} satisfies Dictionary;

export default customContent;

Declaração de conteúdo

Plural