Internacionalización (i18n) en TypeScript

Internacionalización (i18n) en TypeScript: visión general de herramientas y prácticas

La internacionalización (i18n) es el proceso de diseñar software para adaptarlo a diferentes idiomas y estándares regionales sin modificar el código fuente. Para aplicaciones TypeScript, elegir la biblioteca i18n adecuada es fundamental: de ello dependen la seguridad de tipos de las traducciones, el rendimiento y la facilidad de mantenimiento. En este artículo, analizaremos tres enfoques y herramientas principales para implementar i18n en TypeScript.

1. i18next — solución clásica

i18next es la biblioteca más popular para internacionalización en el ecosistema JavaScript/TypeScript. Soporta múltiples frameworks (React, Vue, Angular) y cuenta con un amplio ecosistema de plugins.

Instalación:

npm install i18next i18next-browser-languagedetector

Configuración básica con TypeScript:

import i18n from 'i18next';import { initReactI18next } from 'react-i18next';

// Tipado de recursos de traduccióndeclare module 'i18next' {  interface CustomTypeOptions {    defaultNS: 'common';    resources: {      common: typeof import('./locales/en/common.json');    };  }}

i18n.use(initReactI18next).init({  resources: {    en: { common: require('./locales/en/common.json') },    ru: { common: require('./locales/ru/common.json') },  },  lng: 'ru',  fallbackLng: 'en',  interpolation: { escapeValue: false },});

export default i18n;

Ejemplo de uso en un componente:

import { useTranslation } from 'react-i18next';

function Greeting() {  const { t } = useTranslation();  const userName = 'Ana';    return (    <div>      <p>{t('greeting', { name: userName })}</p>      <p>{t('itemsCount', { count: 5 })}</p>    </div>  );}

Ventajas:

Comunidad y documentación enormes
Soporte para pluralización
Interpolación de variables
Carga dinámica de recursos de idioma

Desventajas:

Falta de tipado estricto "de fábrica"
Necesidad de configuración adicional de TypeScript para total seguridad de tipos
Los archivos JSON de traducción no se tipan automáticamente

2. typesafe-i18n — tipado estricto

typesafe-i18n es una biblioteca creada específicamente para TypeScript. Su característica principal es la generación de tipos basada en tus archivos de traducción.

Instalación:

npm install typesafe-i18n

Configuración y ejemplo:

// Creamos un archivo de traducción: src/i18n/en/index.tsexport const en = {  greeting: '¡Hola {name}!',  itemsCount: 'Tienes {count} elemento | Tienes {count} elementos',} as const;

// Generación de tipos (se ejecuta automáticamente)// npx typesafe-i18n

// Uso en un componenteimport { i18n } from './i18n/i18n-util';

function Profile() {  const LL = i18n();    return (    <div>      <p>{LL.greeting({ name: 'Ana' })}</p>      <p>{LL.itemsCount({ count: 5 })}</p>    </div>  );}

Ventajas: