Traduzione

Definizione delle 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.

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

Configurazione per le Localizzazioni

Per garantire una corretta gestione delle traduzioni, è possibile configurare le localizzazioni accettate in intlayer.config.ts. Questa configurazione consente di definire le lingue supportate dalla tua applicazione:

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:

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 localizzazione attuale 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:

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;