LOG 05 · LENGUAJE
React y TypeScript
Cada componente, hook y módulo compartido aquí está tipado de principio a fin — detectando incompatibilidades de forma de estado entre sistemas independientes antes de que se publiquen, no después.
Publicado · Actualizado
Estado compartido sin prop drilling
Algunas interacciones necesitan atravesar el árbol de componentes — un movimiento de cámara disparado por scroll al que un footer, una barra de navegación y tres componentes de sección no relacionados necesitan reaccionar. Pasar eso a través de props significaría cablear estado por componentes a los que, por lo demás, no les importa. En su lugar, un pequeño almacén tipado a nivel de módulo (un objeto simple con un par `subscribe`/`setActiveIndex`) actúa como única fuente de verdad; cualquier componente al que le importe lo importa directamente y se suscribe, cualquiera al que no le importe nunca lo toca.
TypeScript es lo que hace que ese patrón sea seguro en lugar de frágil — la forma del almacén es una interfaz real, así que un punto de llamada que se equivoca en el contrato (tipo de argumento incorrecto, un nombre de método mal escrito) falla en tiempo de compilación en lugar de no hacer nada silenciosamente en producción.
Los tipos como documentación
Las firmas de función funcionan también como la documentación de cómo debe usarse una pieza de lógica compartida — un segundo parámetro opcional en una función de navegación, por ejemplo, hace que una ruta de respaldo "instantánea, sin animación" sea descubrible directamente en el punto de llamada en lugar de estar enterrada en un comentario tres archivos más allá.
Diccionarios tipados en tres idiomas
Este sitio se publica en inglés, español y portugués, y los archivos de traducción no son tres objetos independientes que casualmente se parecen. El diccionario en inglés es la fuente de verdad y los otros dos se comprueban contra `Dictionary = typeof en`, así que una clave renombrada, mal escrita u olvidada en una traducción es un error de compilación en lugar de la palabra `undefined` apareciendo en una página en vivo en un idioma que no leo a diario.
La misma idea cubre los textos de cada proyecto. Los datos localizados se tipan como un `Pick` de la entrada canónica, lo que significa que un archivo de traducción solo puede sobrescribir campos que existen de verdad, y añadir un campo nuevo al tipo base me indica de inmediato qué idiomas siguen pendientes. El sistema de tipos hace el trabajo que de otro modo tendría que hacer a mano un proceso de gestión de traducciones.