Como convierto JSON a una interfaz TypeScript?

Pega un JSON, nombra la raiz y copia las interfaces. La conversion corre en el navegador. Los objetos anidados se vuelven interfaces con nombre, los arrays se tipan con todos los elementos y las claves que faltan en algunos items se marcan opcionales con ?.

Que diferencia hay entre opcional (?) y anulable (| null)?

Opcional significa que la clave faltaba en algunos items del array. Anulable significa que la clave estaba y el valor era JSON null. email?: string permite omitir el campo. note: string | null exige la clave. Este convertidor no los junta en email?: string | null salvo que el ejemplo muestre ambas cosas.

Debo emitir interface o type alias?

Usa interface para formas de objeto que quizas extiendas o fusionas entre archivos. Usa type alias para uniones, intersecciones y mapped types. Para una respuesta API tipica vale cualquiera; esta pagina usa interface por defecto porque es el estilo TypeScript habitual para modelos JSON.

Por que un campo es unknown[] o Record ?

Un array vacio no tiene elementos que inspeccionar, el fallback es unknown[]. Un objeto vacio no tiene claves, el fallback es Record . Pega un ejemplo con datos para un tipo concreto o una interfaz anidada.

Esto reemplaza a quicktype?

No. quicktype.io cubre codegen multilenguaje y validadores en runtime. Esta pagina es un convertidor privado JSON a interfaz TypeScript para un payload pegado: sin instalar, sin cuenta, y con un informe que separa claves opcionales de JSON null.

No. El parseo y la inferencia solo ocurren en tu navegador. Seguro para respuestas internas, tokens y PII. Comprueba en DevTools Network: convertir no envia ninguna peticion.

Puedo generar tipos desde un array JSON?

Si, y deberias cuando las claves varian. Un array de registros se fusiona en una interfaz. Las claves ausentes se vuelven opcionales. Si nombras la raiz Users, la salida es interface User mas type Users = User[]. Si la llamas User, tipa el payload como User[].

Herramientas para desarrolladores

Convertidor de JSON a interfaz TypeScript

Genera interfaces TypeScript desde un JSON en tu navegador: sin cuenta, sin subida, sin CLI de codegen.

Probar un ejemplo

JSON de ejemplo

La conversion se ejecuta en tu navegador. El JSON no sale de este dispositivo.

Nombre raiz

Nombre PascalCase de la interfaz superior. Un array JSON llamado Users emite User mas type Users = User[].

Emitir como

interface es la forma habitual de una respuesta API y admite declaration merging. type alias encaja con uniones y mapped types.

Interfaces

Claves opcionales

Claves anulables

Uniones

? significa que la clave faltaba en algunos elementos del array. | null significa que el ejemplo tenia JSON null. No son lo mismo.

Notas de inferencia

La raiz JSON es un array. Tipa el payload como Root[] (o el alias de lista si usaste un nombre plural).

User.lastLogin solo aparecio como null. Anade un valor real en el ejemplo para inferir el tipo no nulo.

Informe de propiedades inferidas
Interfaz	Clave	Tipo	Marcas
Address	city	string	requerida
Address	postcode	string	opcional ?
User	id	number	requerida
User	name	string	requerida
User	role	string	requerida
User	email	string	opcional ?
User	address	Address	requerida
User	lastLogin	null	opcional ? \| null
User	tags	string[]	opcional ?

TypeScript

export interface Address {
  city: string;
  postcode?: string;
}

export interface User {
  id: number;
  name: string;
  role: string;
  /** Email string */
  email?: string;
  address: Address;
  lastLogin?: null;
  tags?: string[];
}

Acerca de Convertidor de JSON a interfaz TypeScript

Genera interfaces TypeScript desde un JSON en tu navegador: sin cuenta, sin subida, sin CLI de codegen. Pega una respuesta de API o, mejor, un array de registros. Los objetos anidados se convierten en interfaces con nombre, los arrays se tipan con todos los elementos (no solo el primero) y las formas identicas se deduplican. El analizador no mezcla claves ausentes y JSON null: una clave omitida en algunos items es opcional (`?`); una clave presente pero null es `T | null`. Copia el resultado a un `.ts` o descargalo. Combinalo con el Minificador JSON si el payload llego minificado, o con el JSONPath Tester para inspeccionar un campo antes.

Cómo usar Convertidor de JSON a interfaz TypeScript

Pega JSON (un array de registros infiere mejor las claves opcionales que un solo objeto). Carga un ejemplo si quieres ver opcional vs anulable.
Pon el nombre raiz (User, Order, ApiResponse). Elige interface (por defecto) o type alias.
Lee el informe: numero de declaraciones, claves opcionales, claves anulables y uniones. Los avisos marcan arrays vacios, objetos vacios, campos solo-null y claves entre comillas.
Copia el TypeScript o descarga un .ts. Dejalo en types/ y anota fetch / TanStack Query con el nombre raiz.
Nada se envia a un servidor. Un JSON invalido indica linea y columna.

