Cara menggunakan JSON ke TypeScript
- Tempel contoh JSON yang representatif, misalnya respons yang kamu salin dari tab network browser.
- Isi nama tipe root (misalnya
UseratauApiResponse). - Pilih
interfaceatautype, sintaks array, dan apakah deklarasi perlu di-export atau properti dibuat readonly. - Salin kode hasil generate ke file
.tsatau unduh langsung.
Apa fungsi konverter JSON ke TypeScript?
Konverter ini membuat tipe statis dari data contoh. Daripada menulis interface secara manual untuk setiap respons API, kamu cukup menempelkan satu respons asli dan mendapatkan deklarasi TypeScript yang sesuai: satu interface bernama untuk setiap objek bersarang, array yang bertipe, serta union type jika nilainya berbeda-beda. Ini cara tercepat untuk mendapatkan autocomplete dan pengecekan tipe saat kompilasi untuk data dari REST API, webhook, atau file konfigurasi JSON.
Cara tipe disimpulkan
| Nilai JSON | Tipe TypeScript |
|---|---|
"teks" | string |
42, 3.14 | number |
true | boolean |
null | null (digabung dengan tipe lain, misalnya string | null) |
{ … } | Interface bernama (key profile → Profile) |
["a", "b"] | string[] |
[1, "dua"] | (number | string)[] |
[] | unknown[] (tidak ada contoh untuk disimpulkan) |
Array berisi objek akan digabung
Jika sebuah array berisi beberapa objek, generator akan menggabungkannya menjadi satu interface, bukan hanya mengambil item pertama. Key yang muncul di sebagian item saja akan menjadi opsional (archived?: boolean), dan key yang nilainya berbeda antar item akan mendapat union type (license: string | null). Nama interface item array diambil dari bentuk tunggal key-nya, misalnya repos → Repo dan categories → Category. Struktur yang sama di tempat berbeda hanya dideklarasikan sekali dan dipakai ulang.
interface vs. type
Untuk bentuk objek, keduanya hampir bisa saling menggantikan. Deklarasi interface bisa diperluas dengan extends dan digabung dengan mendeklarasikan ulang, serta biasanya menghasilkan pesan error yang lebih jelas. Alias type bisa dipakai untuk union, tuple, dan mapped type. Banyak tim menggunakan interface untuk model data, tapi pilih yang sesuai dengan aturan lint kamu (misalnya @typescript-eslint/consistent-type-definitions).
Batasan penyimpulan tipe, periksa hasilnya
Contoh hanya menunjukkan apa yang ada di dalamnya. Field yang bernilai null di contoh akan bertipe null, jadi ubah ke tipe aslinya (misalnya string | null). Tanggal biasanya berupa string ISO dan akan bertipe string, karena JSON tidak punya tipe date. Key yang bukan identifier valid, seperti social-links, otomatis diberi tanda kutip. Untuk validasi runtime pada input yang tidak tepercaya, gabungkan tipe ini dengan schema validator seperti Zod. Rapikan dulu contohmu dengan JSON Formatter, atau konversi konfigurasi YAML dengan YAML ke JSON sebelum membuat tipenya.
Juga dicari sebagai: json ke interface, generator interface typescript, json2ts, json ke type typescript, generate type dari json, konversi json ke ts.
Tool yang cocok dipakai bersama JSON ke TypeScript
- CSV ke JSON — Tempel CSV atau TSV dan dapatkan array JSON berisi objek.
- SVG ke JSX Converter — Tempel SVG dari Figma, Illustrator, atau kumpulan ikon, lalu dapatkan komponen React (JSX atau TSX) yang siap pakai, lengkap dengan pratinjau ikon yang aman.
- cURL ke Code — Tempel perintah curl dari dokumentasi API atau “Copy as cURL” di DevTools browser, lalu dapatkan kode siap pakai untuk enam bahasa, dengan header, body, dan autentikasi yang ikut terbawa.
- Validator JSON Schema — Tempel schema dan JSON untuk melihat nilai mana yang melanggar aturan, atau buat schema awal dari data contoh.
Pertanyaan yang sering diajukan
Sebaiknya pakai interface atau type untuk data JSON?
extends, sedangkan type alias juga mendukung union dan mapped type. Pilih yang sesuai dengan style guide codebase kamu. Toggle akan mengubah seluruh output.Bagaimana properti opsional dideteksi?
?. Kamu juga bisa membuat semua properti nullable menjadi opsional dengan centang di bawah output.Kenapa sebuah properti bertipe null?
null di setiap contoh tempat properti itu muncul, sehingga tidak ada informasi tentang tipe aslinya. Ganti null dengan tipe yang diharapkan, misalnya string | null, atau tempel contoh yang nilainya sudah terisi.