JSON in Flow-Typen umwandeln — Numio
Erzeugt Flow-Typaliase aus einem JSON-Beispiel, beginnend mit // @flow. Jedes verschachtelte Objekt erhält einen eigenen exportierten Typ, und Schlüssel, die in einigen Array-Elementen fehlen, werden mit ? als optional markiert.
API-Antworten in einer React- oder React-Native-Codebasis typisieren, die noch Flow verwendet.
JSON
Flow
Wann sie hilft
- API-Antworten in einer React- oder React-Native-Codebasis typisieren, die noch Flow verwendet.
- Typen für Fixtures oder Mock-Daten in einer mit Flow geprüften Testsuite schreiben.
Anwendung
- Füge ein JSON-Objekt in den Editor ein.
- Öffne die Einstellungen, um prefix (Standard I) und Root Name (Standard RootObject) zu ändern; der Root-Typ wird zu IRootObject und verschachtelte Typen erhalten dasselbe Präfix.
- Kopiere die exportierten Typen in eine .js-Datei, die den Header // @flow behält.
JSON-Eingabe
{
"id": 42,
"name": "Ada Lovelace",
"email": null,
"active": true,
"score": 98.5,
"tags": ["admin", "dev"],
"address": { "city": "London", "postCode": "NW1" }
}Flow-Typen
// @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
}Details und Einschränkungen
Läuft im Browser mit der Bibliothek json-ts, das Ergebnis wird mit Prettier formatiert; nichts wird hochgeladen.
Flow hat keine Namespaces, daher bietet die Seite nur prefix und Root Name; die Ausgabe besteht immer aus export type-Deklarationen auf oberster Ebene.
null-Werte werden als null typisiert und leere Arrays als any[]. Ändere sie in Maybe-Typen wie ?string, wenn das Feld einen Wert enthalten kann.
Die Ausgabe verwendet nicht-exakte Objekttypen und kein $ReadOnly; ergänze {| |} oder Read-only-Wrapper, wenn dein Projekt sie verlangt.
FAQ
Wie werden optionale Felder erkannt?
Nur aus Arrays von Objekten: Ein Schlüssel, der in einigen Elementen fehlt, wird optional, zum Beispiel giftWrap?: boolean. Schlüssel auf oberster Ebene sind nie optional, weil ein einzelnes Objekt kein weiteres Beispiel zum Vergleichen hat.
Kann ich ein JSON-Array auf oberster Ebene umwandeln?
Ja. Die Root wird zu einem Array-Alias wie export type IRootObject = IRootObjectItem[], und der Elementtyp führt die Schlüssel aller Elemente zusammen, wobei fehlende Schlüssel als optional markiert werden.
Werden Arrays mit gemischten Typen unterstützt?
Ja, ein flaches Array wie ["a", 2] wird zu (string | number)[]. Verschachtelte Arrays werden zu any[].