Internacionalização (i18n) em TypeScript

Internacionalização (i18n) em TypeScript: visão geral de ferramentas e práticas

Internacionalização (i18n) é o processo de projetar software para que ele possa ser adaptado a diferentes idiomas e padrões regionais sem alterações no código-fonte. Para aplicações TypeScript, a escolha da biblioteca i18n adequada é crucial: dela dependem a segurança de tipos das traduções, o desempenho e a facilidade de manutenção. Neste artigo, examinaremos três abordagens e ferramentas principais para implementar i18n em TypeScript.

1. i18next — solução clássica

i18next é a biblioteca mais popular para internacionalização no ecossistema JavaScript/TypeScript. Ela suporta vários frameworks (React, Vue, Angular) e possui um vasto ecossistema de plugins.

Instalação:

npm install i18next i18next-browser-languagedetector

Configuração básica com TypeScript:

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

// Tipagem dos recursos de traduçãodeclare 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;

Exemplo de uso em um componente:

import { useTranslation } from 'react-i18next';

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

Prós:

Comunidade e documentação enormes
Suporte a pluralização
Interpolação de variáveis
Carregamento dinâmico de recursos de idioma

Contras:

Falta de tipagem estrita "pronta para uso"
Necessidade de configuração adicional do TypeScript para segurança total de tipos
Arquivos JSON de tradução não são tipados automaticamente

2. typesafe-i18n — tipagem estrita

typesafe-i18n é uma biblioteca criada especificamente para TypeScript. Sua principal característica é a geração de tipos com base nos seus arquivos de tradução.

Instalação:

npm install typesafe-i18n

Configuração e exemplo:

// Criar arquivo de tradução: src/i18n/en/index.tsexport const en = {  greeting: 'Hello {name}!',  itemsCount: 'You have {count} item | You have {count} items',} as const;

// Geração de tipos (executada automaticamente)// npx typesafe-i18n

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

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

Prós: