Cara menggunakan
- Tempel JSON ke kotak input, buka file .json, atau coba contohnya.
- Atur nama tipe root, misalnya Order atau ApiResponse.
- Pilih deklarasi interface atau type serta apakah akan menambahkan export dan readonly.
- Salin TypeScript yang dihasilkan atau unduh sebagai types.ts.
Cara kerja
Generator menelusuri seluruh dokumen JSON dan mencatat jenis nilai yang ditemukan di setiap tempat. Setiap objek JSON menjadi deklarasi bernama tersendiri. Nama diambil dari kunci properti yang ditulis dalam PascalCase, sehingga “shipping_address” menjadi ShippingAddress. Item dari array dinamai berdasarkan bentuk tunggal dari kuncinya: “items” menghasilkan Item, “categories” menghasilkan Category, dan kunci yang tidak tampak seperti bentuk jamak mendapat akhiran “Item”.
Semua objek di dalam satu array digabungkan menjadi satu interface. Jika sebuah kunci hanya muncul di sebagian objek, kunci tersebut ditandai opsional dengan “?”. Jika sebuah nilai memiliki jenis yang berbeda di tempat yang berbeda, tipenya adalah union seperti string | number. null dipertahankan sebagai tipenya sendiri, sehingga field yang kadang-kadang null menjadi string | null. Array kosong menjadi unknown[] karena tidak ada yang dapat disimpulkan. Dua objek dengan properti dan tipe yang persis sama berbagi satu interface alih-alih menghasilkan duplikat. Kunci yang bukan identifier yang valid, seperti “first-name”, diapit tanda kutip.
Hasilnya hanya menggambarkan sampel yang Anda tempel. Field yang sebenarnya opsional atau bisa null akan menjadi wajib dan non-null jika sampel Anda tidak menunjukkannya, dan tanggal tiba sebagai string biasa. Tinjau tipe-tipe tersebut dengan dokumentasi API Anda sebelum mengandalkannya.
Contoh
Memberi tipe respons API
Tempel pesanan dari API toko Anda dengan nama akar Order. Anda mendapatkan interface Order, Customer, Item, dan Shipping, dengan note?: string pada Item karena hanya satu dari dua item yang memiliki catatan.
Konfigurasi read-only
Tempel config.json, centang “Jadikan properti read-only”, dan tempel hasilnya ke config.d.ts, sehingga penulisan yang tidak disengaja ke konfigurasi tertangkap oleh kompiler.
Array di tingkat teratas
Endpoint daftar mengembalikan [{…}, {…}]. Dengan nama akar Product, output dimulai dengan “export type Product = ProductItem[];” diikuti oleh interface ProductItem.
Pertanyaan yang sering diajukan
Mengapa sebuah field menjadi opsional pada output?
Karena setidaknya satu objek dalam array yang sama tidak memiliki kunci tersebut. Jika setiap objek memilikinya, kunci itu wajib. Tempel beberapa data untuk mendapatkan field opsional yang lebih akurat.
Mengapa tanggal memiliki tipe string?
JSON tidak memiliki tipe tanggal, jadi tanggal direpresentasikan sebagai string. Generator tidak menebak format. Ubah sendiri tipenya jika kode Anda mengonversinya menjadi objek Date.
Apa perbedaan antara interface dan type?
Untuk bentuk objek, keduanya hampir sama. Interface dapat diperluas dan digabungkan oleh deklarasi selanjutnya; type alias tidak dapat dibuka kembali. Pilih gaya yang sudah digunakan basis kode Anda.
Apakah alat ini bisa menghasilkan validasi runtime seperti skema Zod?
Tidak. Alat ini hanya menghasilkan deklarasi TypeScript, yang diperiksa saat kompilasi dan tidak memvalidasi data saat runtime.
Privasi
JSON Anda hanya dianalisis di browser Anda. Tidak ada yang diunggah, disimpan, atau disertakan dalam analitik.