Generador de TypeScript desde JSON

Pegá tu JSON y obtené interface o type de TypeScript listos para copiar. Todo se procesa en tu navegador: tus datos nunca salen de tu máquina.

Se genera automáticamente al detectar cambios válidos en el JSON.

⚙

Opciones de Generación

¿Cómo funciona?

Esta herramienta analiza la estructura de tu JSON y genera declaraciones de TypeScript. Para cada objeto anidado crea un tipo con nombre propio, infiere primitivos (string, number, boolean), detecta arrays y mergea objetos cuando un array contiene múltiples elementos.

Detección Inteligente

Fechas ISO se tipan como Date | string, los null se convierten en uniones opcionales y los arrays vacíos usan unknown[].

Campos Opcionales

Si una key no aparece en todos los objetos de un array, se marca automáticamente como opcional con ?.

Sin Dependencias

No se envía nada al servidor. El parser, el generador de tipos y el resaltado de sintaxis corren enteramente en tu navegador.

Ejemplo de uso

Si pegás este JSON: 

{
  "id": 1,
  "name": "Devcito Utils",
  "isActive": true,
  "launchedAt": "2024-01-15T10:30:00Z",
  "tools": [
    { "id": "base64", "title": "Base64", "isNew": false },
    { "id": "json-to-ts", "title": "JSON to TypeScript", "isNew": true, "docsUrl": "https://devcito.org" }
  ]
}

La herramienta genera: 

interface Root {
  id: number;
  name: string;
  isActive: boolean;
  launchedAt: Date | string;
  tools: Tool[];
}

interface Tool {
  id: string;
  title: string;
  isNew: boolean;
  docsUrl?: string;
}

Ventajas

  • 100% Privado: el JSON se parsea localmente, sin backend ni API externa.
  • Opciones flexibles: elegí entre interface o type, con o sin export.
  • Resaltado de sintaxis: el código TypeScript resultante se muestra con colores para leerlo más rápido.
  • Ejemplo incluido: cargá un JSON de muestra con un clic para probar la herramienta.
  • Manejo de arrays heterogéneos: mergea objetos de un array y detecta campos faltantes.

Tip Pro: si tenés un endpoint que devuelve JSON y querés tipar la respuesta, pegá el payload en el input, ajustá el nombre raíz al modelo (por ejemplo, User o ApiResponse) y copiá el TypeScript directamente en tu proyecto.