Lewati ke konten

Konverter JSON ke TypeScript

Hasilkan antarmuka TypeScript dari sampel JSON, dengan satu antarmuka untuk setiap bentuk objek yang unik, bahkan di dalam array.

Opsi

 

TypeScript yang dihasilkan

 

Cara kerja

Alat ini menyimpulkan definisi antarmuka TypeScript dari sampel JSON dengan memeriksa setiap kunci dan nilai, lalu menghasilkan deklarasi antarmuka yang dapat diekspor. Array objek yang mengulang bentuk yang sama, seperti daftar catatan API, menghasilkan satu antarmuka bersama alih-alih duplikat untuk setiap item.

  1. Tempelkan JSON

    Sebuah objek, atau array objek seperti respons API.

  2. Beri nama antarmuka root

    Objek bersarang mendapatkan antarmukanya sendiri, dinamai berdasarkan bidang.

  3. Salin TypeScript

    Diperbarui saat Anda mengetik atau mengubah opsi.

Cara pencocokan dan penamaan bentuk

Objek bersarang menghasilkan antarmuka bernama yang terpisah. Misalnya, bidang bernama address yang berisi city dan zip menjadi antarmuka Address, dan antarmuka induk mereferensikannya sebagai address: Address. Nama antarmuka diturunkan dengan menggunakan huruf kapital pada nama bidang.

Setiap bentuk objek direduksi menjadi tanda tangan yang terdiri dari nama properti dan tipe yang diurutkan. Ketika dua objek di mana pun dalam JSON memiliki tanda tangan yang sama, seperti setiap item dalam array catatan, mereka menggunakan kembali antarmuka yang sama alih-alih menghasilkan antarmuka baru dengan bentuk identik yang memiliki sufiks numerik.

  • Larik: diketik sebagai larik tipe elemen, misalnya string[] atau Tag[]. Larik yang elemennya memiliki lebih dari satu bentuk berbeda akan menjadi union, misalnya (Cat | Dog)[].
  • Properti opsional: dinonaktifkan secara default, karena sampel menunjukkan setiap kunci hadir. Aktifkan "Semua properti opsional" jika data nyata Anda terkadang tidak menyertakan bidang tertentu.
  • Kunci tidak umum: nama properti yang bukan merupakan identifier valid, seperti yang mengandung tanda hubung, akan diapit tanda kutip dalam keluaran.

Satu sampel tidak dapat mencakup semua kasus

Seperti inferensi skema dari satu contoh lainnya, bidang yang terkadang berupa string dan terkadang berupa angka akan diketik berdasarkan nilai mana pun yang muncul dalam sampel Anda, dan tipe union tidak terdeteksi secara otomatis. Tinjau keluaran dan tambahkan tipe union atau tipe literal string jika data nyata Anda bervariasi. Semua proses berjalan di halaman ini: JSON Anda, yang mungkin berisi nama bidang internal atau bentuk API proprietari, tidak pernah dikirim ke mana pun.

Pertanyaan yang sering diajukan

Bagaimana cara menghasilkan antarmuka TypeScript dari respons API JSON?

Tempel objek atau larik JSON ke dalam kolom masukan, atur nama antarmuka akar (default: Root), dan antarmuka akan dihasilkan ulang saat Anda mengetik. Alat ini memeriksa setiap kunci dan nilai, menyimpulkan tipe TypeScript (string, angka, boolean, null, antarmuka bersarang, atau larik), lalu menghasilkan deklarasi antarmuka yang dapat diekspor dan siap digunakan dalam proyek TypeScript Anda.

Apakah generator TypeScript berfungsi secara luring dan tanpa mengirim data saya ke mana pun?

Ya. Seluruh proses pembuatan berjalan di peramban Anda dengan JavaScript. Data JSON Anda, yang mungkin berisi nama kolom internal, struktur data, atau bentuk API proprietari, tidak pernah dikirimkan ke server mana pun. Output TypeScript dibuat dan ditampilkan secara lokal.

Bagaimana alat ini menangani objek dan array JSON bersarang?

Objek bertingkat menghasilkan antarmuka bernama yang terpisah. Contohnya, bidang bernama address yang memuat city dan zip menjadi antarmuka Address, lalu antarmuka induk merujuknya sebagai address: Address. Larik diberi tipe sebagai larik tipe elemen, misalnya string[] atau Tag[]. Larik objek dengan bentuk yang sama menghasilkan satu antarmuka yang digunakan ulang untuk setiap elemen, bukan antarmuka terpisah untuk masing-masing elemen.

Kapan saya harus menggunakan properti opsional dalam antarmuka TypeScript yang dihasilkan?

Aktifkan "Semua properti opsional" jika beberapa kolom dalam JSON mungkin tidak ada pada objek tertentu. Ini menambahkan tanda tanya setelah setiap nama properti, misalnya email?: string, sehingga TypeScript dapat menerima objek yang tidak menyertakan kolom tersebut. Secara bawaan, semua properti yang disimpulkan bersifat wajib. Jika Anda memodelkan API dengan parameter kueri opsional atau kolom yang dapat bernilai null, properti opsional mencegah kesalahan tipe.

Apa keterbatasan utama dalam menyimpulkan tipe TypeScript dari satu sampel JSON?

Seperti inferensi skema dari satu contoh lainnya, generator hanya dapat membaca hal yang terdapat dalam sampel. Bidang yang kadang berupa string dan kadang angka akan diberi tipe berdasarkan nilai yang muncul dalam sampel. Tipe gabungan seperti string | number | null tidak dibuat otomatis. Tinjau hasilnya dengan saksama dan tambahkan tipe gabungan, generik, atau tipe literal string yang lebih spesifik jika data Anda bervariasi.