# gt-react: General Translation React SDK: t URL: https://generaltranslation.com/fr/docs/react/api/strings/t-function.mdx --- title: t description: Référence API de la fonction synchrone t() de traduction de chaînes de caractères --- ## Vue d’ensemble La fonction `t` est une fonction synchrone de traduction de chaînes de caractères, définie au niveau du module, pour les applications React côté client. ```jsx import { t } from 'gt-react/browser'; const greeting = t('Hello, world!'); ``` `t` peut également être utilisé sous forme de template literal taggé : ```jsx import { t } from 'gt-react/browser'; const greeting = t`Hello, ${name}!`; ``` Contrairement à `useGT` (qui nécessite un contexte React) ou à `msg` (qui encode des chaînes de caractères pour les résoudre plus tard), `t()` renvoie directement la chaîne de caractères traduite. Il peut être appelé n’importe où dans le code exécuté dans le navigateur — y compris au niveau du module, en dehors des composants React. **Expérimental :** `t()` est une fonctionnalité expérimentale. Il est conçu pour les applications React exécutées uniquement côté client et ne s’intègre pas encore au contexte React (par exemple, ``, `useGT`). S’il est appelé sur le serveur, il affiche un avertissement dans les logs et renvoie la chaîne de caractères source. *** ## Configuration `t()` dépend de `bootstrap()` pour charger les traductions avant le rendu de l’application. Vous devez modifier le point d’entrée de votre application afin d’exécuter `bootstrap()` en premier. En général, le point d’entrée est `main.tsx`. Vous allez créer un nouveau fichier (par exemple `bootstrap.tsx`) et faire pointer `index.html` vers celui-ci à la place. ### 1. Créez le point d’entrée d’amorçage ```tsx // bootstrap.tsx import gtConfig from '../gt.config.json'; import { bootstrap } from 'gt-react/browser'; async function loadTranslations(locale: string) { return (await import(`./_gt/${locale}.json`)).default; } await bootstrap({ ...gtConfig, loadTranslations, }); await import('./main.tsx'); ``` Par défaut, `bootstrap()` met automatiquement à jour les attributs `lang` et `dir` de l’élément `` pour qu’ils correspondent au paramètre régional en cours. Vous pouvez configurer ce comportement avec `htmlTagOptions` : ```tsx await bootstrap({ ...gtConfig, loadTranslations, htmlTagOptions: { updateHtmlLangTag: true, // valeur par défaut : true updateHtmlDirTag: false, // valeur par défaut : true }, }); ``` Vous pouvez également mettre à jour manuellement ces attributs à tout moment à l’aide des fonctions d’assistance `updateHtmlTagLang` et `updateHtmlTagDir` de `gt-react/browser`. ### 2. Mettez à jour votre `index.html` Dans votre `index.html`, mettez à jour le point d’entrée du module afin qu’il pointe vers votre nouveau fichier d’amorçage au lieu de `main.tsx` : ``` src="/src/bootstrap.tsx" ``` ### 3. Utilisez `t()` partout ```tsx import { t } from 'gt-react/browser'; // Niveau module — s'exécute au moment de l'import const navItems = [ { label: t('Home'), path: '/' }, { label: t('About'), path: '/about' }, { label: t('Contact'), path: '/contact' }, ]; export default function Nav() { return ( ); } ``` **Configuration autonome :** `t()` ne s’intègre actuellement pas au reste du système `gt-react` (par exemple ``, `useGT`). Vous devez utiliser la configuration d’amorçage décrite ci-dessus. *** ## Template literal taggé `t` peut être utilisé comme template literal taggé, pour une syntaxe plus naturelle : ```tsx import { t } from 'gt-react/browser'; // Ces deux formes sont équivalentes : t('Hello, {name}!', { name: 'Alice' }); t`Hello, ${name}!`; ``` La syntaxe tagged template élimine le besoin de placeholders de style ICU et d’objets d’options — les variables sont interpolées directement dans l’expression du template. ### Enregistrement global Au lieu d’importer `t` dans chaque fichier, vous pouvez l’enregistrer de façon globale : ```tsx // Dans le point d'entrée de votre application import "gt-react/macros"; ``` Cela définit `globalThis.t`, ce qui rend le template literal taggé disponible partout sans import explicite : ```tsx // Aucun import nécessaire const labels = { save: t`Save`, cancel: t`Cancel`, }; ``` *** ## Référence ### Paramètres | Nom | Type | Description | | ---------- | -------- | --------------------------------------------------------------------------- | | `message` | `string` | La chaîne à traduire. | | `options?` | `object` | Facultatif. Objet contenant les valeurs des variables pour l’interpolation. | ### Renvoie `string` — La chaîne de caractères traduite pour le paramètre régional en cours, ou la chaîne source si aucune traduction n’est disponible. *** ## Variables Vous pouvez passer des variables à l’aide de la syntaxe entre accolades : ```tsx import { t } from 'gt-react/browser'; const message = t('Hello, {name}!', { name: 'Alice' }); // → "Hola, Alice!" (en espagnol) ``` Ou utilisez la syntaxe de template literal taggé, qui gère automatiquement l’interpolation : ```tsx import { t } from 'gt-react/browser'; const message = t`Hello, ${name}!`; // → "Hola, Alice!" (en espagnol, lorsque name = 'Alice') ``` Les valeurs des variables ne sont pas traduites — seul le template de la chaîne de caractères qui les entoure l’est. *** ## Comportement ### Fonctionnement `bootstrap()` charge de façon asynchrone toutes les traductions du paramètre régional actuel avant l’importation des modules de l’application. Une fois chargées, `t()` lit les données de traduction de manière synchrone, sans coût supplémentaire. Comme les traductions sont résolues au chargement des modules : * **Changer de paramètre régional nécessite un rechargement complet de la page.** Le navigateur doit réexécuter tous les modules pour prendre en compte les nouvelles traductions. * **Cela fonctionne uniquement dans les applications côté client.** Le code au niveau du module est réexécuté lorsqu’il est chargé dans le navigateur, ce qui rend ce modèle possible. ### Comportement côté serveur Si `t()` est appelé dans un environnement serveur (où `window` n’est pas défini), il émet un avertissement et renvoie la chaîne source d’origine. Pour la traduction côté serveur, utilisez des Hooks basés sur le contexte React comme `useGT`. *** ## Exemple ### Fichier de constantes ```tsx // constants.ts import { t } from 'gt-react/browser'; export const ERROR_MESSAGES = { notFound: t('Page not found'), unauthorized: t('You do not have permission to view this page'), serverError: t('Something went wrong. Please try again later.'), }; ``` ### Définitions du routeur ```tsx // routes.ts import { t } from 'gt-react/browser'; export const routes = [ { path: '/', label: t('Home') }, { path: '/dashboard', label: t('Dashboard') }, { path: '/settings', label: t('Settings') }, ]; ``` *** ## Remarques * `t()` s’importe depuis `gt-react/browser`, et non directement depuis `gt-react`. * Nécessite d’appeler `bootstrap()` avant de charger tout module qui utilise `t()`. * **Expérimental.** Ne s’intègre pas encore à `` ni aux autres fonctionnalités de `gt-react` basées sur le contexte. * Changer de paramètre régional nécessite de recharger entièrement la page. ## Journaux de développement * [gt-react@10.12.0](/devlog/gt-react_v10_12_0) — introduction de la fonction `t()` * [gt-react@10.13.0](/devlog/gt-react_v10_13_0) — prise en charge des template literals taggés ## Étapes suivantes * Consultez [`useGT`](/docs/react/api/strings/use-gt) pour traduire des chaînes de caractères dans des composants React. * Consultez [`msg`](/docs/react/api/strings/msg) pour encoder des chaînes de caractères afin de les traduire ultérieurement.