Lewati ke konten
Alat konversi

Pembuat Antarmuka dan Tipe TypeScript dari JSON

Buat antarmuka TypeScript atau alias tipe dari contoh JSON, seperti respons API. Struktur bertingkat, null, dan array campuran ditangani, dan konversi berjalan di browser Anda.

Buat tipe TypeScript bernama untuk respons API.

Converted in your browser. Null stays a value type; ? marks a field missing from some objects in an array. Empty arrays use unknown elements.

Load an example (replaces your input)

JSON

TypeScript

Kapan menggunakannya

  • Buat tipe TypeScript bernama untuk respons API.
  • Bandingkan beberapa objek dalam array untuk melihat perbedaan tipe dan kolom opsional.

Cara penggunaan

  1. Tempelkan JSON asli atau muat salah satu contoh. Memuat contoh akan mengganti masukan Anda.
  2. Atur nama tipe akar dan pilih interface (objek bertingkat menjadi tipe terpisah) atau type (satu alias tipe dengan objek bertingkat secara inline).
  3. Periksa null, kolom opsional (?), dan union string/number, lalu salin tipenya.

Masukan JSON

[{"id":1,"name":"Tokyo"},{"id":2}]

Keluaran TypeScript (Root, interface)

export type Root = RootValueItem[];

export interface RootValueItem {
  id: number;
  name?: string;
}

Detail dan batasan

Setiap elemen array diperiksa. Dalam contoh, name tidak ada pada objek kedua sehingga menjadi opsional; kolom yang ada dengan nilai null menjadi union dengan null.

Array kosong menghasilkan unknown[]. Array campuran menjadi array tipe union, bukan tuple dengan panjang tetap.

Tipe hanya mencakup yang muncul dalam contoh. Kolom yang tidak pernah muncul, format tanggal atau email, rentang nilai, dan hubungan antarkolom tidak disimpulkan.

Masukan harus berupa JSON standar; bersihkan komentar atau koma di akhir dengan pemformat JSON terlebih dahulu. Masukkan ID dengan nol di awal sebagai string.

Masukan dibatasi hingga 1.000.000 karakter, sekitar 64 tingkat, dan 50.000 nilai. Tipe TypeScript tidak memvalidasi data saat runtime.

FAQ

Sebaiknya saya membuat interface atau type?

Keduanya mendeskripsikan bentuk yang sama. interface membuat satu antarmuka bernama per objek bertingkat sehingga mudah digunakan kembali; type membuat satu alias tipe dengan objek bertingkat yang ditulis inline.

Bisakah alat ini membuat kelas TypeScript?

Tidak, alat ini hanya membuat antarmuka atau alias tipe. Jika memerlukan validasi runtime, gunakan JSON ke Zod dan sesuaikan skema dengan aturan Anda.

Apa perbedaan null dan kolom opsional?

{"name":null} memiliki name yang bernilai null; {} sama sekali tidak memiliki name. null tetap ada dalam tipe, dan ? hanya ditambahkan jika sebagian objek dalam array yang sama tidak memiliki kolom tersebut.

Apa yang dihasilkan oleh array JSON pada tingkat akar?

Alias tipe untuk array beserta antarmuka untuk itemnya, seperti contoh di atas, dengan Root berupa RootValueItem[].

Spesifikasi dan referensi