JSON to TypeScript
Understand JSON to TypeScript
Este generador lee una muestra de JSON y escribe las interfaces de TypeScript que describen su forma.
How it works
Recorre la muestra e infiere un tipo para cada clave a partir del valor que encuentra: una cadena pasa a string, un número a number, un objeto anidado a su propia interfaz con nombre y un array al tipo de sus elementos seguido de []. La inferencia tiene exactamente un ejemplo del que partir, así que la salida describe ese ejemplo con precisión: es un primer borrador que usted edita, no un tipo derivado de un contrato.
When to use it
- Tipar la respuesta de una API de terceros que no publica tipos.
- Convertir una carga registrada o un fixture de prueba en interfaces.
- Obtener un primer borrador de una respuesta grande y anidada en lugar de escribirla a mano.
- Ver la forma real de una respuesta, incluidos los campos que la documentación nunca menciona.
Watch out for
- Un campo opcional que casualmente falta en la muestra sale como obligatorio, y un campo presente pero null no le dice nada al generador sobre su tipo real. Pegue una muestra que incluya los casos incómodos y marque después usted mismo los opcionales.
- Todos los números pasan a number. TypeScript no tiene un tipo entero, así que la distinción entre un identificador y un precio se pierde; y un identificador por encima de 2^53 ya había perdido precisión al analizarse el JSON, antes de que el generador llegara a verlo.
- Un campo cuyo tipo varía entre respuestas — a veces una cadena, a veces null, a veces un objeto — se tipa a partir de la versión que usted pegó. La interfaz generada compila y después es incorrecta en tiempo de ejecución.
Not the right tool for: Sustituir a un esquema. Si la API publica un documento OpenAPI o JSON Schema, genere los tipos desde ahí: describe todas las respuestas y no una de ellas.
Frequently Asked Questions
¿Cómo convierto JSON en una interfaz de TypeScript?
Pegue una respuesta JSON representativa y ponga nombre a la interfaz raíz. Los tipos aparecen mientras escribe: los objetos anidados pasan a ser sus propias interfaces con nombre, los arrays se tipan por sus elementos y el resultado queda listo para pegarlo en un archivo .ts o descargarlo.
¿Cómo se detectan las propiedades opcionales?
A partir de un array de objetos, toda clave que falte en al menos un elemento se marca como opcional con un signo de interrogación. Por eso pegar varios registros representativos produce mejores tipos que pegar uno solo: el generador solo puede ver lo que le muestra la muestra.
¿Qué ocurre con los valores null?
Un null se tipa como null en lugar de adivinarse, así que una clave que se ve tanto como número como null pasa a ser number | null. Active "Los null pasan a opcionales" si su API usa null para indicar ausencia, y la clave pasará a ser opcional.
How to Use JSON to TypeScript
- Paste or type your input in the input area above.
- The tool processes your input automatically or click Run.
- Copy or download the result using the action buttons.
- Use Ctrl+Enter to run quickly from the keyboard.