Traduzione

    Definire Traduzioni

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

    Utilizzo di TypeScript

    Ecco un esempio di come dichiarare contenuti con traduzioni.

    **/*.content.ts
    import { t, type DeclarationContent } from "intlayer";interface Content {  welcomeMessage: string;}export default {  key: "multi_lang",  content: {    welcomeMessage: t({      it: "Benvenuto nella nostra applicazione",      fr: "Bienvenue dans notre application",      es: "Bienvenido a nuestra aplicación",    }),  },} satisfies DeclarationContent<Content>;

    Configurazione per Locali

    Per garantire una corretta gestione delle traduzioni, puoi configurare le lingue accettate in intlayer.config.ts. Questa configurazione consente di definire le lingue che la tua applicazione supporta:

    intlayer.config.ts
    import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ITALIAN, 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
    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 lingua attualmente impostata nella tua applicazione.

    Oggetti di Contenuto Personalizzati

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

    **/*.content.ts
    import { t, type DeclarationContent } from "intlayer";interface ICustomContent {  title: string;  content: string;}const customContent = {  key: "custom_content",  content: {    profileText: t<ICustomContent>({      it: {        title: "Titolo della Pagina",        content: "Contenuto della Pagina",      },      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 DeclarationContent;export default customContent;

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

    Collegamento GitHub alla documentazione
    Dichiarazione di ContenutoEnumerazione