JSON ke TypeScript: buat interface dari contoh JSON

Cara memakai

Tempel nilai JSON yang umum ke Contoh JSON. Tipenya muncul saat Anda mengetik.
Ketik nama di bawah Nama interface akar untuk objek paling luar, seperti Product.
Hilangkan centang Tulis export sebelum setiap deklarasi jika tipenya tetap di berkas yang sama.
Salin Interface TypeScript, atau unduh sebagai types.ts.

Cara tipe dihitung

Setiap objek JSON menjadi interface. Namanya berasal dari kunci yang menyimpannya, dalam PascalCase: kunci first-name menjadi FirstName. Item larik mengambil bentuk tunggal dari kunci larik, sehingga items menjadi Item. Ketika nama sudah dipakai, nama induk diletakkan di depannya.

String, angka dan boolean menjadi string, number dan boolean. null ditulis sebagai null dalam union, seperti number | null. Larik nilai menjadi tipe yang diikuti []; larik kosong menjadi unknown[] karena contoh tidak menyatakan isinya.

kunci "first-name" -> properti "first-name": string;   items -> Item[]

Beberapa contoh dalam satu larik

Daftar objek dibaca sebagai satu bentuk. Kunci yang muncul di setiap item wajib; kunci yang hilang dari sebagian item ditulis dengan tanda tanya, sebagai opsional. Kunci yang memuat tipe berbeda di item yang berbeda menjadi union, dengan string lebih dulu, lalu number, boolean, interface, larik dan null.

Contoh hanya menampilkan nilai yang dimilikinya. Kunci yang kadang dihilangkan API nyata mungkin tidak ada dalam satu contoh, jadi tambahkan item kedua yang memilikinya jika Anda ingin tipe menampilkannya sebagai opsional.

Contoh: sampel bawaan

Contoh bawaan adalah satu objek dengan lima kunci. Kunci owner memuat objek, sehingga kode memiliki interface Owner. Kunci items adalah larik dari dua objek, sehingga kode memiliki interface Item. Kunci sku dan price ada di kedua item dan wajib; kunci discount bernilai null di satu item dan angka di item lain, sehingga tipenya number | null; kunci note hanya muncul di satu item sehingga opsional.

Hasilnya memiliki tiga deklarasi: Root, Owner dan Item, dan jumlahnya menunjukkan 3.

Pertanyaan yang sering diajukan

Mengapa sebuah bidang diberi tanda tanya?

Bidang itu hilang dari setidaknya satu objek contoh. Bidang seperti itu mungkin tidak ada dalam data nyata, jadi TypeScript memperlakukannya sebagai opsional, dan kode yang membacanya harus memeriksanya terlebih dahulu.

Mengapa bidang saya menampilkan union seperti string | number?

Item yang berbeda memuat tipe yang berbeda untuk kunci itu. Tipe itu mencantumkan setiap tipe yang terlihat dalam contoh, sehingga kode harus memeriksa tipe mana yang dimilikinya sebelum memakai nilainya.

Apakah alat memeriksa data API nyata saya?

Tidak. Ia menulis tipe dari contoh yang Anda tempel. Contoh dengan satu item tidak dapat menampilkan bidang yang hanya muncul kemudian, jadi gunakan respons yang umum dengan beberapa item jika memungkinkan.

Mengapa beberapa nama properti ditulis dalam tanda kutip?

Nama yang bukan pengenal sederhana, seperti first-name atau 2fa, harus diberi tanda kutip dalam TypeScript. Nama yang merupakan pengenal yang valid ditulis tanpa tanda kutip.

Bisakah saya memakai hasilnya dengan JavaScript?

Interface hanya ada di TypeScript. Ia dihapus saat kode dikompilasi, jadi proyek JavaScript memerlukan JSON yang diperiksa dengan cara lain, atau langkah build TypeScript.

Sumber

Angka dan teks terakhir diperiksa pada Selasa, 10 November 2026.

Hasil