JSON a interfaces de TypeScript

Genera interfaces o alias de tipo de TypeScript a partir de un ejemplo JSON, con claves opcionales, uniones con null y tipos anidados inferidos de arrays. Gratis y privado.

Las claves que faltan en algunos elementos del array pasan a ser opcionales (?), los null se convierten en "| null" y los valores que solo son null en unknown.

Se ejecuta completamente en tu navegador. Tus datos nunca se suben.

Herramientas Relacionadas

Ver Todas

¿Qué es JSON a TypeScript?

Pega una respuesta de API o un ejemplo de configuración y obtén declaraciones interface (o type) de TypeScript listas para usar. Los objetos anidados se convierten en tipos exportados independientes, las claves que faltan en algunos elementos de un array pasan a ser opcionales y los valores null se convierten en tipos unión.

Cómo usar JSON a TypeScript

  1. Pega un ejemplo JSON en Entrada JSON (o haz clic en Cargar ejemplo / Abrir archivo).
  2. Fija el Nombre del tipo raíz (por defecto Root).
  3. Elige el Estilo de salida: interface o alias type.
  4. Copia el código TypeScript generado o haz clic en Descargar para guardarlo como archivo.

Ejemplo

Entrada
{"id":1,"name":"A","tags":["x"]}
Salida
export interface Root {
  id: number;
  name: string;
  tags: string[];
}

Cuándo usar JSON a TypeScript

Úsalo para tipar rápidamente respuestas de fetch, fixtures o archivos de configuración. Un solo ejemplo no puede revelar todos los casos: los enums de cadenas, las uniones de formas de objeto o las fechas quedan como string simple o tipos fusionados, así que revisa el resultado y afínalo, o usa un generador basado en JSON Schema para contratos.

Cómo funciona JSON a TypeScript

El ejemplo se recorre de forma recursiva y cada posición acumula los tipos que ha visto. Los arrays de objetos se fusionan en un solo tipo: una clave que falta en algunos elementos pasa a ser opcional, una clave que es null en algún sitio pasa a ser anulable, los enteros mezclados con decimales se convierten en un tipo de coma flotante y cualquier otra mezcla de tipos recurre a un tipo dinámico. Los objetos anidados se convierten en tipos con nombre propio (PascalCase de la clave, claves de array en singular: orders → Order), con sufijos numéricos si los nombres coinciden. La salida TypeScript convierte enteros y decimales en number, cadenas en string, booleanos en boolean, arrays en T[], valores anulables en T | null y valores dinámicos en unknown. Las claves que no son identificadores válidos se entrecomillan ("first-name": string).

Casos de Uso Comunes

  • Tipar la respuesta de una API REST antes de escribir un cliente
  • Crear interfaces para un archivo de configuración JSON
  • Convertir fixtures de prueba en objetos tipados
  • Preparar tipos para el payload de un webhook de terceros

Preguntas Frecuentes

¿Por qué una propiedad tiene el tipo unknown?

Su valor era null en todos los ejemplos (o los arrays estaban vacíos), así que no se pudo inferir un tipo real. Añade un ejemplo con un valor real o edita el tipo a mano.

¿Cómo se detectan las propiedades opcionales?

Cuando el valor de nivel superior o una clave anidada es un array de objetos, una clave presente solo en algunos de ellos se marca con ?.

¿Genera validación en tiempo de ejecución?

No, solo emite declaraciones de tipos, que desaparecen al compilar. Usa un validador, como JSON Schema, si necesitas comprobaciones en tiempo de ejecución.

Siguientes pasos recomendados

Explora más categorías