Convierte una muestra de JSON en tipos TypeScript listos
Tienes una respuesta JSON de una API y necesitas un tipo TypeScript para ella. Ahora. Sin escribir cada campo a mano, sin saltarte un objeto anidado tres niveles abajo, sin olvidar que el campo a veces es `null`. Pega el JSON a la izquierda y obtén una `interface` limpia a la derecha.
El generador detecta los objetos anidados y le da a cada uno su propio tipo con nombre. Recorre los arrays, elige el tipo de elemento y emite `User[]` en vez de una forma larga en línea. Si las claves a veces faltan o a veces son null, añade un `?`. Si tu array contiene objetos con campos algo distintos, los une en una superforma y marca las diferencias como opcionales.
Cuatro formatos de salida: una `interface` TypeScript, un alias de `type` TypeScript, un esquema Zod de runtime (con `z.infer` para el tipo estático) o un documento JSON Schema (para OpenAPI, AJV, contract testing). Todo se ejecuta en tu navegador; nada sale de tu dispositivo.
Cómo se usa
- Pega tu JSON en el panel izquierdo. La muestra por defecto es una respuesta típica de un pedido para que veas el generador funcionando al instante.
- Elige un formato de salida: interface (la del día a día), alias de type (para uniones o tipos mapeados), Zod (cuando necesitas validación en runtime) o JSON Schema (para specs de OpenAPI y contract testing).
- Define el nombre del tipo raíz (por defecto `Root`). Buenos nombres: `User`, `Order`, `ApiResponse`. El generador usa tu nombre para el tipo de nivel superior y deriva los nombres hijos a partir de las claves (p. ej. `customer` pasa a `Customer`).
- Activa `unknown` en lugar de `any` para tipos más seguros: los arrays vacíos se vuelven `unknown[]` en lugar de `any[]`; el sistema de tipos te obliga a estrechar antes de usar.
- Marcar opcional basado en null si tu API a veces envía `"phone": null`: el generador añade `phone?: string` en vez de `phone: string | null`. Desactívalo si quieres null explícito en el tipo.
- Convertir claves a camelCase si tu JSON usa snake_case (`created_at`) y tu código TS usa camelCase (`createdAt`). La clave original queda en un comentario para que recuerdes lo que vino por la red.
- Unificar formas similares cuando un array contiene objetos con campos algo distintos. Sin ello obtienes una unión verbosa; con ello obtienes una sola forma limpia con marcas `?` en las diferencias.
- Pulsa `Copiar` para llevarte el resultado al portapapeles o `Descargar` para guardarlo como archivo `.ts` (o `.json` para JSON Schema). Pégalo en tu proyecto y listo.
Cuándo te resulta útil
Cinco situaciones que te ahorran 10 minutos de tipeado manual:
- Conectar un endpoint nuevo de API. Llamas a `/api/orders` y te llega una respuesta JSON gorda. La pegas aquí y obtienes las interfaces `Order`, `Customer` y `Item` en tres segundos. Las metes en `types.ts` y tu código autocompleta cada campo correctamente.
- Migrar JavaScript sin tipos a TypeScript. El código antiguo lee archivos JSON y asume la forma. Pegas aquí un ejemplo, obtienes los tipos y los pegas al inicio del archivo: el compilador encuentra cada sitio que toca un campo que falta o es incorrecto.
- Construir un esquema Zod para un formulario. Conoces la forma que quieres (de un JSON de muestra) y necesitas validación en runtime. Cambia al modo Zod, obtén `z.object({...})` con los validadores primitivos correctos y mételo en tu librería de formularios (React Hook Form, Formik, TanStack Form).
- Escribir una spec OpenAPI a partir de una respuesta real. El backend ya devuelve JSON y necesitas describirlo en OpenAPI. Cambia al modo JSON Schema, obtén un documento Draft 2020-12 con `$defs` y pégalo en la sección de respuesta de tu endpoint. Hecho.
- Compartir un contrato con el equipo frontend. Tienes un payload JSON y necesitas decirle al otro lado qué esperar. Genera la interface, pégala en un mensaje de Slack o un doc, y ambos equipos tienen la misma fuente de verdad.
¿Trabajas a partir de una spec real? Usa OpenAPI a TypeScript para tipos completos de request/response o GraphQL a TypeScript para SDL.