Μετάβαση στο κύριο περιεχόμενο
LibraTool logoLibraTool

Μετατροπέας JSON σε TypeScript δωρεάν

Δημιουργήστε διεπαφές TypeScript ή ψευδώνυμα τύπων από οποιοδήποτε αντικείμενο ή πίνακα JSON. Επικολλήστε το JSON και λάβετε έτοιμους τύπους TypeScript άμεσα.

Λειτουργεί εκτός σύνδεσης μόλις φορτωθεί
export interface User {
  id: number;
  name: string;
  email: string;
  isActive: boolean;
  score: number;
  tags: string[];
  address?: null;
}

export interface Root {
  user: User;
  createdAt: string;
  version: number;
}

Συνηθισμένες χρήσεις

  • Δημιουργία τύπων TypeScript από απαντήσεις APIΕπικολλήστε μια απάντηση JSON API και δημιουργήστε αμέσως διεπαφές TypeScript για ασφαλή κώδικα μπροστινού άκρου.
  • Τύποι TypeScript για αντικείμενα ρυθμίσεων και ρυθμίσεωνΔημιουργήστε διεπαφές TypeScript από αρχεία JSON ρυθμίσεων για προσθήκη ασφάλειας τύπου στις ρυθμίσεις εφαρμογής σας.
  • Δημιουργία τύπων TypeScript από εγγραφές βάσης δεδομένωνΜετατροπή εγγραφών βάσης δεδομένων που εξάγονται σε JSON ή αποτελέσματα ερωτημάτων ORM σε διεπαφές TypeScript για πληκτρολόγηση στρώματος δεδομένων.
  • Πληκτρολόγηση δεδομένων mock και σταθερών δοκιμήςΔημιουργήστε διεπαφές TypeScript από δεδομένα mock JSON και σταθερές δοκιμής για πληκτρολόγηση των δοκιμών μονάδας σας και των ιστοριών Storybook.
  • Πληκτρολόγηση απαντήσεων API τρίτωνΔημιουργήστε διεπαφές TypeScript από απαντήσεις API τρίτων όπου λείπουν ή είναι παρωχημένοι οι επίσημοι τύποι.

Πώς λειτουργεί

Αυτό το εργαλείο χρησιμοποιεί χειρόγραφο αναδρομικό αλγόριθμο συμπερασμού τύπων χωρίς εξωτερικές βιβλιοθήκες — JSON.parse για επικύρωση και ανάλυση της εισόδου και έπειτα προσαρμοσμένη διάσχιση που περνά από κάθε τιμή του δέντρου JSON και παράγει δηλώσεις TypeScript interface ή type απευθείας στον browser. Τίποτα δεν αποστέλλεται σε διακομιστή.

  1. 1
    Ανάλυση και επικύρωση JSON
    Η είσοδός σας δίνεται στο JSON.parse. Αν αποτύχει, το ακριβές σφάλμα ανάλυσης εμφανίζεται αμέσως κάτω από την είσοδο. Μια επιτυχής ανάλυση παράγει ένα δέντρο τιμών που οδηγεί την υπόλοιπη μετατροπή.
  2. 2
    Αναδρομικός συμπερασμός τύπων
    Μια αναδρομική συνάρτηση getType διατρέχει κάθε κόμβο: οι πρωτογενείς τιμές αντιστοιχίζονται σε string, number, boolean ή null· τα αντικείμενα δημιουργούν νέο ονομασμένο interface· στους πίνακες αντικειμένων τα κλειδιά συγχωνεύονται από όλα τα στοιχεία, ώστε κλειδιά που υπάρχουν μόνο σε κάποια στοιχεία να γίνονται προαιρετικά και οι αντικρουόμενοι τύποι τιμών να ενώνονται με |.
  3. 3
    Ονοματοδοσία interfaces χωρίς συγκρούσεις
    Κάθε ένθετο αντικείμενο παίρνει όνομα PascalCase από το κλειδί JSON του (τα snake_case, kebab-case και κενά κανονικοποιούνται). Αν δύο δομικά διαφορετικά αντικείμενα θα είχαν το ίδιο όνομα, προστίθεται αριθμητικό επίθημα (Data, Data2, …) αντί να αντικατασταθεί σιωπηλά ο προηγούμενος ορισμός.
  4. 4
    Απόδοση εξόδου και λήψη
    Πρώτα εξάγονται τα ένθετα interfaces και μετά ο ριζικός τύπος, μορφοποιημένα ως export interface ή export type ανάλογα με την επιλογή σας. Το αποτέλεσμα μπορεί να αντιγραφεί στο πρόχειρο ή να ληφθεί ως αρχείο .ts — όλα με ένα τυπικό Blob και χωρίς επικοινωνία με διακομιστή.

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

📋

JSON Schema σε Φόρμα

Επικολλήστε ένα JSON Schema και λάβετε μια ζωντανή, λειτουργική φόρμα — κείμενο, αριθμός, πλαίσιο ελέγχου, αναπτυσσόμενο και πεδία λίστας — και αντιγράψτε το JSON που παράγουν οι εισαγωγές σας. Ιδανικό για σχεδιασμό σωμάτων αιτημάτων API. Εκτελείται στο πρόγραμμα περιήγησής σας.

Δοκιμάστε το
⌨️

Δοκιμή Ταχύτητας Πληκτρολόγησης (WPM)

Μετρήστε την ταχύτητα πληκτρολόγησης (WPM) και την ακρίβειά σας με δοκιμές χρόνου, αριθμού λέξεων, αποσπασμάτων, προσαρμοσμένες και Zen. Ζωντανό WPM, ακατέργαστη ταχύτητα, συνέπεια, γράφημα αποτελεσμάτων, πολλές γλώσσες και σχόλια ανά χαρακτήρα — όλα στο πρόγραμμα περιήγησής σας.

Δοκιμάστε το
📐

Γεννήτρια CSS clamp()

Δημιουργήστε μια ρευστή τιμή CSS clamp() για ανταποκρινόμενη τυπογραφία και απόσταση. Ορίστε ελάχιστο/μέγιστο μέγεθος και εύρος παρατηρητικής θύρας, δείτε ζωντανή προεπισκόπηση και αντιγράψτε το CSS.

Δοκιμάστε το

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