Convertir JSON en types Flow — Numio

Génère des alias de type Flow à partir d’un échantillon JSON, en commençant par // @flow. Chaque objet imbriqué reçoit son propre type exporté, et les clés absentes de certains éléments d’un tableau sont marquées optionnelles avec ?.

Typer des réponses d’API dans une base de code React ou React Native qui utilise encore Flow.

JSON

Flow

Quand l’utiliser

Typer des réponses d’API dans une base de code React ou React Native qui utilise encore Flow.
Écrire des types pour des fixtures ou des données mock dans une suite de tests vérifiée par Flow.

Mode d’emploi

Collez un objet JSON dans l’éditeur.
Ouvrez les paramètres pour changer prefix (I par défaut) et Root Name (RootObject par défaut) ; le type racine devient IRootObject et les types imbriqués reçoivent le même préfixe.
Copiez les types exportés dans un fichier .js qui conserve l’en-tête // @flow.

Entrée JSON

{
  "id": 42,
  "name": "Ada Lovelace",
  "email": null,
  "active": true,
  "score": 98.5,
  "tags": ["admin", "dev"],
  "address": { "city": "London", "postCode": "NW1" }
}

Types 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
}

Détails et limites

S’exécute dans le navigateur avec la bibliothèque json-ts, et le résultat est formaté avec Prettier ; rien n’est envoyé.

Flow n’a pas de namespaces, la page ne propose donc que prefix et Root Name ; la sortie est toujours composée de déclarations export type de premier niveau.

Les valeurs null sont typées null et les tableaux vides any[]. Remplacez-les par des maybe types comme ?string quand le champ peut contenir une valeur.

La sortie utilise des types objet inexacts et pas de $ReadOnly ; ajoutez {| |} ou des enveloppes en lecture seule si votre projet l’exige.

FAQ

Comment les champs optionnels sont-ils détectés ?

Uniquement à partir de tableaux d’objets : une clé absente de certains éléments devient optionnelle, par exemple giftWrap?: boolean. Les clés de premier niveau ne sont jamais optionnelles, car un objet unique n’a pas d’autre échantillon de comparaison.

Puis-je convertir un tableau JSON à la racine ?

Oui. La racine devient un alias de tableau comme export type IRootObject = IRootObjectItem[], et le type des éléments fusionne les clés de tous les éléments, les clés manquantes étant marquées optionnelles.

Gère-t-il les tableaux de types mixtes ?

Oui, un tableau plat comme ["a", 2] devient (string | number)[]. Les tableaux imbriqués deviennent any[].

Spécifications et références

Flow docs: Objects