Ejemplos de Convertidor de JSON a interfaz TypeScript

Clave opcional desde un array de registros

[{"sku":"A1","qty":2},{"sku":"B7","qty":1,"gift":true}] produce Order con gift?: boolean. Es opcional porque el primer item la omitio, no porque el valor fuera null.

Anulable vs opcional

Dos usuarios donde email falta en una fila y note es null en la otra emiten email?: string y note: string | null. Claves ausentes y JSON null se mantienen distintas; la mayoria de convertidores las mezclan.

Interfaces anidadas con nombre

{"user":{"address":{"city":"London"}}} emite Address, luego User, luego Root. Los objetos anidados se nombran en PascalCase desde su clave para poder importar Address solo.

Claves entre comillas y contenedores vacios

{"content-type":"application/json","items":[],"meta":{}} cita content-type, tipa items como unknown[] y meta como Record<string, unknown>. Los avisos piden un ejemplo mas rico.

interface vs type alias

Deja interface para formas de respuesta API (declaration merging, errores un poco mejores). Pasa a type alias si el archivo tendra uniones o mapped types. En runtime es identico.

Casos de uso comunes

Tipar respuestas de fetch() o axios en React, Vue o Next.js
Generar genericos de TanStack Query / SWR desde un payload real
Convertir un webhook (Stripe, GitHub, Slack) en un evento tipado
Crear tipos para un fixture antes de que exista OpenAPI
Pasar un JSON de configuracion a TypeScript con autocompletado

Preguntas frecuentes sobre Convertidor de JSON a interfaz TypeScript

Como convierto JSON a una interfaz TypeScript?: Pega un JSON, nombra la raiz y copia las interfaces. La conversion corre en el navegador. Los objetos anidados se vuelven interfaces con nombre, los arrays se tipan con todos los elementos y las claves que faltan en algunos items se marcan opcionales con ?.
Que diferencia hay entre opcional (?) y anulable (| null)?: Opcional significa que la clave faltaba en algunos items del array. Anulable significa que la clave estaba y el valor era JSON null. email?: string permite omitir el campo. note: string | null exige la clave. Este convertidor no los junta en email?: string | null salvo que el ejemplo muestre ambas cosas.
Debo emitir interface o type alias?: Usa interface para formas de objeto que quizas extiendas o fusionas entre archivos. Usa type alias para uniones, intersecciones y mapped types. Para una respuesta API tipica vale cualquiera; esta pagina usa interface por defecto porque es el estilo TypeScript habitual para modelos JSON.
Por que un campo es unknown[] o Record<string, unknown>?: Un array vacio no tiene elementos que inspeccionar, el fallback es unknown[]. Un objeto vacio no tiene claves, el fallback es Record<string, unknown>. Pega un ejemplo con datos para un tipo concreto o una interfaz anidada.
Esto reemplaza a quicktype?: No. quicktype.io cubre codegen multilenguaje y validadores en runtime. Esta pagina es un convertidor privado JSON a interfaz TypeScript para un payload pegado: sin instalar, sin cuenta, y con un informe que separa claves opcionales de JSON null.
Se sube mi JSON?: No. El parseo y la inferencia solo ocurren en tu navegador. Seguro para respuestas internas, tokens y PII. Comprueba en DevTools Network: convertir no envia ninguna peticion.
Puedo generar tipos desde un array JSON?: Si, y deberias cuando las claves varian. Un array de registros se fusiona en una interfaz. Las claves ausentes se vuelven opcionales. Si nombras la raiz Users, la salida es interface User mas type Users = User[]. Si la llamas User, tipa el payload como User[].

Minificador y formateador de JSON

Minificador y formateador de JSON online gratis. Minifica JSON para reducir payloads o embellece (pretty-print) JSON con sangría de 2 espacios. Valida mientras escribes: no hace falta subir archivos.

Probador JSONPath

Prueba JSONPath online en tu navegador. Extrae un campo de JSON, prueba un filtro y copia rutas normalizadas - no se sube nada.

Generador de JSON Schema

Generador de JSON Schema gratis en tu navegador. Pega JSON de muestra, infiere tipos y formatos, y copia un schema Draft-07 o 2020-12. Nada se sube.

Conversor JSON a CSV

Convierte JSON a CSV y CSV a JSON en el navegador. Aplana objetos anidados, desaplana claves con punto al volver, NDJSON, preset Excel UE, RFC 4180. Sin subidas.