Cómo generar TypeScript desde JSON
- Pega un ejemplo de JSON. Cuantos más elementos tengan sus arrays, mejor se detectan los campos opcionales y las uniones.
- Indica el nombre del tipo raíz y elige
interfaceotype, con o sinexportyreadonly. - Copia el código TypeScript en tu proyecto o descárgalo como archivo
.ts.
Cómo se deducen los tipos de TypeScript a partir del JSON
| JSON | TypeScript |
|---|---|
"Ada" | string |
42, 3.14 | number |
true | boolean |
null junto a otros valores | una unión como string | null |
"address": {"city": "Paris"} | una interface Address independiente |
"users": [{"id": 1}] | User[]: el nombre del elemento se pasa a singular |
| una clave que falta en algunos elementos del array | una propiedad opcional key?: |
[1, "a"] | (string | number)[] |
[] | unknown[] |
{} | Record<string, unknown> |
Ejemplo: de JSON a interfaz TypeScript
El JSON {"id": 1, "name": "Ada", "tags": ["admin"], "manager": null} se convierte en:
export interface Root { id: number; name: string; tags: string[]; manager: null; }
Cambia Root por un nombre significativo, como User o ApiResponse. Los objetos anidados con exactamente la misma forma (por ejemplo, una dirección de facturación y otra de envío) comparten una interfaz, y las claves que no son identificadores válidos se ponen entre comillas, p. ej. "first-name": string.
Preguntas frecuentes
¿Interface o type? ¿Cuál debo elegir?
Para describir la forma de un objeto, ambos se comportan igual. Las interfaces se pueden extender y fusionar, mientras que los alias de tipo también pueden describir uniones. Muchos equipos usan interfaces para los objetos; sigue el estilo de tu código.
¿Cómo se detectan los campos opcionales?
Los objetos de un mismo array se combinan. Una clave que falta en algunos de ellos pasa a ser opcional (key?:), y una clave con valores de distintos tipos se convierte en una unión.
¿Esto valida los datos en tiempo de ejecución?
No. Los tipos de TypeScript desaparecen cuando se ejecuta el código. Para comprobar los datos entrantes, genera un JSON Schema a partir del mismo ejemplo con nuestro generador de JSON Schema y valídalos con una librería de schemas.
¿Se envía mi JSON a un servidor?
No. Los tipos se generan en tu navegador, así que puedes pegar sin problema respuestas privadas de una API.