JSON a TypeScript
Pega un objeto JSON o una respuesta de API y obtén interfaces o alias de tipo de TypeScript listos para usar, con tipos anidados bien nombrados y campos opcionales deducidos de tus datos. La conversión se realiza por completo en tu navegador.
Última actualización:
Tu JSON se analiza localmente en esta pestaña y nunca se sube. Consejo: Ctrl + Intro genera el resultado.
Cómo usar JSON a TypeScript
- Pega tu JSON (un objeto, un array o una respuesta de API) en el cuadro de la izquierda, o abre un archivo .json.
- Ponle nombre al tipo raíz, por ejemplo User o ApiResponse.
- Elige las opciones: interfaz o alias de tipo, export, readonly, propiedades opcionales y estilo de array.
- Pulsa Generar TypeScript. Con Actualización en directo activada, el resultado cambia mientras escribes.
- Copia o descarga el archivo .ts e importa los tipos en tu proyecto.
Ejemplo: de JSON a interfaces
Con esta respuesta, en la que la segunda publicación tiene un campo adicional y la primera no:
{ "id": 1, "name": "Ada", "deletedAt": null,
"posts": [ { "id": 1, "title": "Hello" },
{ "id": 2, "title": "Draft", "cover": "a.png" } ] }el generador produce:
export interface Root {
id: number;
name: string;
deletedAt: null;
posts: Post[];
}
export interface Post {
id: number;
title: string;
cover?: string;
}Cómo se corresponden los valores JSON con TypeScript
| Valor JSON | Tipo TypeScript |
|---|---|
"text" | string |
42, 3.14, -1e3 | number (TypeScript no tiene un tipo entero aparte) |
true / false | boolean |
null | null, o T | null cuando otras muestras tienen un valor |
{ … } | Una interfaz o un tipo con nombre |
["a", "b"] | string[] |
[1, "two", null] | (number | string | null)[] |
[] | unknown[] |
| Clave que falta en algunos elementos del array | Propiedad opcional key?: T |
Consejos para obtener tipos precisos
- Usa muestras reales y variadas. Los tipos se deducen de los datos que pegas. Incluye un array con varios elementos para que aparezcan los campos opcionales y los null.
- Las fechas siguen siendo cadenas. JSON no tiene tipo de fecha, así que las marcas de tiempo ISO se tipan como
string. Conviértelas connew Date()después del análisis. - Acota a mano las uniones de cadenas. Un campo como
"status": "active"se tipa comostring; cámbialo a'active' | 'banned'si conoces los valores posibles. - Valida en tiempo de ejecución. Los tipos de TypeScript desaparecen tras la compilación. Para datos de API no fiables, añade también validación en tiempo de ejecución (por ejemplo, con una biblioteca de esquemas).
¿Necesitas ordenar primero el JSON? Usa el formateador de JSON o explóralo en el visor de JSON.
Preguntas frecuentes
¿Cómo se detectan las propiedades opcionales?
Cuando un array contiene varios objetos, el convertidor los fusiona en un único tipo. Una clave presente solo en algunos de los elementos se marca como opcional con ?, porque tus datos muestran que puede faltar. Con un único objeto de ejemplo, todas las claves son obligatorias salvo que marques Todas las propiedades opcionales.
¿Cómo se tipan los valores null?
Un valor null añade null al tipo de la propiedad. Si otras muestras de la misma propiedad tienen un valor, obtienes una unión como string | null; si la propiedad siempre es null, su tipo es simplemente null, y quizá quieras sustituirlo a mano por el tipo real.
¿Interfaz o alias de tipo: cuál debo usar?
Ambos describen igual de bien la forma de los objetos. Las interfaces se pueden extender y fusionar y dan mensajes de error algo más claros; los alias de tipo son necesarios para uniones y tipos mapeados. Muchas guías de estilo usan interfaces para la forma de los objetos, que es la opción por defecto aquí.
¿Cómo se nombran los tipos anidados?
Cada objeto anidado recibe un nombre en PascalCase a partir de su clave: profile pasa a ser Profile, las claves al estilo avatar_url pasan a ser AvatarUrl, y las claves de arrays se ponen en singular, así que posts pasa a ser Post y categories pasa a ser Category. Los nombres que coinciden reciben un número, y los objetos con exactamente la misma forma comparten un tipo.
¿Qué pasa con los arrays y objetos vacíos?
Un array vacío se convierte en unknown[] porque no hay ningún elemento del que aprender, y un objeto vacío se convierte en una interfaz vacía. Añade un elemento de ejemplo o edita el tipo después.
¿Se admiten claves con guiones o espacios?
Sí. Las claves que no son identificadores válidos de JavaScript, como email-notifications o 2fa, se escriben entre comillas, por ejemplo "email-notifications": boolean.
¿Se sube mi JSON?
No. El análisis y la generación de tipos son JavaScript puro que se ejecuta en esta página, así que las respuestas de API con datos personales o secretos se quedan en tu dispositivo.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.
Herramientas relacionadas
Ver todas las de Conversores de datos y formatos de archivo →