JSON a TypeScript

¿Qué es la conversión de JSON a TypeScript?

Pega un payload JSON y obtendrás interfaces TypeScript — contratos tipados que describen exactamente qué propiedades tiene un objeto y qué tipo tiene cada una. Sin ellas, los datos de JSON.parse() llegan como any, sin asistencia del editor ni comprobaciones del compilador sobre el acceso a propiedades o las asignaciones. Convertir JSON a TypeScript te da esa seguridad sin tener que escribir las interfaces a mano.

TypeScript cubre los seis tipos de valor JSON: string, number, boolean, null, object y array. Cada objeto JSON anidado se convierte en su propia interfaz con nombre. Los arrays se tipan a partir de su primer elemento. El resultado coincide con lo que JSON.parse() devuelve realmente en tiempo de ejecución, por lo que las interfaces reflejan datos reales en lugar de suposiciones.

Escribir interfaces a mano para JSON grande o muy anidado es tedioso y propenso a errores. Un generador de JSON a TypeScript lee la estructura automáticamente, gestiona el anidamiento de forma recursiva y produce código de interfaz limpio en segundos. Es especialmente útil al conectar una API desconocida, hacer prototipos con datos de prueba o migrar una base de código JavaScript a TypeScript. También te libera de rastrear nombres de propiedades y tipos anidados a mano, para que puedas centrarte en la lógica de la aplicación en lugar de en el boilerplate de tipos.

¿Por qué usar un generador de JSON a TypeScript?

Generar interfaces TypeScript a mano es práctico para objetos pequeños, pero se vuelve inmanejable rápidamente con estructuras anidadas o respuestas de API grandes. Imagina una respuesta de API con 50 campos y tres niveles de anidamiento — escribirlo a mano implica docenas de interfaces, cada una fuente potencial de erratas o campos anulables omitidos. Un generador automático produce el conjunto completo en milisegundos y reduce la probabilidad de discrepancias de tipos entre tu código y los datos que consume. Más allá de la precisión, mantiene tus tipos sincronizados con el contrato real de la API. Cuando un servicio cambia la forma de su respuesta, basta con pegar el JSON actualizado y regenerar — mucho más rápido que buscar cada propiedad que cambió en un archivo de interfaces escrito a mano.

Casos de uso de JSON a TypeScript

Referencia de mapeo de tipos JSON a TypeScript

Cada valor JSON se mapea a un tipo TypeScript. La tabla siguiente muestra cómo se traduce cada tipo primitivo y estructural de JSON. Este mapeo sigue el estándar JSON ECMA-404 y los tipos integrados de TypeScript.

interface vs type alias en TypeScript

TypeScript ofrece dos formas de describir la forma de un objeto: declaraciones interface y aliases type. Ambas sirven para representar estructuras JSON, pero difieren en el comportamiento de extensión y fusión. La mayoría de los generadores de JSON a TypeScript producen interfaces porque son la opción idiomática para formas de objetos en TypeScript.

Ejemplos de código

A continuación se muestran ejemplos de generación de interfaces TypeScript desde JSON en distintos lenguajes y herramientas. Cada fragmento produce salida ejecutable.

// Manual interface definition from a JSON shape
const json = '{"id": 1, "name": "Alice", "active": true}';
const parsed = JSON.parse(json);

interface User {
  id: number;
  name: string;
  active: boolean;
}

const user: User = parsed;
console.log(user.name); // "Alice" — fully typed

import JsonToTS from 'json-to-ts';

const json = {
  id: 1,
  name: "Alice",
  address: { street: "123 Main St", city: "Springfield" },
  tags: ["admin", "user"]
};

const interfaces = JsonToTS(json, { rootName: "User" });
console.log(interfaces.join("\n\n"));
// interface Address {
//   street: string;
//   city: string;
// }
//
// interface User {
//   id: number;
//   name: string;
//   address: Address;
//   tags: string[];
// }

# Install: pip install datamodel-code-generator
# Generate TypeScript-style types from JSON using Pydantic models

# Command line:
# datamodel-codegen --input data.json --output model.py

# Or generate TypeScript directly with quicktype:
# pip install quicktype
# quicktype --lang ts --src data.json --out types.ts

import json

data = {"id": 1, "name": "Alice", "scores": [98, 85, 92]}

# Python equivalent using TypedDict (Python 3.8+)
from typing import TypedDict, List

class User(TypedDict):
    id: int
    name: str
    scores: List[int]

user: User = data  # type-checked by mypy

# Install quicktype globally
npm install -g quicktype

# Generate TypeScript interfaces from a JSON file
quicktype --lang ts --src data.json --out types.ts

# From a JSON string via stdin
echo '{"id": 1, "name": "Alice"}' | quicktype --lang ts

# Output:
# export interface Root {
#   id:   number;
#   name: string;
# }

Preguntas frecuentes