JSON ke TypeScript
Ubah contoh dokumen JSON menjadi interface atau type alias TypeScript, dengan field opsional dan union yang disimpulkan dari data Anda.
Berjalan sepenuhnya di browser Anda
Tipe disimpulkan dari contoh yang Anda tempel, jadi tipe itu menggambarkan contoh tersebut, bukan sebuah skema: field yang berupa string di contoh Anda bisa saja berupa angka di tempat lain. Semua angka menjadi number, dan tanggal tetap string. Urutan properti mengikuti JSON.parse, yang menaruh kunci berupa bilangan bulat di depan.
Cara membuat TypeScript dari JSON
- Tempel respons atau file JSON ke dalam kotak. Beberapa item array akan memberi hasil yang lebih baik, karena field yang tidak ada di sebagian item menjadi opsional.
- Atur nama type tingkat teratas, pilih
interfaceatautype, lalu centang export, readonly atau deteksi field opsional sesuai kebutuhan. - Salin deklarasinya atau unduh sebagai file
.ts. Periksa nama-namanya, karena nama itu diambil dari nama kunci Anda.
Menyimpulkan tipe dari contoh JSON
Konversi JSON ke TypeScript bekerja karena tipe TypeScript menggambarkan bentuk data, dan sebuah respons JSON sudah memuat bentuk itu: setiap kunci, jenis nilai di baliknya, dan cara objek saling bersarang. Konverter menelusuri contoh Anda dan menuliskan bentuk itu sebagai deklarasi, jadi Anda tidak perlu mengetik empat puluh field secara manual sebelum bisa memanggil API dengan yakin.
Langkah terpenting adalah cara menangani array. Setiap item dalam array berisi objek dibaca, lalu bentuknya digabung: kunci yang ada di setiap item tetap wajib, kunci yang hanya ada di sebagian item menjadi opsional, dan nilai yang jenisnya berbeda menjadi union. Itulah sebabnya contoh dengan beberapa record menghasilkan tipe yang jauh lebih baik daripada contoh dengan satu record. Nilai null diperlakukan berbeda dari kunci yang tidak ada, karena keduanya bermakna berbeda bagi kode yang membaca field tersebut.
Tipe hasil inferensi adalah titik awal, bukan kontrak. Tipe itu tidak bisa tahu bahwa sebuah string selalu bernilai salah satu dari tiga pilihan, bahwa sebuah angka sebenarnya ID bilangan bulat, atau bahwa field yang ada di semua contoh Anda bisa hilang di production. Baca hasilnya, ganti nama yang terasa janggal, dan perketat tipe yang penting.
Tips
- Pastikan dulu contoh Anda valid dengan Format dan validasi JSON, yang menunjuk karakter persis tempat kesalahan sintaks berada.
- Bekerja dengan konfigurasi YAML? Konversikan dengan Konversi YAML ke JSON lalu tempel hasilnya di sini.
- Perlu melihat isi payload token sebelum membuat tipenya? Decode dengan Decoder JWT.
Pertanyaan umum
Bagaimana alat ini menentukan field opsional?
Jika Anda punya array berisi objek, objek-objek itu digabung menjadi satu bentuk. Kunci yang muncul di sebagian item tetapi tidak di semua item mendapat ?. Kunci yang ada tetapi bernilai null di sebagian item tidak dianggap opsional; tipenya menjadi T | null. Matikan deteksi field opsional jika Anda ingin semua kunci ditandai wajib.
Bagaimana tipe bersarang diberi nama?
Setiap objek bersarang diberi nama dari kuncinya dalam PascalCase, jadi billing_address menjadi BillingAddress. Untuk array, tipe itemnya membuang akhiran "s" jika kuncinya lebih dari 3 huruf dan tidak berakhiran ss, us atau is: users menghasilkan User, sedangkan address menghasilkan AddressItem. Jika dua bentuk berbeda menginginkan nama yang sama, yang kedua diberi nomor, menjadi User dan User2.
Apa yang terjadi pada objek dengan bentuk yang sama?
Objek-objek itu memakai satu deklarasi bersama. Jika billing dan shipping sama-sama berisi { street, city }, Anda mendapat satu interface yang dinamai sesuai tempat pertama ia muncul. Dua objek dengan kunci yang sama tetapi tipe nilai berbeda dianggap bentuk berbeda dan mendapat nama terpisah.
Mengapa array kosong bertipe unknown[]?
Array kosong tidak berisi contoh, jadi tidak ada yang bisa disimpulkan tentang itemnya. unknown[] adalah jawaban yang jujur; ubah secara manual setelah Anda tahu tipe itemnya. Array yang berisi campuran nilai menjadi union, misalnya (string | number)[].
Bisakah hasilnya berbeda dari API yang sebenarnya?
Bisa. Sebuah contoh hanya menunjukkan nilai yang ada di dalamnya. Field yang selalu ada di contoh Anda tetapi kadang hilang di production akan dianggap wajib di sini, dan string yang mirip enum akan menjadi string biasa. Untuk validasi ketat, gunakan skema; untuk awal yang cepat, gunakan hasil ini lalu sesuaikan.
Apakah JSON saya diunggah?
Tidak. Apa pun yang Anda tempel tidak dikirim ke mana pun; konversi berjalan di browser Anda, dan Anda bisa memutus koneksi internet setelah halaman dimuat.