i18n com tipagem forte no Astro

Traduções baseadas em strings soltas têm um problema silencioso: nada te avisa quando você digita uma chave errada ou quando uma tradução falta em um idioma. O erro aparece em produção, não no seu editor.

O objetivo

Que t("metadata.title") faça autocomplete e que t("metdata.title") seja um erro de tipo em tempo de compilação.

A solução

Construí @ariaskit/astro-i18n@ariaskit/astro-i18ni18n type-safe para Astro: autocomplete de chaves aninhadas, interpolação de variáveis e um inspetor visual de desenvolvimento. justamente para isso. Você define suas traduções em JSON e deriva o tipo:

import base from '@/i18n/_template.json' with { type: 'json' };
export type BaseJSON = typeof base;

Depois o genérico faz toda a mágica:

const { t, locale } = useI18n<BaseJSON>({ ssg: { astro: Astro } });

A partir daí, estas chaves estão verificadas pelo TypeScript:

• metadata.title
• hero.role
• contact.email

O que aprendi

O tipo recursivo DotNotation percorre o JSON até 5 níveis de profundidade. Além disso, é melhor achatar a estrutura. E um detalhe importante: a biblioteca resolve o estado de idioma a partir de Astro.currentLocale, então nunca fixe o locale no código.

Este mesmo blog que você está lendo usa exatamente essa abordagem em três idiomas.