Penukar JSON ke TypeScript

Tampal respons API dan dapatkan interface atau type alias TypeScript yang sedia digunakan, dengan jenis bersarang, medan optional dan kesatuan null disimpulkan untuk anda.

Berjalan dalam pelayar andaTanpa pendaftaranTiada apa dimuat naik

TypeScript

Cara menggunakan JSON ke TypeScript

  1. Tampal contoh JSON, seperti respons API, ke dalam kotak kiri atau buka fail .json.
  2. Tetapkan nama jenis akar (contohnya User atau ApiResponse).
  3. Pilih deklarasi interface atau type dan togol export, readonly atau semua medan optional.
  4. Pilih unknown (lebih selamat) atau any untuk nilai yang tidak dapat didedahkan oleh contoh, seperti array kosong dan null.
  5. Salin kod yang dijana atau muat turunnya sebagai fail .ts.

Cara jenis disimpulkan

  • Primitif: rentetan, nombor dan boolean dipetakan kepada string, number dan boolean.
  • Objek bersarang menjadi interface bernama tersendiri dalam PascalCase, jadi billing_address menjadi BillingAddress.
  • Array objek digabungkan menjadi satu jenis item, dinamakan dalam bentuk tunggal: users memberikan User[]. Kunci yang tiada dalam sesetengah item menjadi optional (key?:).
  • Nilai null digabungkan dengan nilai lain yang dilihat untuk kunci itu: string | null. Kunci yang sentiasa null kembali kepada unknown atau any.
  • Array campuran menjadi array kesatuan seperti (number | string)[].
  • Bentuk yang sama diisytiharkan sekali dan digunakan semula, dan bentuk berbeza yang akan berkongsi nama mendapat akhiran nombor.
  • Kunci yang bukan pengecam sah, seperti "first-name" atau "2fa", diletakkan dalam petikan.

interface lwn. type

Untuk bentuk objek biasa, kedua-duanya hampir boleh ditukar ganti. Deklarasi interface boleh dilanjutkan dan digabungkan, dan memberikan ralat pengkompil yang sedikit lebih jelas. Alias type juga boleh menyatakan kesatuan dan mapped type. Banyak pasukan menggunakan interface untuk model API dan type untuk yang lain; pilih yang dijangka oleh pangkalan kod atau linter anda (@typescript-eslint/consistent-type-definitions).

Dapatkan jenis yang lebih baik daripada contoh anda

Jenis hanya boleh selengkap contohnya. Tampal respons yang merangkumi medan optional, atau array dengan beberapa item yang pelbagai, supaya penjana dapat mengesan kunci optional dan nullable. Nilai seperti tarikh dan enum tiba sebagai rentetan biasa dalam JSON; sempitkan secara manual selepas itu, contohnya status: 'active' | 'disabled'. Untuk pengesahan masa jalan, gandingkan jenis yang dijana dengan pustaka skema seperti Zod.

Soalan lazim

Adakah JSON saya dimuat naik?
Tidak. Jenis dijana oleh JavaScript dalam pelayar anda. Respons API yang mengandungi token atau data peribadi tidak pernah meninggalkan peranti anda.
Bagaimana sifat optional dikesan?
Apabila objek dalam array yang sama mempunyai kunci berbeza, kunci yang tiada dalam sekurang-kurangnya satu objek ditanda optional dengan ?. Dengan satu objek sahaja, setiap kunci diperlukan, melainkan anda menandakan Semua pilihan.
Patutkah saya guna <code>unknown</code> atau <code>any</code>?
unknown lebih selamat: TypeScript memaksa anda menyempitkan nilai sebelum menggunakannya. any mematikan semakan jenis untuk nilai itu. Gunakannya hanya jika anda bercadang memperhalusi jenis kemudian.
Mengapa tarikh ISO ditaip sebagai <code>string</code>?
JSON tiada jenis tarikh, jadi tarikh ialah rentetan semasa dihantar. Jika anda menukarnya dengan new Date() selepas penghuraian, tukar sifat itu kepada Date dalam model anda.
Bolehkah ia mengendalikan JSON yang besar atau sangat bersarang?
Ya. Penjanaan adalah linear dengan saiz input dan berjalan secara setempat, jadi respons berbilang megabait ditukar dalam masa kurang daripada sesaat.

Alat berkaitan

JSON Formatter Kemaskan, minify dan sahkan JSON dengan ralat baris/lajur. JSON Diff Banding dua objek JSON dan senaraikan perubahan mengikut laluan. YAML ke JSON Tukar konfigurasi YAML ke JSON, dengan sokongan berbilang dokumen dan ralat yang tepat. Penukar cURL Tukar arahan curl kepada kod fetch, Axios, Python, Go atau PHP.