Πώς να το χρησιμοποιήσετε
- Επικολλήστε JSON στο πλαίσιο εισαγωγής, ανοίξτε ένα αρχείο .json ή δοκιμάστε το παράδειγμα.
- Ορίστε το όνομα του ριζικού τύπου, για παράδειγμα Order ή ApiResponse.
- Επιλέξτε δηλώσεις interface ή type και αν θα προστεθούν τα export και readonly.
- Αντιγράψτε το παραγόμενο TypeScript ή κατεβάστε το ως types.ts.
Πώς λειτουργεί
Η γεννήτρια διατρέχει ολόκληρο το έγγραφο JSON και καταγράφει τα είδη τιμών που βρίσκει σε κάθε σημείο. Κάθε αντικείμενο JSON γίνεται ξεχωριστή επώνυμη δήλωση. Το όνομα προκύπτει από το κλειδί της ιδιότητας γραμμένο σε PascalCase, οπότε το «shipping_address» γίνεται ShippingAddress. Τα στοιχεία ενός πίνακα ονομάζονται σύμφωνα με τον ενικό του κλειδιού: το «items» δίνει Item, το «categories» δίνει Category και τα κλειδιά που δεν μοιάζουν με πληθυντικό παίρνουν την κατάληξη «Item».
Όλα τα αντικείμενα μέσα σε έναν πίνακα συγχωνεύονται σε ένα interface. Αν ένα κλειδί εμφανίζεται μόνο σε ορισμένα από αυτά, επισημαίνεται ως προαιρετικό με «?». Αν μια τιμή έχει διαφορετικά είδη σε διαφορετικά σημεία, ο τύπος είναι μια ένωση όπως string | number. Το null διατηρείται ως δικός του τύπος, οπότε ένα πεδίο που μερικές φορές είναι null γίνεται string | null. Ένας κενός πίνακας γίνεται unknown[], επειδή δεν υπάρχει κάτι από το οποίο να συναχθεί. Δύο αντικείμενα με ακριβώς τις ίδιες ιδιότητες και τύπους μοιράζονται ένα interface αντί να παράγουν διπλότυπα. Τα κλειδιά που δεν είναι έγκυρα αναγνωριστικά, όπως το «first-name», μπαίνουν σε εισαγωγικά.
Το αποτέλεσμα περιγράφει μόνο το δείγμα που επικολλάτε. Ένα πεδίο που είναι προαιρετικό ή μπορεί να είναι null στην πραγματικότητα θα εμφανιστεί ως υποχρεωτικό και μη null αν το δείγμα σας δεν το δείχνει, ενώ οι ημερομηνίες εμφανίζονται ως απλά strings. Ελέγξτε τους τύπους σε σχέση με την τεκμηρίωση του API σας πριν βασιστείτε σε αυτούς.
Παραδείγματα
Δημιουργία τύπων για απόκριση API
Επικολλήστε μια παραγγελία από το API του καταστήματός σας με όνομα ρίζας Order. Θα λάβετε τα interfaces Order, Customer, Item και Shipping, με note?: string στο Item επειδή μόνο ένα από τα δύο στοιχεία έχει σημείωση.
Διαμόρφωση μόνο για ανάγνωση
Επικολλήστε ένα config.json, ενεργοποιήστε την επιλογή «Να γίνονται οι ιδιότητες μόνο για ανάγνωση» και επικολλήστε το αποτέλεσμα στο config.d.ts, ώστε τυχόν ακούσιες εγγραφές στη διαμόρφωση να εντοπίζονται από τον compiler.
Πίνακας στο ανώτατο επίπεδο
Ένα endpoint λίστας επιστρέφει [{…}, {…}]. Με το όνομα ρίζας Product, το αποτέλεσμα ξεκινά με «export type Product = ProductItem[];» και ακολουθεί το interface ProductItem.
Συχνές ερωτήσεις
Γιατί ένα πεδίο είναι προαιρετικό στην έξοδο;
Επειδή τουλάχιστον ένα αντικείμενο στον ίδιο πίνακα δεν έχει αυτό το κλειδί. Αν το έχουν όλα τα αντικείμενα, είναι υποχρεωτικό. Επικολλήστε πολλές εγγραφές για πιο ακριβή προαιρετικά πεδία.
Γιατί μια ημερομηνία δηλώνεται ως string;
Το JSON δεν διαθέτει τύπο ημερομηνίας, επομένως οι ημερομηνίες ταξιδεύουν ως συμβολοσειρές. Η γεννήτρια δεν μαντεύει μορφές. Αλλάξτε μόνοι σας τον τύπο αν ο κώδικάς σας τις μετατρέπει σε αντικείμενα Date.
Ποια είναι η διαφορά μεταξύ interface και type;
Για σχήματα αντικειμένων λειτουργούν σχεδόν το ίδιο. Τα interfaces μπορούν να επεκτείνονται και να συγχωνεύονται με μεταγενέστερες δηλώσεις· τα type aliases δεν μπορούν να ανοίξουν ξανά. Επιλέξτε το στυλ που χρησιμοποιεί ήδη ο κώδικάς σας.
Μπορεί να παράγει επικύρωση κατά την εκτέλεση, όπως σχήματα Zod;
Όχι. Παράγει μόνο δηλώσεις TypeScript, οι οποίες ελέγχονται κατά τη μεταγλώττιση και δεν επικυρώνουν δεδομένα κατά την εκτέλεση.
Απόρρητο
Το JSON σας αναλύεται μόνο στο πρόγραμμα περιήγησής σας. Τίποτα δεν μεταφορτώνεται, δεν αποθηκεύεται ούτε περιλαμβάνεται στα αναλυτικά στοιχεία.