JSON ke Interface TypeScript
Buat interface atau type alias TypeScript dari contoh JSON, lengkap dengan key opsional, union null, dan tipe bersarang yang disimpulkan dari array. Gratis.
Kunci yang tidak ada di sebagian item array menjadi opsional (?), nilai null menjadi "| null", dan nilai yang selalu null menjadi unknown.
Berjalan sepenuhnya di browser Anda. Data Anda tidak pernah diunggah.
Alat Terkait
Lihat SemuaApa itu JSON ke TypeScript?
Tempel contoh respons API atau konfigurasi dan dapatkan deklarasi interface (atau type) TypeScript yang siap pakai. Objek bersarang menjadi tipe terekspor tersendiri, key yang tidak ada di sebagian item array menjadi opsional, dan nilai null menjadi tipe union.
Cara menggunakan JSON ke TypeScript
- Tempel contoh JSON ke Input JSON (atau klik Muat contoh / Buka file).
- Atur Nama tipe root (bawaan
Root). - Pilih Gaya output:
interfaceatau alias type. - Salin kode TypeScript yang dihasilkan atau Unduh sebagai file.
Contoh
{"id":1,"name":"A","tags":["x"]} export interface Root {
id: number;
name: string;
tags: string[];
} Kapan menggunakan JSON ke TypeScript
Gunakan untuk memberi tipe pada respons fetch, fixture, atau file konfigurasi dengan cepat. Satu contoh tidak bisa mengungkap semua kasus: enum string, union bentuk objek, atau string tanggal tetap menjadi string biasa/tipe gabungan, jadi tinjau hasilnya dan sempurnakan, atau gunakan generator berbasis JSON Schema untuk kontrak.
Cara kerja JSON ke TypeScript
Contoh JSON ditelusuri secara rekursif dan setiap posisi mengumpulkan tipe yang pernah dilihatnya. Array berisi objek digabung menjadi satu tipe: key yang tidak ada di sebagian elemen menjadi opsional, key yang bernilai null di suatu tempat menjadi nullable, bilangan bulat yang bercampur dengan desimal menjadi tipe floating-point, dan campuran tipe lain beralih ke tipe dinamis. Objek bersarang menjadi tipe bernama sendiri (PascalCase dari key, key array disingularkan: orders → Order), dengan akhiran angka jika nama bentrok. Keluaran TypeScript memetakan bilangan bulat dan desimal ke number, string ke string, boolean ke boolean, array ke T[], nilai nullable ke T | null, dan nilai dinamis ke unknown. Key yang bukan identifier valid diberi tanda kutip ("first-name": string).
Kasus Penggunaan Umum
- Memberi tipe respons REST API sebelum menulis klien
- Membuat interface untuk file konfigurasi JSON
- Mengubah fixture pengujian menjadi objek bertipe
- Merintis tipe untuk payload webhook pihak ketiga
Pertanyaan Umum
Mengapa properti bertipe unknown?
Nilainya null di semua contoh (atau array kosong), sehingga tipe sebenarnya tidak dapat disimpulkan. Tambahkan contoh dengan nilai nyata atau ubah tipenya secara manual.
Bagaimana properti opsional dideteksi?
Ketika nilai tingkat atas atau sebuah key bersarang adalah array objek, key yang hanya ada di sebagian objek ditandai dengan ?.
Apakah menghasilkan validasi saat runtime?
Tidak, hanya menghasilkan deklarasi tipe, yang hilang saat kompilasi. Gunakan validator seperti JSON Schema jika Anda butuh pemeriksaan saat runtime.