Μετατροπή JSON σε TypeScript

Επικολλήστε μια απόκριση API και πάρτε έτοιμα TypeScript interfaces ή type aliases, με εμφωλευμένους τύπους, προαιρετικά πεδία και ενώσεις με null να συνάγονται αυτόματα.

Τρέχει στον browser σαςΧωρίς εγγραφήΤίποτα δεν ανεβαίνει

TypeScript

Πώς να χρησιμοποιήσετε: JSON σε TypeScript

  1. Επικολλήστε ένα δείγμα JSON, όπως μια απόκριση API, στο αριστερό πλαίσιο ή ανοίξτε ένα αρχείο .json.
  2. Ορίστε το όνομα του τύπου ρίζας (για παράδειγμα User ή ApiResponse).
  3. Επιλέξτε δηλώσεις interface ή type και ενεργοποιήστε export, readonly ή όλα τα πεδία προαιρετικά.
  4. Διαλέξτε unknown (ασφαλέστερο) ή any για τιμές που το δείγμα δεν αποκαλύπτει, όπως κενοί πίνακες και null.
  5. Αντιγράψτε τον κώδικα που δημιουργήθηκε ή κατεβάστε τον ως αρχείο .ts.

Πώς συνάγονται οι τύποι

  • Πρωτογενείς τύποι: strings, αριθμοί και booleans αντιστοιχούν σε string, number και boolean.
  • Εμφωλευμένα αντικείμενα γίνονται ξεχωριστά ονομασμένα interfaces σε PascalCase, οπότε το billing_address γίνεται BillingAddress.
  • Πίνακες αντικειμένων συγχωνεύονται σε έναν τύπο στοιχείου με όνομα στον ενικό: το users δίνει User[]. Ένα κλειδί που λείπει από ορισμένα στοιχεία γίνεται προαιρετικό (key?:).
  • Τιμές null συνδυάζονται με τις άλλες τιμές που εμφανίστηκαν για το κλειδί: string | null. Ένα κλειδί που είναι πάντα null καταλήγει σε unknown ή any.
  • Μικτοί πίνακες γίνονται πίνακες ένωσης, όπως (number | string)[].
  • Πανομοιότυπες δομές δηλώνονται μία φορά και επαναχρησιμοποιούνται, ενώ διαφορετικές δομές που θα είχαν το ίδιο όνομα παίρνουν αριθμητικό επίθημα.
  • Κλειδιά που δεν είναι έγκυρα αναγνωριστικά, όπως "first-name" ή "2fa", μπαίνουν σε εισαγωγικά.

interface ή type

Για απλές δομές αντικειμένων τα δύο είναι σχεδόν ισοδύναμα. Οι δηλώσεις interface μπορούν να επεκταθούν και να συγχωνευθούν και δίνουν ελαφρώς σαφέστερα σφάλματα compiler. Τα type aliases μπορούν επιπλέον να εκφράσουν ενώσεις και mapped types. Πολλές ομάδες χρησιμοποιούν interfaces για τα μοντέλα API και types για όλα τα υπόλοιπα· επιλέξτε ό,τι περιμένει ο κώδικας ή ο linter σας (@typescript-eslint/consistent-type-definitions).

Καλύτεροι τύποι από το δείγμα σας

Οι τύποι μπορούν να είναι μόνο τόσο πλήρεις όσο το δείγμα. Επικολλήστε μια απόκριση που περιλαμβάνει προαιρετικά πεδία ή έναν πίνακα με αρκετά διαφορετικά στοιχεία, ώστε η γεννήτρια να εντοπίσει προαιρετικά και nullable κλειδιά. Τιμές όπως ημερομηνίες και enums φτάνουν ως απλά strings στο JSON· περιορίστε τες με το χέρι στη συνέχεια, για παράδειγμα status: 'active' | 'disabled'. Για επικύρωση κατά την εκτέλεση, συνδυάστε τους τύπους με μια βιβλιοθήκη σχημάτων όπως το Zod.

Συχνές ερωτήσεις

Ανεβαίνει το JSON μου;
Όχι. Οι τύποι δημιουργούνται από JavaScript στον browser σας. Αποκρίσεις API με tokens ή προσωπικά δεδομένα δεν φεύγουν ποτέ από τη συσκευή σας.
Πώς εντοπίζονται οι προαιρετικές ιδιότητες;
Όταν αντικείμενα του ίδιου πίνακα έχουν διαφορετικά κλειδιά, τα κλειδιά που λείπουν από τουλάχιστον ένα αντικείμενο σημειώνονται ως προαιρετικά με ?. Με ένα μόνο αντικείμενο όλα τα κλειδιά είναι υποχρεωτικά, εκτός αν τσεκάρετε Όλα προαιρετικά.
Να χρησιμοποιήσω <code>unknown</code> ή <code>any</code>;
Το unknown είναι ασφαλέστερο: η TypeScript σας αναγκάζει να περιορίσετε την τιμή πριν τη χρησιμοποιήσετε. Το any απενεργοποιεί τον έλεγχο τύπων για αυτή την τιμή. Χρησιμοποιήστε το μόνο αν σκοπεύετε να βελτιώσετε τους τύπους αργότερα.
Γιατί μια ημερομηνία ISO έχει τύπο <code>string</code>;
Το JSON δεν έχει τύπο ημερομηνίας, οπότε οι ημερομηνίες μεταφέρονται ως strings. Αν τις μετατρέπετε με new Date() μετά την ανάλυση, αλλάξτε την ιδιότητα σε Date στο μοντέλο σας.
Χειρίζεται μεγάλο ή βαθιά εμφωλευμένο JSON;
Ναι. Η δημιουργία είναι γραμμική ως προς το μέγεθος της εισόδου και τρέχει τοπικά, οπότε αποκρίσεις πολλών megabytes μετατρέπονται σε πολύ λιγότερο από ένα δευτερόλεπτο.

Σχετικά εργαλεία

JSON Formatter Μορφοποίηση, συμπίεση και επικύρωση JSON με σφάλματα ανά γραμμή/στήλη. JSON Diff Σύγκριση δύο αντικειμένων JSON με λίστα αλλαγών ανά διαδρομή. YAML σε JSON Μετατροπή ρυθμίσεων YAML σε JSON, με πολλά έγγραφα και ακριβή σφάλματα. cURL Converter Μετατροπή εντολών curl σε κώδικα fetch, Axios, Python, Go ή PHP.