Generador de interfaces TypeScript desde JSON online

Qué hace

El generador de JSON a TypeScript lee un ejemplo JSON, como una respuesta de API o un archivo de configuración, y escribe interfaces de TypeScript que lo describen. En lugar de escribir cada campo a mano, pegas una respuesta real y obtienes tipos listos para tu código, para resultados de fetch, estado de Redux o datos de prueba.

El generador revisa cada valor, no solo el primero. Los números se convierten en number, el texto en string, los objetos anidados tienen sus propias interfaces y los elementos de un array se combinan, de modo que un campo que solo aparece en algunos elementos se marca como opcional y uno que a veces es null se tipa como anulable.

Cómo se usa

Pega JSON en la entrada, sube un archivo .json o haz clic en Ejemplo.
Define el nombre del tipo raíz y elige el estilo: interface o type, null como | null o como campos opcionales, propiedades readonly y si cada declaración lleva export.
Copia el TypeScript o descárgalo como archivo .ts.

El JSON no válido se indica con la línea y la columna del problema, para que puedas corregir el ejemplo al momento.

Ejemplo

Este JSON:

{ "id": 7, "name": "Ada", "tags": ["admin"], "manager": { "id": 1, "email": null } }

se convierte en estas declaraciones:

export interface Root {
  id: number;
  name: string;
  tags: string[];
  manager: Manager;
}

export interface Manager {
  id: number;
  email: null;
}

Consejos

Un solo ejemplo solo muestra lo que contiene. Si un campo puede ser texto o null, incluye un caso de cada uno o mete varios ejemplos en un array para que se combinen.
Los nombres de campo que no son identificadores válidos, como first-name, se escriben entre comillas, así que el resultado siempre compila.
El resultado es un punto de partida. Restringe los campos de texto a uniones de literales o a Date cuando sepas más que el ejemplo.
¿Necesitas Go? El convertidor de JSON a Go usa la misma inferencia para escribir structs con etiquetas json.

Preguntas frecuentes

› ¿Cómo se tratan los objetos anidados?

Cada objeto anidado se convierte en su propia interfaz con nombre, tomado de su clave en PascalCase, así que un campo address produce una interfaz Address. Los objetos con exactamente la misma estructura comparten una interfaz, y los nombres que chocan reciben un número, como Address2.

› ¿Cómo se tipan los arrays?

Todos los elementos de un array se combinan en un único tipo de elemento. Un array de objetos se convierte en un array de una interfaz con el nombre en singular de la clave, así que orders da Order[]. Los arrays mixtos se convierten en una unión como (string | number)[] y los arrays vacíos en unknown[].

› ¿Cuándo se marca un campo como opcional?

Cuando falta en algunos de los objetos de un array. Un campo que está en todos pero a veces es null se escribe por defecto como T | null; cambia los valores null a opcional para quitar el null y marcar el campo como opcional con un signo de interrogación.

› ¿Debo elegir interface o type?

Ambos describen las mismas formas de objeto. Las interfaces se pueden extender y fusionar, y muchas guías de estilo las prefieren para tipos de objeto. Los alias de tipo son prácticos si piensas combinar el resultado con uniones o tipos mapeados. Elige lo que use tu proyecto.

› ¿Se envía mi JSON a un servidor?

No. Los tipos se infieren en tu navegador, así que puedes pegar respuestas reales de una API sin riesgo.