Pose una domanda e ottieni un riassunto del documento facendo riferimento a questa pagina e al provider AI di tua scelta
Integrando il server MCP Intlayer al tuo assistente AI, puoi recuperare tutti i documenti direttamente da ChatGPT, DeepSeek, Cursor, VSCode, ecc.
Vedi la documentazione del server MCPIl contenuto di questa pagina è stato tradotto con un'IA.
Vedi l'ultima versione del contenuto originale in ingleseSe hai un’idea per migliorare questa documentazione, non esitare a contribuire inviando una pull request su GitHub.
Collegamento GitHub alla documentazioneCopia il Markdown del documento nella porta-documenti
Traduzione
Definizione delle Traduzioni
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.
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:
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:
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:
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;Cronologia del Documento
- 5.5.10 - 2025-06-29: Cronologia iniziale