Convertidor de JSON a TypeScript
Genera interfaces de TypeScript a partir de una muestra JSON, con una interfaz por cada forma de objeto distinta, incluso dentro de matrices.
TypeScript generado
Cómo funciona
Esta herramienta infiere definiciones de interfaces de TypeScript a partir de una muestra JSON inspeccionando cada clave y valor, y luego genera declaraciones de interfaces exportables. Las matrices de objetos que repiten la misma estructura, como una lista de registros de API, generan una única interfaz compartida en lugar de un duplicado por elemento.
- Pegar JSON
Un objeto o una matriz de objetos, como una respuesta de API.
- Nombra la interfaz raíz
Los objetos anidados obtienen su propia interfaz, nombrada según el campo.
- Copiar el TypeScript
Se actualiza mientras escribes o cambias una opción.
Cómo se asignan nombres y coinciden las estructuras
Los objetos anidados generan una interfaz con nombre independiente. Por ejemplo, un campo llamado address que contiene city y zip se convierte en una interfaz Address, y la interfaz principal hace referencia a él como address: Address. Los nombres de las interfaces se derivan poniendo en mayúscula inicial el nombre del campo.
Cada forma de objeto se reduce a una firma compuesta por sus nombres de propiedad ordenados y sus tipos. Cuando dos objetos en cualquier parte del JSON comparten la misma firma, como cada elemento en una matriz de registros, reutilizan la misma interfaz en lugar de generar una nueva interfaz con forma idéntica y un sufijo numérico.
- Arreglos: se tipan como un arreglo del tipo de elemento, por ejemplo string[] o Tag[]. Un arreglo cuyos elementos tienen más de una forma distinta se convierte en una unión, por ejemplo (Cat | Dog)[].
- Propiedades opcionales: desactivadas por defecto, ya que la muestra presenta todas las claves como existentes. Activa "Todas las propiedades opcionales" cuando tus datos reales a veces omiten campos.
- Claves inusuales: un nombre de propiedad que no es un identificador válido, como uno que contiene un guion, se entrecomilla en la salida.
Una sola muestra no puede mostrar todos los casos
Al igual que cualquier inferencia de esquema a partir de un solo ejemplo, un campo que a veces es una cadena y a veces un número se tipa según el valor que aparezca en tu muestra, y los tipos de unión no se detectan automáticamente. Revisa la salida y agrega tipos de unión o tipos literales de cadena donde tus datos reales varíen. Todo se ejecuta en esta página: tu JSON, que puede contener nombres de campos internos o formas de API propietarias, nunca se envía a ningún lado.
Preguntas frecuentes
¿Cómo genero interfaces de TypeScript a partir de una respuesta de API JSON?
Pega el objeto o arreglo JSON en el campo de entrada, define el nombre de la interfaz raíz, que por defecto es Root, y las interfaces se regeneran mientras escribes. La herramienta inspecciona cada clave y valor, infiere el tipo de TypeScript (string, number, boolean, null, interfaz anidada o arreglo) y genera declaraciones de interfaz exportables listas para incorporar a tu proyecto de TypeScript.
¿El generador de TypeScript funciona sin conexión y sin enviar mis datos a ningún lado?
Sí. Todo el proceso se ejecuta en tu navegador con JavaScript. Tus datos JSON, que pueden contener nombres de campos internos, estructuras de datos o formatos de API propietarios, nunca se transmiten a ningún servidor. El código TypeScript de salida se genera y se muestra localmente.
¿Cómo maneja esta herramienta los objetos JSON anidados y los arreglos?
Los objetos anidados generan una interfaz con nombre independiente. Por ejemplo, un campo llamado address que contiene city y zip se convierte en una interfaz Address, y la interfaz principal hace referencia a ella como address: Address. Los arreglos se tipan como arreglos del tipo de elemento, por ejemplo string[] o Tag[]. Un arreglo de objetos que comparten la misma estructura produce una única interfaz que se reutiliza para cada elemento, en lugar de crear una interfaz separada por ítem.
¿Cuándo debo usar propiedades opcionales en la interfaz de TypeScript generada?
Activa "Todas las propiedades opcionales" cuando algunos campos del JSON puedan estar ausentes en ciertos objetos. Esto agrega un signo de interrogación después del nombre de cada propiedad, por ejemplo email?: string, lo que permite que TypeScript acepte objetos que omiten esos campos. De forma predeterminada, todas las propiedades inferidas son obligatorias. Si estás modelando una API con parámetros de consulta opcionales o campos anulables, las propiedades opcionales evitan errores de tipo.
¿Cuál es una limitación importante de inferir tipos de TypeScript a partir de una sola muestra JSON?
Al igual que con cualquier inferencia de esquema a partir de un solo ejemplo, el generador solo puede detectar lo que está presente en la muestra. Un campo que a veces es cadena y a veces número se tipifica según el valor que aparezca en la muestra. Los tipos de unión como string | number | null no se generan automáticamente. Revisa el resultado con atención y agrega tipos de unión, genéricos o tipos literales de cadena más específicos donde tus datos reales varíen.