Convertir JSON a tipos de Flow — Numio
Genera alias de tipo de Flow a partir de una muestra JSON, empezando por // @flow. Cada objeto anidado recibe su propio tipo exportado y las claves que faltan en algunos elementos de un array se marcan como opcionales con ?.
Tipar respuestas de API en un código React o React Native que todavía usa Flow.
JSON
Flow
Cuándo usarla
- Tipar respuestas de API en un código React o React Native que todavía usa Flow.
- Escribir tipos para fixtures o datos mock en una suite de tests comprobada con Flow.
Cómo usarla
- Pega un objeto JSON en el editor.
- Abre la configuración para cambiar prefix (por defecto I) y Root Name (por defecto RootObject); el tipo raíz pasa a IRootObject y los tipos anidados reciben el mismo prefijo.
- Copia los tipos exportados en un archivo .js que conserve la cabecera // @flow.
Entrada JSON
{
"id": 42,
"name": "Ada Lovelace",
"email": null,
"active": true,
"score": 98.5,
"tags": ["admin", "dev"],
"address": { "city": "London", "postCode": "NW1" }
}Tipos de Flow
// @flow
export type IRootObject = {
id: number
name: string
email: null
active: boolean
score: number
tags: string[]
address: IAddress
}
export type IAddress = {
city: string
postCode: string
}Detalles y limitaciones
Se ejecuta en el navegador con la librería json-ts y el resultado se formatea con Prettier; no se sube nada.
Flow no tiene namespaces, así que la página solo ofrece prefix y Root Name; la salida son siempre declaraciones export type de nivel superior.
Los valores null tienen tipo null y los arrays vacíos any[]. Cámbialos a maybe types como ?string cuando el campo pueda contener un valor.
La salida usa tipos de objeto inexactos y sin $ReadOnly; añade {| |} o envoltorios de solo lectura si tu proyecto los exige.
FAQ
¿Cómo se detectan los campos opcionales?
Solo a partir de arrays de objetos: una clave que falta en algunos elementos pasa a ser opcional, por ejemplo giftWrap?: boolean. Las claves de nivel superior nunca son opcionales, porque un único objeto no tiene otra muestra con la que compararse.
¿Puedo convertir un array JSON en la raíz?
Sí. La raíz pasa a un alias de array como export type IRootObject = IRootObjectItem[], y el tipo de los elementos fusiona las claves de todos ellos, con las claves que faltan marcadas como opcionales.
¿Admite arrays de tipos mixtos?
Sí, un array plano como ["a", 2] pasa a (string | number)[]. Los arrays anidados pasan a any[].