La funzione t in intlayer ti permette di dichiarare contenuti in più lingue. Questa funzione garantisce la sicurezza dei tipi, generando un errore se mancano delle traduzioni, il che è particolarmente utile negli ambienti TypeScript.

Ecco un esempio di come dichiarare contenuti con traduzioni.

**/*.content.ts

Copiare il codice

Copiare il codice nella clipboard

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

interface Content {
  welcomeMessage: string;
}

export default {
  key: "multi_lang",
  content: {
    welcomeMessage: t({
      en: "Welcome to our application", // messaggio di benvenuto in inglese
      fr: "Bienvenue dans notre application", // messaggio di benvenuto in francese
      es: "Bienvenido a nuestra aplicación", // messaggio di benvenuto in spagnolo
    }),
  },
} satisfies Dictionary<Content>;

Configurazione delle Locali

Per garantire una corretta gestione delle traduzioni, puoi configurare le località accettate in intlayer.config.ts. Questa configurazione ti permette di definire le lingue supportate dalla tua applicazione:

intlayer.config.ts

Copiare il codice

Copiare il codice nella clipboard

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

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

export default config;

Utilizzo delle Traduzioni nei Componenti React

Con react-intlayer, puoi utilizzare le traduzioni nei componenti React. Ecco un esempio:

**/*.tsx

Copiare il codice

Copiare il codice nella clipboard

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;

Questo componente recupera la traduzione corrispondente in base alla locale corrente impostata nella tua applicazione.

Oggetti di Contenuto Personalizzati

intlayer supporta oggetti di contenuto personalizzati per la traduzione, permettendoti di definire strutture più complesse garantendo al contempo la sicurezza dei tipi. Ecco un esempio con un oggetto personalizzato:

**/*.content.ts

Copiare il codice

Copiare il codice nella clipboard

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;

Dichiarazione dei contenuti

Plurale

Creazione:2024-08-11Ultimo aggiornamento:2025-06-29

Riferimento a questa documentazione al tuo assistente AI preferito

ChatGPT

Claude

DeepSeek

Google AI mode Gemini

Perplexity Mistral

Grok

Pose una domanda e ottieni un riassunto del documento facendo riferimento a questa pagina e al provider AI di tua scelta

Questo documento non è aggiornato, la versione base è stata aggiornata il 23 agosto 2025.

Vai alla documentazione in inglese

Cronologia delle versioni

"Cronologia iniziale"
v5.5.1029/06/2025

Il contenuto di questa pagina è stato tradotto con un'IA.

Vedi l'ultima versione del contenuto originale in inglese

Modifica questa documentazione

Se hai un’idea per migliorare questa documentazione, non esitare a contribuire inviando una pull request su GitHub.

Collegamento GitHub alla documentazione

Copia

Copia il Markdown del documento nella porta-documenti

Traduzione

Definizione delle Traduzioni

Ecco un esempio di come dichiarare contenuti con traduzioni.

**/*.content.ts

Copiare il codice

Copiare il codice nella clipboard

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

interface Content {
  welcomeMessage: string;
}

export default {
  key: "multi_lang",
  content: {
    welcomeMessage: t({
      en: "Welcome to our application", // messaggio di benvenuto in inglese
      fr: "Bienvenue dans notre application", // messaggio di benvenuto in francese
      es: "Bienvenido a nuestra aplicación", // messaggio di benvenuto in spagnolo
    }),
  },
} satisfies Dictionary<Content>;

Configurazione delle Locali

intlayer.config.ts

Copiare il codice

Copiare il codice nella clipboard

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

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

export default config;

Utilizzo delle Traduzioni nei Componenti React

Con react-intlayer, puoi utilizzare le traduzioni nei componenti React. Ecco un esempio:

**/*.tsx

Copiare il codice

Copiare il codice nella clipboard

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;

Questo componente recupera la traduzione corrispondente in base alla locale corrente impostata nella tua applicazione.

Oggetti di Contenuto Personalizzati

**/*.content.ts

Copiare il codice

Copiare il codice nella clipboard

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;

Dichiarazione dei contenuti

Plurale