Konverter JSON ke TypeScript

Tempel respons API dan dapatkan interface atau type alias TypeScript yang siap pakai, dengan tipe bersarang, field opsional, dan union null yang disimpulkan otomatis.

Berjalan di browser AndaTanpa daftarTidak ada yang diunggah

TypeScript

Cara menggunakan JSON ke TypeScript

  1. Tempel contoh JSON, misalnya respons API, ke kotak kiri atau buka file .json.
  2. Atur nama tipe root (misalnya User atau ApiResponse).
  3. Pilih deklarasi interface atau type dan aktifkan export, readonly, atau semua field opsional.
  4. Pilih unknown (lebih aman) atau any untuk nilai yang tidak bisa diketahui dari contoh, seperti array kosong dan null.
  5. Salin kode yang dihasilkan atau unduh sebagai file .ts.

Cara tipe disimpulkan

  • Primitif: string, angka, dan boolean dipetakan ke string, number dan boolean.
  • Objek bersarang menjadi interface tersendiri dengan nama PascalCase, jadi billing_address menjadi BillingAddress.
  • Array berisi objek digabung menjadi satu tipe item dengan nama bentuk tunggal: users menghasilkan User[]. Key yang tidak ada di sebagian item menjadi opsional (key?:).
  • Nilai null digabung dengan nilai lain yang terlihat untuk key tersebut: string | null. Key yang selalu null menjadi unknown atau any.
  • Array campuran menjadi array union seperti (number | string)[].
  • Bentuk yang identik dideklarasikan sekali lalu dipakai ulang, dan bentuk berbeda yang akan berbagi nama mendapat akhiran angka.
  • Key yang bukan identifier valid, seperti "first-name" atau "2fa", diberi tanda kutip.

interface vs. type

Untuk bentuk objek biasa, keduanya hampir bisa saling menggantikan. Deklarasi interface bisa di-extend dan digabung, serta memberi error compiler yang sedikit lebih jelas. Alias type juga bisa mengekspresikan union dan mapped type. Banyak tim memakai interface untuk model API dan type untuk hal lainnya; pilih yang diharapkan codebase atau linter Anda (@typescript-eslint/consistent-type-definitions).

Dapatkan tipe yang lebih baik dari contoh Anda

Tipe hanya bisa selengkap contohnya. Tempel respons yang menyertakan field opsional, atau array dengan beberapa item yang bervariasi, agar generator bisa mendeteksi key opsional dan nullable. Nilai seperti tanggal dan enum datang sebagai string biasa di JSON; persempit secara manual setelahnya, misalnya status: 'active' | 'disabled'. Untuk validasi runtime, pasangkan tipe yang dihasilkan dengan library skema seperti Zod.

Pertanyaan yang sering diajukan

Apakah JSON saya diunggah?
Tidak. Tipe dibuat oleh JavaScript di browser Anda. Respons API yang berisi token atau data pribadi tidak pernah meninggalkan perangkat Anda.
Bagaimana properti opsional dideteksi?
Jika objek dalam array yang sama memiliki key berbeda, key yang tidak ada di setidaknya satu objek ditandai opsional dengan ?. Dengan satu objek saja, semua key wajib, kecuali Anda mencentang Semua opsional.
Sebaiknya memakai <code>unknown</code> atau <code>any</code>?
unknown lebih aman: TypeScript mengharuskan Anda mempersempit nilainya sebelum digunakan. any mematikan pemeriksaan tipe untuk nilai itu. Gunakan hanya jika Anda berencana memperbaiki tipenya nanti.
Mengapa tanggal ISO diberi tipe <code>string</code>?
JSON tidak memiliki tipe tanggal, jadi tanggal dikirim sebagai string. Jika Anda mengonversinya dengan new Date() setelah parsing, ubah properti itu menjadi Date di model Anda.
Apakah bisa menangani JSON yang besar atau sangat bersarang?
Ya. Proses pembuatan berbanding lurus dengan ukuran input dan berjalan lokal, jadi respons berukuran beberapa megabyte dikonversi dalam waktu jauh di bawah satu detik.

Tools terkait

JSON Formatter Rapikan, minify, dan validasi JSON dengan error per baris/kolom. JSON Diff Bandingkan dua objek JSON dan daftar perubahan per path. YAML ke JSON Konversi konfigurasi YAML ke JSON, mendukung multi-dokumen dengan error yang presisi. cURL Converter Ubah perintah curl menjadi kode fetch, Axios, Python, Go, atau PHP.