# General Translation React SDKs (gt-react, gt-next): t URL: https://generaltranslation.com/fr/docs/react/reference/functions/t-function.mdx --- title: t description: Traduire des chaînes de façon synchrone au niveau du module avec General Translation gt-react. Référence de l’API pour t. --- La fonction `t` est une fonction synchrone de traduction de chaînes au niveau du module pour les applications `gt-react` côté client. Contrairement à [`useGT`](/docs/react/reference/hooks/use-gt) (qui nécessite le contexte React) ou à [`msg`](/docs/react/reference/functions/msg) (qui encode les chaînes pour une résolution ultérieure), `t` renvoie directement la chaîne traduite et peut être appelée n’importe où dans le code du navigateur, y compris en dehors des composants React. *Disponible dans `gt-react` et `gt-tanstack-start`. Les exemples importent `gt-react` ; pour TanStack Start, importez depuis `gt-tanstack-start`.* *Remarque : n’est pas exporté par `gt-next` ni par `gt-react-native`. Dans `gt-next`, utilisez [`useGT`](/docs/react/reference/hooks/use-gt) dans les composants synchrones ou [`getGT`](/docs/react/nextjs/reference/functions/get-gt) dans les composants async App Router.* ## Vue d’ensemble [#overview] Importez `t` depuis `gt-react` et appelez-le en lui passant une chaîne de caractères. ```tsx import { t } from 'gt-react'; const greeting = t('Hello, world!'); ``` Il peut également être utilisé comme littéral de gabarit tagué : ```tsx import { t } from 'gt-react'; const greeting = t`Hello, ${name}!`; ``` *Remarque : `t` lit les traductions dans le cache client alimenté par [`initializeGTSPA`](/docs/react/reference/config#initialize-spa). Assurez-vous que l’initialisation a bien été exécutée avant tout module qui appelle `t` au niveau du module. Appeler `t` au niveau du module dans une application rendue côté serveur est interdit : cela lève une exception en développement et, en production, journalise une erreur puis revient à la valeur du paramètre régional par défaut.* ## Fonctionnement [#how-it-works] * **Traduction synchrone au niveau du module.** Une fois les traductions chargées pour le paramètre régional actif, `t` les lit de manière synchrone, sans surcoût. Comme il n’utilise pas le contexte React, il fonctionne au niveau du module (constantes, tables de routes) aussi bien qu’à l’intérieur des composants. * **Résolu au chargement.** Les traductions sont résolues lors de l’évaluation des modules, donc **changer de paramètre régional nécessite un rechargement complet de la page** — le navigateur doit réexécuter les modules pour prendre en compte le nouveau paramètre régional. Cette approche fonctionne uniquement dans les applications côté client. * **Les variables ne sont pas traduites.** Les valeurs interpolées sont insérées dans la chaîne traduite, mais ne sont jamais traduites. * **Comportement côté serveur.** Appeler `t` au niveau du module est interdit lorsque la stratégie de rendu est `server-render` — c’est-à-dire avant l’initialisation du magasin de conditions au moment de la requête. En développement, cela génère une erreur ; en production, cela consigne une erreur et utilise la valeur `defaultLocale` comme repli. Pour la traduction côté serveur, utilisez des hooks basés sur le contexte, comme [`useGT`](/docs/react/reference/hooks/use-gt). ## Littéral de gabarit tagué [#tagged-template] `t` peut être utilisé sous forme de littéral de gabarit tagué pour une syntaxe plus naturelle. Les exemples suivants sont équivalents : ```tsx import { t } from 'gt-react'; t('Hello, {name}!', { name: 'Alice' }); t`Hello, ${name}!`; ``` La forme taguée interpole directement les variables depuis le template, vous n’avez donc pas besoin de placeholders de style ICU ni d’un objet d’options. ### Enregistrement global [#macros] Au lieu d’importer `t` dans chaque fichier, enregistrez-le globalement en important une seule fois le point d’entrée des macros dans le point d’entrée de votre application : ```tsx import 'gt-react/macros'; ``` Cela définit `globalThis.t`, ce qui rend le littéral de gabarit tagué disponible partout sans import explicite : ```tsx // Aucun import nécessaire const labels = { save: t`Save`, cancel: t`Cancel`, }; ``` ## Paramètres [#parameters] | Paramètre | Description | Type | Facultatif | Par défaut | | --------------------- | --------------------------------------------------- | ---------------------- | ---------- | ---------- | | [`message`](#message) | La chaîne à traduire. | `string` | Non | — | | [`options`](#options) | Variables d’interpolation et options de traduction. | `GTTranslationOptions` | Oui | — | ### `message` [#message] **Type** `string` · **Obligatoire** La chaîne à traduire. Lorsqu’elle est utilisée comme littéral de gabarit tagué, il s’agit alors de la chaîne du template. ### `options` [#options] **Type** `GTTranslationOptions` · **Facultatif** Variables d’interpolation et options, comme `$context` et `$id`. Voir [`InlineTranslationOptions`](/docs/react/reference/types/inline-translation-options). ## Renvoie [#returns] **Type** `string` La chaîne traduite pour le paramètre régional actif, ou la chaîne source si aucune traduction n’est disponible. ## Exemples [#examples] ```tsx title="constants.ts" import { t } from 'gt-react'; 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.'), }; ``` ```tsx title="routes.ts" import { t } from 'gt-react'; export const routes = [ { path: '/', label: t('Home') }, { path: '/dashboard', label: t('Dashboard') }, { path: '/settings', label: t('Settings') }, ]; ``` ```tsx import { t } from 'gt-react'; const message = t('Hello, {name}!', { name: 'Alice' }); // Les valeurs des variables sont insérées, non traduites. ``` ## Remarques [#notes] * `t` est synchrone et peut être appelé au niveau du module ; il n’utilise pas le contexte React. * Changer de paramètre régional nécessite un rechargement complet de la page. * Pour traduire des chaînes de caractères dans les composants, utilisez [`useGT`](/docs/react/reference/hooks/use-gt) ; pour encoder des chaînes en vue d’une résolution ultérieure, utilisez [`msg`](/docs/react/reference/functions/msg).