Antecedentes: Un momento de “vacío” una tarde
En el desarrollo web moderno, no es exagerado decir que la mitad del trabajo de un ingeniero frontend consiste en “hablar con las API”. Compruebas la respuesta de la API en Postman o Swagger y luego la reescribes en definiciones de interface o type de TypeScript…
Una tarde, mientras miraba una respuesta JSON gigante con jerarquías complejas, de repente detuve los dedos.
“¿Qué estoy haciendo exactamente, escribiendo nombres de propiedades uno por uno? ¿Hay alguna creatividad como ingeniero en esta tarea?”.
A medida que crece un proyecto, la jerarquía de las respuestas se vuelve más profunda y aumenta el riesgo de errores tipográficos. Quería liberarme de ese “trabajo manual”.
“Sin necesidad de configuración: obtén tipos que tengan sentido en el momento en que los pegues”. Quería una herramienta con la sensación de una “herramienta de artesano”, por lo que comencé el desarrollo del Generador de JSON a TypeScript.
Ingenio técnico: la “estética” de los algoritmos recursivos
El mayor desafío para esta herramienta fue “lograr una precisión de nivel profesional utilizando solo lógica pura, sin ninguna librería externa pesada”.
1. “Procesamiento recursivo” a través de jerarquías interminables
JSON tiene una estructura anidada, como cajas dentro de cajas. No importa cuán profundo esté anidado, tienes que llegar a la parte más profunda en un instante. Para manejar esta “profundidad indefinida”, construí el algoritmo utilizando procesamiento recursivo puro.
private static inferType(value: any, depth = 1): string {
// Determinación básica de tipos primitivos
if (value === null) return 'null';
// En el caso de un arreglo, explorar completamente el contenido de nuevo
if (Array.isArray(value)) return this.formatArray(value, depth);
// En el caso de un objeto, visitar recursivamente las propiedades
if (typeof value === 'object') return this.formatObject(value, depth);
return typeof value;
}Al refinar esta estructura simple, pude generar definiciones de tipos robustas en un instante, incluso para las estructuras de datos más complejas.
2. Una dedicación a los “tipos Union”
Lo que más problemas me dio durante el desarrollo fue el manejo de los arreglos.
Por ejemplo, si hay un arreglo como [1, "text", null], simplemente mostrar any[] es demasiado perezoso. Por otro lado, decidir que es number[] solo mirando el primer elemento es extremadamente inútil.
En esta herramienta, creé una lógica que analiza todos los tipos de todos los elementos dentro de un arreglo, elimina los duplicados y luego los muestra como un tipo Union unido por | (tuberías).
const types = Array.from(new Set(arr.map(item => this.inferType(item))));
const union = types.length === 1 ? types[0] : `(${types.join(' | ')})`;
return union + '[]'; // Resultado: (number | string | null)[]Estoy seguro de que este tipo de “detalle” es lo que influye enormemente en la experiencia del usuario en los sitios de desarrollo reales.
Consideración por las “partes invisibles”
También me obsesioné con la “belleza” de los resultados de la conversión.
Repetí ajustes finos en el texto, como la profundidad de la sangría y el uso de comillas en los nombres de las claves, buscando un nivel de calidad en el que “puedas pegar el código convertido en tu proyecto y hacer el commit sin ejecutar un formateador ni una sola vez”.
Conclusión
A primera vista, una herramienta de conversión de JSON a TypeScript es una herramienta sencilla. Sin embargo, detrás de ella se encuentra “la belleza del procesamiento recursivo” y un firme compromiso de “no desperdiciar ni un minuto del tiempo de un ingeniero”.
Cambia tu tiempo de desarrollo de la simple “transcripción de tipos” a la “construcción de código valioso”. Espero que esto pueda ser una pequeña parte de ese poder.