Saltar al contenido principal

Transformador de TypeScript

Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

npm version

Procesa mensajes de cadena para traducción en módulos que usan react-intl, específicamente:

  • Analiza y verifica que los mensajes cumplan con ICU sin problemas de sintaxis.

  • Elimina description del descriptor de mensaje para ahorrar bytes ya que no se usa en tiempo de ejecución.

  • Opción para eliminar defaultMessage del descriptor de mensaje y ahorrar bytes, ya que no se usa en tiempo de ejecución.

  • Inyecta automáticamente IDs de mensaje basados en patrones específicos.

Instalación​

npm i @formatjs/ts-transformer

Uso​

Los descriptores de mensajes predeterminados para el idioma principal de la aplicación se procesarán desde: defineMessages(), defineMessage(), intl.formatMessage y <FormattedMessage>; todos ellos exportaciones nombradas del paquete React Intl.

Mediante ts-loader​

import {transform} from '@formatjs/ts-transformer'

module.exports = {
  ...otherConfigs,
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: [
          {
            loader: 'ts-loader',
            options: {
              getCustomTransformers() {
                return {
                  before: [
                    transform({
                      overrideIdFn: '[sha512:contenthash:base64:6]',
                    }),
                  ],
                }
              },
            },
          },
        ],
      },
    ],
  },
}

Mediante ts-jest en jest.config.js​

precaución

Requiere ts-jest@26.4.0 o superior

// jest.config.js
module.exports = {
  // [...]
  transform: {
    '^.+\\.(ts|tsx)?$': [
      'ts-jest',
      {
        astTransformers: {
          before: [
            {
              path: '@formatjs/ts-transformer/ts-jest-integration',
              options: {
                // options
                overrideIdFn: '[sha512:contenthash:base64:6]',
                ast: true,
              },
            },
          ],
        },
      },
    ],
  },
}

Mediante ts-patch​

{
  "compilerOptions": {
    "plugins": [
      {
        "transform": "@formatjs/ts-transformer",
        "import": "transform",
        "type": "config",
        "overrideIdFn": "[sha512:contenthash:base64:6]",
        "ast": true
      }
    ]
  }
}

Mediante rollup-plugin-typescript2​

// rollup.config.js
import typescript from 'rollup-plugin-typescript2'
import {transform} from '@formatjs/ts-transformer'

export default {
  input: './main.ts',

  plugins: [
    typescript({
      transformers: () => ({
        before: [
          transform({
            overrideIdFn: '[sha512:contenthash:base64:6]',
            ast: true,
          }),
        ],
      }),
    }),
  ],
}

Opciones​

overrideIdFn​

Función con firma (id: string, defaultMessage: string, description: string|object) => string que permite sobrescribir el ID tanto en el JavaScript extraído como en los mensajes.

Alternativamente, overrideIdFn puede ser una cadena de plantilla, que solo se usa si el ID del mensaje está vacío.

removeDefaultMessage​

Elimina el campo defaultMessage en el JS generado después de la extracción.

extractSourceLocation​

Indica si se debe extraer metadatos sobre la ubicación del mensaje en el archivo fuente. Si es true, existirán campos file, start y end en cada descriptor de mensaje extraído. Por defecto false.

additionalComponentNames​

Nombres de componentes adicionales para extraer mensajes, ej: ['FormattedFooBarMessage']. NOTA: Por defecto verificamos que FormattedMessage se importe desde moduleSourceName para garantizar aliasing seguro. Esta opción no realiza esa verificación, por lo que es menos segura.

additionalFunctionNames​

Nombres de funciones adicionales para extraer mensajes, ej: ['$formatMessage']. Útil para aliases como $t en lugar de formatMessage.

pragma​

Analiza pragmas personalizados adicionales específicos. Permite etiquetar archivos con metadatos como project. Ejemplo:

// @intl-meta project:my-custom-project
import {FormattedMessage} from 'react-intl'
;<FormattedMessage defaultMessage="foo" id="bar" />

Con la opción {pragma: "@intl-meta"}, parsearemos // @intl-meta project:my-custom-project en {project: 'my-custom-project'} en el archivo resultante.

ast​

Pre-analiza defaultMessage en AST para mejor rendimiento en tiempo de ejecución. No tiene efecto cuando removeDefaultMessage es true.

onMsgExtracted(filePath: string, msgs: MessageDescriptor[])​

Callback que se activa al detectar un mensaje.

onMetaExtracted(filePath: string, meta: Record<string, string>)​

Callback que se activa al detectar metadatos de pragme.

preserveWhitespace​

Indica si se deben conservar espacios en blanco y saltos de línea.

Puedes consultar el archivo compile.ts para ver un ejemplo de integración.