Hasilkan interface TypeScript dari JSON _

Cara kerja penyimpulan JSON ke TypeScript

Penyimpulan adalah satu kali pass melalui pohon JSON yang diurai. Alat membaca setiap nilai, memilih tipe TypeScript untuknya, lalu menuliskan satu interface per objek yang ditemukan.

1. Urai sampel JSON dengan parser bawaan peramban dan tolak masukan yang tidak terbentuk dengan petunjuk baris/kolom.
2. Deteksi tipe TypeScript untuk setiap nilai — string, number, boolean, null, array, atau objek bersarang.
3. Beri setiap objek bersarang nama interface yang berasal dari kunci properti parent-nya (sehingga user.address menjadi interface Address).
4. Gabungkan tipe item di setiap array sehingga daftar {id: 1} dan {id: 2, label: "x"} menghasilkan union dengan field optional yang tepat.
5. Terapkan opsi Anda (interface vs. type, readonly, optional-nullable) dan emit deklarasi dalam urutan ketergantungan sehingga file dikompilasi tanpa referensi ke depan.

Mengapa menghasilkan tipe TypeScript dari JSON?

• Sebagian besar bug bentuk dapat ditangkap pada saat kompilasi jika tipe respons ditulis. Menyimpulkan interface dari payload nyata menuliskan sebagian besar untuk Anda, dan mode `strict` menangkap field yang dilupakan oleh dokumentasi.
• Memasangkan interface yang disimpulkan dengan validator runtime seperti Zod atau io-ts memberi bentuk yang sama dua pekerjaan: autocomplete editor dalam pengembangan dan kesalahan 400 di edge ketika produksi mengirimkan sesuatu yang tidak terduga.
• Language server TypeScript hanya memunculkan field yang diketahuinya. Setelah Anda mengimpor interface yang disimpulkan, autocomplete bekerja begitu Anda mengetik titik — tidak perlu lagi cast `as any` pada respons dan grep yang frustrasi di seluruh repo.
• Jika Anda akan menulis spesifikasi OpenAPI, interface yang disimpulkan adalah draf pertama yang cepat dari schema respons. Anda masih menginginkan contoh dan batasan yang ditulis tangan, tetapi nama properti dan tipenya sudah benar.

Aplikasi umum

Penyimpulan paling membantu ketika payload nyata ada tetapi schema tidak.

• Mengetik payload webhook pihak ketiga dari Stripe, GitHub, atau Twilio sebelum menulis handler.
• Memulai tipe untuk API REST internal sehingga tim frontend dapat mulai membuat kode terhadapnya pada hari yang sama saat backend selesai.
• Menghasilkan titik awal untuk schema Zod, io-ts, atau Valibot dari respons API yang diamati.

Seperti apa keluarannya?

Diberikan dokumen JSON sampel dan nama root, generator menghasilkan pohon interface, satu per objek bersarang. Untuk masukan di bawah dengan nama root User:

Tempel {"id":1,"name":"Alice","tags":["a","b"],"address":{"city":"Paris"}} dengan nama root User dan generator menghasilkan:

export interface User {
  id: number;
  name: string;
  tags: string[];
  address: Address;
}

export interface Address {
  city: string;
}

Opsi generator

Gaya deklarasi

Pilih interface (idiom TypeScript standar untuk bentuk objek) atau type (berguna jika Anda nanti memerlukan mapped type, conditional type, atau interseksi). Keduanya menghasilkan perilaku runtime yang identik; pilihannya adalah preferensi gaya koding.

Field nullable optional

Ketika nilai yang disampel adalah null, tipe field menjadi T | null. Mengaktifkan opsi ini juga menambahkan modifier ? sehingga field bersifat optional di sisi TypeScript — berguna ketika API terkadang menghilangkan kunci sepenuhnya alih-alih mengembalikan null.

Modifier readonly

Menambahkan readonly di depan setiap deklarasi properti sehingga interface yang dihasilkan cocok dengan model data yang tidak dapat diubah. Berguna untuk slice state Redux, respons API yang dibekukan, atau di mana pun Anda ingin kompiler menandai mutasi yang tidak disengaja.

Apakah ini mendukung objek bersarang dan array?

Ya. Setiap objek bersarang menjadi interface bernama yang berasal dari kunci properti parent-nya, dan array menyimpulkan tipe item dari isinya. Array objek mendapat interface per bentuk objek, dengan union type di mana bentuknya berbeda.

Bagaimana field optional disimpulkan?

Aktifkan toggle 'Tandai field nullable sebagai optional' dan field mana pun yang nilai sampelnya null mendapat modifier ? pada kunci ditambah | null dalam tipenya. Tanpa toggle, field tetap wajib dan tipenya hanya T | null.

Apakah ini mendukung discriminated union?

Tipe union dasar muncul ketika array menyimpan item dengan bentuk campuran atau ketika field membawa nilai dan null. Penyimpulan discriminated-union penuh (memilih type atau kind sebagai tag dan memisahkan varian) membutuhkan beberapa sampel — itu direncanakan tetapi belum ada di build saat ini.

Bisakah saya menyimpulkan tipe dari beberapa sampel JSON?

Belum — penyimpul saat ini membaca satu sampel sekaligus. Jika Anda memiliki dua payload yang harus berbagi interface (misalnya, endpoint daftar dan endpoint item tunggal), solusi praktisnya adalah menggabungkannya menjadi satu array, menghasilkan dari itu, lalu mengganti nama tipe union yang dihasilkan. Penyimpulan multi-sampel ada di roadmap karena itu satu-satunya cara untuk menemukan field yang ada di satu respons dan tidak ada di respons lain.

Tempel payload, beri nama root, salin interface. Seluruh pipeline berjalan di peramban Anda, sehingga API yang belum dirilis atau body webhook yang ditandatangani tetap di mesin Anda.