Genere una interfaz TypeScript desde JSON
Pegue un objeto de muestra y obtenga una interfaz TypeScript lista: en el ejemplo, id pasa a number, tags a string[] y la clave display-name queda entre comillas, todo bajo el nombre UserRecord. Gratis en su navegador.
- Gratis
- Funciona en su navegador
- Sin registro
- Sus datos no salen de su equipo
Ejecutar — gratis
La herramienta analiza el ejemplo, comprueba que la raíz sea un objeto y produce una interfaz determinista para cadenas, números, booleanos, valores nulos, matrices y objetos anidados.
Cómo se deduce cada tipo
El generador mira cada valor de su muestra, no el nombre de las claves. Un texto pasa a string, cualquier número a number, verdadero o falso a su propio tipo de sí o no, y un valor vacío a null. Los objetos dentro de objetos se convierten en tipos anidados, y las listas se juzgan por todos sus elementos, no solo por el primero: una lista solo de textos da string[], y una mezclada, una unión como (string | number | null)[]. Las claves que no pueden escribirse tal cual, como display-name, se conservan entre comillas, y las propiedades mantienen el orden de la muestra original.
Errores típicos y cómo evitarlos
Una sola muestra no puede demostrar que un dato sea opcional, así que todas las propiedades se marcan como obligatorias; ajústelo a mano donde sus datos reales puedan omitir algo. Una lista vacía no aporta pistas y se convierte en unknown[], y un objeto vacío en Record<string, never>, por lo que conviene elegir una muestra con listas y objetos llenos. El texto debe ser de datos estrictos, no JavaScript: los nombres van entre comillas dobles, no se admiten comentarios ni comas finales y el nivel superior debe ser un objeto. Nunca se inventan fechas, valores fijos ni enumeraciones.
Parta de una muestra parecida a sus datos reales
Los objetos anidados se representan mediante tipos de objeto dentro de la interfaz raíz. Cada propiedad presente en la muestra se emite como obligatoria, ya que un único ejemplo no demuestra que un campo sea opcional. Para obtener un resultado útil, elija una muestra que incluya los campos y variantes que realmente recibe su aplicación.
También puede indicar un nombre raíz como <code>UserResponse</code>; debe ser un identificador TypeScript válido y no reservado. Si lo omite, se utiliza <code>RootObject</code>. Se rechazan escalares, valores nulos o matrices en la raíz.
Comprenda las matrices, los nulos y las estructuras anidadas
La inferencia de matrices considera todos los elementos de la muestra, no solo el primero. Una lista compuesta únicamente por cadenas se convierte en <code>string[]</code>, mientras que una lista mixta produce una unión estable como <code>(string | number | null)[]</code>. Una matriz vacía no aporta información sobre sus elementos, por lo que se representa como <code>unknown[]</code> en vez de inventar un tipo engañoso.
Los objetos dentro de matrices se expresan como tipos de objeto en línea y las matrices anidadas se recorren de forma recursiva. Los objetos vacíos pasan a <code>Record<string, never></code>, dejando constancia de que no se observaron campos conocidos. Las claves que no pueden escribirse como identificadores TypeScript normales, incluidas las que contienen espacios, signos o palabras reservadas, se emiten entre comillas.
El generador no inventa propiedades opcionales, fechas, literales, enumeraciones ni nombres de clase específicos.
Preguntas frecuentes
¿Qué entradas se aceptan?
Se rechazan matrices, escalares y valores nulos en la raíz.
¿Cómo se tipan las matrices vacías?
Se convierten en unknown[] porque una muestra vacía no aporta evidencia sobre el tipo de sus elementos.
¿Las propiedades se marcan como opcionales?
No. Las propiedades presentes son obligatorias. Revise varias cargas o un esquema autorizado para detectar campos opcionales.
¿Puedo elegir el nombre de la interfaz?
Sí. Escriba un nombre como UserRecord; debe ser un nombre válido de TypeScript que no sea una palabra reservada. Si lo deja vacío, la interfaz se llama RootObject, de modo que las repeticiones dan siempre el mismo texto.
¿Qué tipo recibe una lista con valores mezclados?
Se revisan todos los elementos, no solo el primero. Una lista solo de textos da string[], mientras que una mezcla produce una unión estable como (string | number | null)[], así que el resultado refleja exactamente lo que muestra la muestra.
Herramientas relacionadas
Para desarrolladores — acceso por API
Todo lo de esta página está disponible por programación. Esta sección es para equipos que quieren integrarlo en sus sistemas; el resto puede usar la herramienta de arriba sin más.
Endpoint de API
¿Prefiere automatizarlo? Un POST autenticado crea la tarea; el resultado llega por webhook o enlace firmado. La misma capacidad también se ejecuta aquí en la web, por email y desde Telegram — y pronto también desde nuestra app.
Llámela desde su stack
curl -X POST https://api.kit.forhosting.com/dev2/json-to-typescript-interface \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"json":"{\"id\":42,\"name\":\"Ada\",\"active\":true,\"tags\":[\"admin\",\"editor\"],\"profile\":{\"email\":\"ada@example.com\",\"score\":9.5}}"}'const res = await fetch("https://api.kit.forhosting.com/dev2/json-to-typescript-interface", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"json": "{\"id\":42,\"name\":\"Ada\",\"active\":true,\"tags\":[\"admin\",\"editor\"],\"profile\":{\"email\":\"ada@example.com\",\"score\":9.5}}"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/dev2/json-to-typescript-interface",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"json": "{\"id\":42,\"name\":\"Ada\",\"active\":true,\"tags\":[\"admin\",\"editor\"],\"profile\":{\"email\":\"ada@example.com\",\"score\":9.5}}"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/dev2/json-to-typescript-interface", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"json":"{\\"id\\":42,\\"name\\":\\"Ada\\",\\"active\\":true,\\"tags\\":[\\"admin\\",\\"editor\\"],\\"profile\\":{\\"email\\":\\"ada@example.com\\",\\"score\\":9.5}}"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"json":"{\"id\":42,\"name\":\"Ada\",\"active\":true,\"tags\":[\"admin\",\"editor\"],\"profile\":{\"email\":\"ada@example.com\",\"score\":9.5}}"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/dev2/json-to-typescript-interface", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Ejemplo de solicitud
{
"json": "{\"id\":42,\"name\":\"Ada\",\"active\":true,\"tags\":[\"admin\",\"editor\"],\"profile\":{\"email\":\"ada@example.com\",\"score\":9.5}}"
}Ejemplo de respuesta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "dev2.json_to_typescript_interface",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}La API es asíncrona: la llamada devuelve un task_id al instante y el resultado llega por webhook. El polling está limitado a 1 req/s por tarea.
Precio
Precio publicado — sin tokens ni créditos inventados. Una tarea fallida no se cobra.
Límites
max_chars | 1000000 |
max_depth | 64 |
Errores
| HTTP | Código | Significado |
|---|---|---|
401 | unauthorized | API key ausente o inválida. |
402 | insufficient_balance | El saldo no cubre el precio de la tarea. |
404 | unknown_type | El tipo de tarea no existe. |
429 | rate_limited | Demasiadas peticiones. Use el webhook en vez de sondear. |
Notas técnicas
Convierta un objeto JSON representativo en una interfaz TypeScript sin instalar un generador ni revisar manualmente cada valor anidado. También entrecomilla de forma segura las claves JSON inusuales y permite elegir el nombre de la interfaz raíz.
Comience con un objeto JSON representativo
Pegue un JSON válido cuyo valor raíz sea un objeto, por ejemplo una respuesta de API, un registro de configuración, una carga de webhook o un documento almacenado. El generador examina los valores y no los nombres de campo: una cadena se convierte en <code>string</code>, cualquier número JSON en <code>number</code>, un booleano en <code>boolean</code> y un valor nulo en <code>null</code>. La entrada debe ser texto JSON, no sintaxis de objeto JavaScript: las propiedades requieren comillas dobles y no se admiten comentarios ni comas finales.
Comprenda las matrices, los nulos y las estructuras anidadas
Así, la salida refleja fielmente la evidencia del JSON proporcionado. El orden de las propiedades sigue el JSON original, mientras que los miembros de una unión mantienen un orden determinista.
Revise la interfaz generada antes de usarla en producción
Compárela con varias cargas o con la documentación del proveedor antes de decidir si las propiedades deben ser opcionales, anulables, más estrictas o compartidas mediante interfaces con nombre. Si una muestra contiene null y otra una cadena, incorpore ese conocimiento al tipo que mantenga. La salida determinista facilita la revisión: la misma entrada y el mismo nombre siempre producen el mismo texto, sin red, modelos, azar ni fechas actuales. Considere la definición generada como una descripción precisa del ejemplo suministrado y un buen borrador para el código real, no como prueba del contrato completo de una API externa. Una marca temporal continúa siendo una cadena porque JSON no posee un tipo de fecha, y un entero continúa siendo <code>number</code> porque TypeScript no distingue enteros JSON durante la ejecución. El JSON inválido, la ausencia de texto, los nombres no válidos, el anidamiento excesivo y las raíces que no sean objetos devuelven <code>invalid_input</code>. La API parte de $0.002 por solicitud y el navegador aplica localmente la misma lógica pura.
Casos de integración
Tipar una respuesta de API desconocida
Cree una primera interfaz práctica a partir de una respuesta capturada y después ajuste los campos opcionales según la documentación.
Documentar cargas de webhooks
Convierta un evento representativo en TypeScript legible que puedan compartir el servicio receptor y sus pruebas.
Preparar fixtures e integraciones
Genere tipos anidados estables para configuración, registros importados o datos de prueba sin rastrear cada propiedad a mano.
Preguntas técnicas
¿Reconoce fechas o enumeraciones?
No. Las cadenas JSON siguen siendo string y no se infieren semántica de dominio ni restricciones enum a partir de una sola muestra.
¿Cuánto cuesta una solicitud de API?
Una solicitud de API parte de $0.002. El ejecutor del navegador utiliza la misma lógica determinista.