Apa itu JSON ke TypeScript?

JSON to TypeScript mengubah data JSON menjadi antarmuka dan definisi tipe TypeScript. Mengenali string, angka, boolean, array, dan objek bersarang, serta menandai field nullable sebagai opsional dengan union type. Hemat waktu daripada menulis tipe respons API secara manual.

Ketika array berisi objek dengan bentuk sedikit berbeda, generator menggabungkannya: kunci yang absen di sebagian record menjadi opsional dengan '?'. Tiap objek bersarang mendapat interface bernama tersendiri (User, UserAddress, UserAddressGeo). Array campuran menghasilkan tipe union seperti (string | number)[]. String tanggal berformat ISO 8601 ditandai dengan komentar JSDoc, dan field string yang hanya berisi sedikit nilai tetap berulang akan disimpulkan sebagai union literal string ketimbang string biasa. Selain keluaran TypeScript, input yang sama menghasilkan tiga tab lagi: skema Zod yang setara, data tiruan berisi nilai contoh yang realistis, dan Skema JSON draft-07. Beralih antara interface dan type alias, aktifkan kata export, urutkan kunci A→Z, dan nyalakan camelCase untuk mengubah kunci snake_case atau kebab-case menjadi nama TypeScript yang idiomatis.

Cara menggunakan

1. Langkah 1 — Tempel objek atau array JSON, seret file .json ke kotak input, atau ambil JSON langsung dari URL. Alat ini menganalisis struktur dan menyimpulkan tipe TypeScript untuk setiap field.
2. Langkah 2 — Sesuaikan output: atur nama antarmuka root, pilih antara antarmuka dan type alias, dan toggle properti opsional untuk field yang mungkin null.
3. Langkah 3 — Salin keluaran atau unduh berkasnya. Empat tab berbagi pengaturan yang sama: tipe TypeScript, skema Zod yang setara untuk validasi runtime, data tiruan siap pakai untuk tes dan Storybook, serta Skema JSON draft-07 untuk OpenAPI atau pustaka formulir. Semua objek bersarang mendapatkan antarmuka bernama secara otomatis.

Kapan menggunakan

• Memberi tipe pada respons API yang belum punya spek OpenAPI/Swagger.
• Membuat tipe cepat untuk file konfigurasi JSON (tsconfig.json, package.json) yang dibaca script.
• Memasang lapisan bertipe di atas respons SDK pihak ketiga dalam hitungan detik.

Hasil

API Anda mengembalikan objek pengguna dengan alamat dan preferensi bersarang. Tempelkan respons JSON, atur nama root ke "User", dan dapatkan antarmuka bersih: User, UserAddress, UserPreferences — dengan tipe yang benar seperti string | null untuk field opsional.

FAQ

Bagaimana generator memutuskan field mana yang opsional?

Bila input berupa objek tunggal dan opsi 'Tandai nullable sebagai opsional' aktif, field bernilai null mendapat '?'. Untuk array objek, generator menyatukan semua kunci; kunci yang absen di setidaknya satu record menjadi opsional.

Bagaimana dengan array yang elemen-elemennya berbeda bentuk?

Logikanya sama: kunci yang ada di setiap elemen tetap wajib, yang ada hanya di sebagian menjadi opsional, dan nilai dengan tipe primitif campuran berubah menjadi union seperti string | number. Hasilnya adalah satu interface yang menggambarkan seluruh array.

Sebaiknya pilih interface atau type alias?

Interface lebih mudah diperluas lewat declaration merging dan jadi pilihan biasa untuk bentuk API. Type alias lebih fleksibel ketika kamu ingin menggabungkan dengan union, intersection, atau mapped type. Saat runtime tidak ada beda; ikuti gaya codebase-mu.

Kenapa beberapa nama properti dibungkus tanda kutip di output?

Jika sebuah kunci memuat karakter yang tidak valid sebagai identifier TypeScript (tanda hubung, spasi, mulai dengan angka, titik), generator membungkusnya dengan tanda kutip. Tipenya tetap valid, dan di kode kamu mengaksesnya lewat obj["weird-key"].

Apakah tipe yang dihasilkan menangkap perubahan jika bentuk API berubah?

Ya, kalau kamu meregenerasi. Tipenya hanyalah snapshot dari JSON yang kamu tempel, tidak memperbarui diri. Alur biasa: regenerasi setiap kali versi API naik dan tinjau diff-nya saat code review.

Alat terkait