Konverter von JSON zu TypeScript

Der Konverter ordnet JSON-Typen TypeScript-Typen wie folgt zu: JSON-Zeichenfolgen werden zu Zeichenfolgen; JSON-Nummern werden zu Zahlen (mit einer Warnung vor dem Fehlen ganzzahlspezifischer Typen in TypeScript); JSON-Boolesche Werte werden zu Booleschen Werten; JSON null wird je nach Konfiguration null oder undefiniert (wenn null angegeben wird, kann der Wert null sein, was bedeutet, dass der Wert explizit festgelegt werden muss, während undefiniert bedeutet, dass die Eigenschaft möglicherweise fehlt); JSON-Arrays werden zu Array<T> oder T[] wobei T der abgeleitete Elementtyp ist (gemischte Arrays verwenden Union-Typen); JSON-Objekte werden zu verschachtelten Schnittstellen mit Pascalfallnamen, die aus dem Kontext abgeleitet sind. Der Konverter erkennt auch: Aufzählungskandidaten (Zeichenfolgenfelder, die immer denselben Wertesatz haben, werden zu Zeichenfolgenliteral-Vereinigungstypen), schreibgeschützte Kandidaten (Felder, die über Beispiele hinweg unverändert bleiben) und optionale Felder (Eigenschaften, die nur in einigen Array-Elementen vorhanden sind).

Sowohl Schnittstellen- als auch Typalias haben ihre Vorteile. Interface wird für objektförmige Typen bevorzugt, weil: es erweitert werden kann (erweitert das Schlüsselwort für die Vererbung), das Zusammenführen von Deklarationen unterstützt (nützlich beim Erweitern vorhandener Typen), in den meisten Compilern klarere Fehlermeldungen erzeugt und die herkömmliche Wahl für API-Datenformen ist. Typalias (Typ) wird bevorzugt, wenn Sie Folgendes benötigen: Vereinigungstypen (A | B), Schnittpunkttypen (A & B), zugeordnete Typen, bedingte Typen oder um Grundelemente und Tupel zu benennen. Für die API-Datenmodellierung (der häufigste Anwendungsfall) ist die Schnittstelle im Allgemeinen die bessere Wahl, da API-Antwortformen normalerweise Objekttypen sind, die von Erweiterungsfunktionen profitieren. Wenn Sie jedoch Ihre generierten Typen mit Vereinigungs- oder Bedingungstypen kombinieren möchten, ist der Typalias möglicherweise flexibler. Der Konverter kann jedes Formular basierend auf Ihren Vorlieben generieren.

Der Konverter unterscheidet basierend auf den JSON-Beispieldaten zwischen optional (möglicherweise nicht vorhanden) und nullfähig (vorhanden, aber möglicherweise null). Wenn eine Eigenschaft in einigen Objekten, in anderen jedoch nicht in Ihrem Beispielarray vorkommt, wird sie optional mit dem ? Modifikator in TypoSkript (Adresse?: Zeichenfolge). Wenn eine Eigenschaft manchmal null enthält, wird der Typ zu einer Vereinigung mit null (Adresse: string | null ). Wenn eine Eigenschaft sowohl optional vorhanden ist ALS auch null sein kann, wenn sie vorhanden ist, wird sie zu Adresse?: Zeichenfolge / null. Für Projekte, die strenge Nullprüfungen in tsconfig verwenden.json (sehr zu empfehlen), diese Unterscheidungen sind entscheidend: Optionale Eigenschaften müssen mit if (obj.adresse) oder optionale Verkettung (obj.adresse?.stadt), während nullfähige nicht optionale Eigenschaften überprüft werden müssen, auch wenn die Eigenschaft definitiv im Objekt vorhanden ist.

Ja, Sie können mehrere JSON-Objekte in ein Array einfügen, damit der Konverter Variationen erkennen kann. Wenn Sie mehrere Beispiele bereitstellen: Eigenschaften, die in allen Objekten vorhanden sind, werden als erforderlich markiert, Eigenschaften, die nur in einigen Objekten vorhanden sind, werden mit als optional markiert? werden Eigenschaften mit unterschiedlichen Typen über Stichproben hinweg mit Vereinigungstypen markiert, und Array-Elementtypen werden aus allen Elementen über alle Stichproben hinweg und nicht nur aus einem bestimmt. Mit einem Beispiel {name: string, age: number} erhalten Sie beispielsweise alle erforderlichen Felder. Bei zwei Beispielen, bei denen eines {name: string, email: string} und das andere {name: string, phone: string} enthält, erzeugt der Konverter name: string (erforderlich), email?: Zeichenfolge (optional), Telefon?: Zeichenfolge (optional). Dies ist besonders nützlich für APIs, bei denen unterschiedliche Endpunkte oder Antwortbedingungen unterschiedliche Teilmengen von Feldern zurückgeben.

Die generierten Typen können mit HTTP-Clientbibliotheken für typsichere API-Aufrufe verwendet werden. Mit fetch: Definieren Sie den Antworttyp und verwenden Sie await response .json() als ApiResponseType . Mit Axios: Verwenden Sie Generika wie Axios.holen Sie sich<ApiResponseType>(URL). Mit React Query oder SWR: Übergeben Sie den Typ an den Hook useQuery<ApiResponseType>(key, fetcher) . Mit GraphQL codegen: Die generierten Typen können als Basis für Ihre GraphQL-Schematypen dienen. Nach dem Kopieren der Typen in Ihr Projekt erhalten Sie: Kompilierungsfehler, wenn Sie auf nicht vorhandene Eigenschaften von API-Antworten zugreifen, IDE-Autovervollständigung für alle Antwortfelder mit Inline-Dokumentation, typsicheres Refactoring (einmaliges Umbenennen eines Felds und Aktualisierung aller Verwendungen) und Vertrauen, das der tatsächlichen API-Struktur entspricht. Denken Sie daran, Ihre Typen zu aktualisieren, wenn sich die API ändert — der Konverter macht dies schnell, indem Sie einfach das neueste JSON-Beispiel einfügen.