LOG 05 · LINGUAGEM
React e TypeScript
Cada componente, hook e módulo partilhado aqui está tipado do princípio ao fim — detetando incompatibilidades de forma de estado entre sistemas independentes antes de irem para produção, não depois.
Publicado · Atualizado
Estado partilhado sem prop drilling
Algumas interações precisam de atravessar a árvore de componentes — um movimento de câmara disparado por scroll ao qual um rodapé, uma barra de navegação e três componentes de secção não relacionados precisam de reagir. Passar isso através de props significaria canalizar estado por componentes a quem, de resto, isso não interessa. Em vez disso, um pequeno repositório tipado ao nível do módulo (um objeto simples com um par `subscribe`/`setActiveIndex`) atua como fonte única de verdade; qualquer componente a quem interesse importa-o diretamente e subscreve-se, qualquer um a quem não interesse nunca lhe toca.
O TypeScript é o que torna esse padrão seguro em vez de frágil — a forma do repositório é uma interface real, por isso um ponto de chamada que erra o contrato (tipo de argumento errado, um nome de método mal escrito) falha em tempo de compilação em vez de não fazer nada silenciosamente em produção.
Os tipos como documentação
As assinaturas de função funcionam também como a documentação de como uma peça de lógica partilhada deve ser usada — um segundo parâmetro opcional numa função de navegação, por exemplo, torna um caminho de reserva "instantâneo, sem animação" descobrível diretamente no ponto de chamada em vez de enterrado num comentário três ficheiros mais à frente.
Dicionários tipados em três línguas
Este site é publicado em inglês, espanhol e português, e os ficheiros de tradução não são três objetos independentes que por acaso se parecem. O dicionário em inglês é a fonte de verdade e os outros dois são verificados contra `Dictionary = typeof en`, por isso uma chave renomeada, mal escrita ou esquecida numa tradução é um erro de compilação em vez da palavra `undefined` a aparecer numa página em produção, numa língua que não leio todos os dias.
A mesma ideia cobre o texto de cada projeto. Os dados localizados são tipados como um `Pick` da entrada canónica, o que significa que um ficheiro de tradução só pode substituir campos que existem mesmo, e acrescentar um campo novo ao tipo base diz-me imediatamente que línguas ainda faltam. O sistema de tipos faz o trabalho que de outra forma teria de ser feito à mão por um processo de gestão de traduções.