Internacionalización de aplicaciones TypeScript: guía completa con ejemplos

Cómo Dejar de Tener Miedo y Empezar a Localizar: Internacionalización de Aplicaciones TypeScript

¿Alguna vez te has preguntado por qué algunos proyectos alcanzan un nivel internacional mientras que otros siguen siendo "startups en ruso"? La mayoría de las veces, la respuesta es simple: la localización. Sí, esa temida abreviatura i18n que provoca un tic nervioso a muchos desarrolladores. Pero seamos honestos: hacer que una aplicación TypeScript sea internacionalizada no es ciencia espacial. Es solo un conjunto de enfoques y herramientas correctas. Hoy lo desglosaremos en la práctica, con ejemplos de código reales, sin rodeos ni teorías abstrusas.

¿Por Qué TypeScript es un Candidato Ideal para i18n?

TypeScript nos da lo que JavaScript simple no tiene: tipado estático. Cuando se trata de traducciones, esto se convierte en un superpoder. Imagina: cambias una clave de traducción y TypeScript grita antes de que la aplicación se ejecute: "¡Oye, olvidaste actualizar la traducción en la configuración regional española!". De acuerdo, esto es mejor que detectar errores en producción.

Además, las librerías modernas para i18n en TypeScript permiten generar tipos directamente desde los archivos de traducción. Esto significa que el autocompletado en el IDE funcionará como un reloj. Sin cadenas mágicas, sin errores tipográficos. Solo código limpio y seguro.

Elección de una Librería: i18next vs react-intl

Hay dos actores principales en el mercado: i18next y react-intl (parte de FormatJS). Ambos funcionan muy bien con TypeScript, pero sus enfoques son diferentes.

• i18next — la navaja suiza de la internacionalización. Soporta pluralización, interpolación, contextos, carga diferida. Ideal para proyectos grandes.
• react-intl — más ligero, adaptado para React. Utiliza un enfoque basado en componentes (<FormattedMessage>) y un potente sistema ICU MessageFormat.

En este artículo, usaremos i18next con el adaptador oficial de React react-i18next. ¿Por qué? Porque es el stack más popular y te brinda el máximo control.

Configuración Paso a Paso: De Cero a la Primera Traducción

Vayamos directo al grano. Instala las dependencias:

npm install i18next react-i18next i18next-browser-languagedetector

Ahora creemos un archivo de configuración. Este es el corazón de la internacionalización de nuestra aplicación TypeScript.

// i18n.tsimport i18n from 'i18next';import { initReactI18next } from 'react-i18next';import LanguageDetector from 'i18next-browser-languagedetector';

import enTranslation from './locales/en/translation.json';import ruTranslation from './locales/ru/translation.json';

i18n  .use(LanguageDetector) // detección automática del idioma del navegador  .use(initReactI18next) // integración con React  .init({    resources: {      en: { translation: enTranslation },      ru: { translation: ruTranslation },    },    fallbackLng: 'en', // si no se encuentra la traducción    interpolation: {      escapeValue: false, // React ya escapa    },  });

export default i18n;

Observa el fallbackLng. Esto es críticamente importante para la experiencia del usuario: si un usuario llega con el navegador configurado en swahili, le mostraremos la versión en inglés, no una pantalla en blanco.

Estructura del Archivo de Traducción

Vamos a crear una carpeta locales y dentro subcarpetas para cada idioma. Aquí hay un ejemplo del archivo en/translation.json:

{  "welcome": "Welcome to our application!",  "description": "This is a {{framework}} app with i18n support.",  "items": {    "zero": "No items",    "one": "One item",    "other": "{{count}} items"  }}

Y aquí está su contraparte en ruso:

{  "welcome": "Добро пожаловать в наше приложение!",  "description": "Это приложение на {{framework}} с поддержкой i18n.",  "items": {    "zero": "Нет элементов",