MyDevTools
ES

Convertidor JSON a TypeScript

Genera interfaces o type aliases de TypeScript a partir de un JSON de ejemplo: tipos anidados, elementos de array fusionados, campos opcionales y export.

Tus datos de entrada y archivos no salen del navegador

Entrada JSON

Pegue un ejemplo de JSON: las interfaces de TypeScript se generan mientras escribe.

En el editor, Tab inserta sangría. Pulsa Esc y luego Tab para salir del editor.

Salida TypeScript

Las interfaces TypeScript aparecerán aquí...

En esta página

Pega un JSON de ejemplo —una respuesta de API, un archivo de configuración, un fixture de pruebas— y obtén sus declaraciones de TypeScript mientras escribes. Los objetos anidados se convierten en interfaces con nombre propio, así que la salida puede ir directamente a un archivo .ts.

Funcionalidad detallada

Los tipos se infieren de los valores: string, number, boolean, null, arrays como T[], arrays mixtos como uniones del tipo (number | string | null)[] y un array vacío como unknown[]. Cada objeto anidado recibe una interfaz con el nombre de su ruta en PascalCase (shipping_address dentro de Order → OrderShippingAddress). Todos los objetos de un array se fusionan en un único tipo de elemento: una clave que falta en algunos elementos pasa a ser opcional, y una clave con tipos de valor distintos recibe una unión.

Opciones: Nombre raíz fija el nombre del tipo de nivel superior (por defecto Root); Palabra clave export añade export a cada declaración; Campos opcionales (?), activada por defecto, marca como opcionales las claves cuyo valor es null; Usar type alias escribe type X = { … }; en lugar de interface X { … }. Un array raíz produce un alias como export type Users = UsersItem[];. Las claves que no son identificadores válidos se entrecomillan ("order-id": string;), y los nombres de tipo que colisionan reciben un sufijo numérico.

La salida se regenera con cada edición (tras una breve pausa) y al pulsar Convertir o Ctrl+Enter; si el JSON no es válido, se muestra el error del parser. El resultado aparece en un editor de solo lectura que puedes Copiar o guardar con Descargar .ts como types.ts. Todo se ejecuta en local: el ejemplo nunca se sube ni se guarda.

Ejemplos prácticos

Objeto de API: {"id":7,"user_name":"ann","tags":["a"],"manager":null} con Nombre raíz User y la palabra clave export da export interface User { id: number; user_name: string; tags: string[]; manager?: null; }.

Array de objetos distintos: [{"id":1,"email":"[email protected]"},{"id":2,"phone":"555"}] con Nombre raíz Users da export interface UsersItem { id: number; email?: string; phone?: string; } y export type Users = UsersItem[];.

Type aliases y claves entrecomilladas: {"order-id":"A1","items":[{"sku":"x","qty":2}],"shipping_address":{"city":"Omsk"}} con Nombre raíz Order y Usar type alias da type OrderItemsItem = { sku: string; qty: number; };, type OrderShippingAddress = { city: string; }; y type Order = { "order-id": string; items: OrderItemsItem[]; shipping_address: OrderShippingAddress; };.

Cómo usar esta herramienta

  1. Pega tu JSON

    Introduce un JSON de ejemplo en el editor Entrada JSON. La Salida TypeScript se actualiza automáticamente.

  2. Ajusta las opciones

    Define el Nombre raíz y activa o desactiva Palabra clave export, Campos opcionales (?) y Usar type alias según necesites.

  3. Llévate los tipos

    Haz clic en Copiar para copiar las declaraciones o en Descargar .ts para guardarlas como types.ts.

Consejos y mejores prácticas

  • Un ejemplo solo refleja los valores que contiene: un campo que es null en el ejemplo se tipa como null, así que sustitúyelo a mano por el tipo real (por ejemplo string | null).
  • Incluye varios elementos de array con distintos campos opcionales para que el tipo de elemento salga correcto.
  • Todos los números pasan a ser number, y las fechas en formato ISO siguen siendo string.
  • Desactiva Campos opcionales (?) si los valores null siempre se envían explícitamente y quieres manager: null como clave obligatoria.
  • Los nombres de las propiedades conservan su escritura original; solo los nombres de tipo se convierten a PascalCase.