Vai al contenuto principale

Dichiarazione dei Messaggi

Traduzione Beta Non Ufficiale

Questa pagina è stata tradotta da PageTurner AI (beta). Non ufficialmente approvata dal progetto. Hai trovato un errore? Segnala problema →

Sebbene sia possibile dichiarare i messaggi utilizzando solo gli id, consigliamo vivamente di dichiarare i defaultMessage inline insieme ai loro utilizzi per i seguenti motivi:

  1. I messaggi collocati insieme ai loro utilizzi diventano auto-gestiti: quando gli utilizzi cambiano o vengono rimossi, lo stesso accade ai messaggi.

  2. I messaggi sono fortemente contestuali. Abbiamo riscontrato molti casi in cui gli sviluppatori assumono una certa grammatica quando scrivono i messaggi. Pulsanti/chiamate all'azione ed etichette vengono tradotti in modo diverso.

  3. Lo stile del testo dipende anche dal messaggio stesso. Elementi come troncamento, uso delle maiuscole... influenzano sicuramente i messaggi.

  4. Migliore integrazione con le toolchain. La maggior parte delle toolchain non può verificare riferimenti tra file per validare sintassi/uso.

Ad alto livello, i messaggi formatjs utilizzano la sintassi ICU con alcune migliorie comuni ad altri formati di messaggio come Fluent. Questa sezione si concentra sui modi effettivamente supportati per chiamare le API formatjs affinché i messaggi possano essere estratti.

Utilizzo dell'API imperativa intl.formatMessage​

// Method must be exactly `intl.formatMessage`
intl.formatMessage(
  {
    description: 'A message', // Description should be a string literal
    defaultMessage: 'My name is {name}', // Message should be a string literal
  },
  {
    name: userName,
  } // Values should be an object literal, but not necessarily every value inside
)

Utilizzo dell'API React <FormattedMessage/>​

import {FormattedMessage} from 'react-intl'
;<FormattedMessage
  description="A message" // Description should be a string literal
  defaultMessage="My name is {name}" // Message should be a string literal
  values={
    {
      name: userName,
    } // Values should be an object literal, but not necessarily every value inside
  }
/>

Utilizzo dell'API Vue e dei metodi template come $formatMessage​

<template>
  <p>{{ $formatNumber(3, {style: 'currency', currency: 'USD'}) }}</p>
</template>

Pre-dichiarazione con defineMessage per utilizzo successivo (meno consigliato)​

import {defineMessage} from 'react-intl'
const message = defineMessage({
  description: 'A message', // Description should be a string literal
  defaultMessage: 'My name is {name}', // Message should be a string literal
})

intl.formatMessage(message, {name: 'John'}) // My name is John

<FormattedMessage
  {...message}
  values={{
    name: 'John',
  }}
/> // My name is John
attenzione

Per estrarre i messaggi dal codebase ci basiamo sull'AST, quindi assicurati di chiamare intl.formatMessage(), utilizzare i nostri componenti React integrati, usare i nostri metodi Vue o configurare correttamente --additionalFunctionNames/--additionalComponentNames nella nostra CLI.

attenzione

È possibile dichiarare un messaggio senza formattarlo immediatamente con defineMessage e il nostro estrattore sarà comunque in grado di estrarlo. Tuttavia, la nostra regola di lint enforce-placeholders non sarà in grado di analizzarlo.