JSON ke TypeScript

Ubah JSON menjadi TypeScript dalam satu klik

Converter JSON ke TypeScript ini membuat interface, type atau class siap pakai dari sampel JSON, sehingga Anda tidak perlu lagi menulis tipe secara manual untuk setiap respons API. Tempel payload di sebelah kiri dan TypeScript yang rapi serta terindentasi benar langsung muncul di sebelah kanan — salin, atau unduh sebagai file .ts.

Ini adalah alternatif cepat, gratis, dan tanpa daftar untuk menyiapkan code generator: satu langkah JSON to TypeScript interface yang berjalan sepenuhnya di browser Anda, dengan objek bersarang, array, dan union semuanya terdeteksi otomatis. Tanpa batas ukuran file, tanpa batas penggunaan harian, dan tidak ada yang pernah meninggalkan perangkat Anda.

Interface, type, atau class — pilihan Anda

Gunakan toggle output untuk beralih antara interface, alias type, atau class. Mode interface adalah default dan menghasilkan export interface Root { … }; mode type menghasilkan export type Root = { … } untuk basis kode yang lebih memilih alias; dan mode class mendeklarasikan field pada export class. JSON yang sama menggerakkan ketiganya, jadi Anda bisa membandingkannya pada data Anda sendiri dalam hitungan detik.

Anda bisa mengganti nama root, mengaktifkan atau menonaktifkan keyword export, dan pilihan itu diingat untuk lain waktu — menjadikan ini generator tipe TypeScript yang fleksibel, bukan sekadar converter satu bentuk. quicktype.io juga mendukung ini, tapi mengharuskan Anda menjalankan ulang seluruh konversi setiap kali mengubah opsi.

Deteksi cerdas untuk objek bersarang, array, dan union

Mesinnya menelusuri JSON Anda dan membangun interface bernama untuk setiap objek, menamai interface bersarang dari key-nya dan menyingularkan elemen array — array orders menjadi Order[]. Bentuk yang identik digabungkan menjadi satu interface, dan array dengan tipe campuran diringkas menjadi union seperti (string | number)[].

Aktifkan deteksi enum dan nilai string yang berulang terdeteksi sebagai union literal — kolom status berisi "shipped" dan "pending" menjadi "pending" | "shipped" alih-alih string biasa. Presisi itulah yang membuat output terasa seperti ditulis tangan, dan itu yang membedakan tool ini dari converter sederhana yang selalu menghasilkan string untuk field string apa pun isinya.

Field optional, null, dan readonly yang ditangani dengan benar

Data API sungguhan itu berantakan, jadi converter ini menanganinya secara jujur. Saat Anda mengonversi respons API ke TypeScript, key yang hanya muncul di sebagian item array ditandai optional dengan ?, dan Anda memutuskan bagaimana null ditipekan: pertahankan sebagai union eksplisit | null, atau aktifkan null → optional untuk mengubah zip: string | null menjadi zip?: string.

Toggle readonly menambahkan prefix modifier readonly ke setiap properti untuk model yang immutable. Bersama-sama, opsi ini memungkinkan Anda menyesuaikan tingkat ketegasan proyek Anda alih-alih berjuang melawan tipe TypeScript dari JSON yang dihasilkan. Sebagian besar tool pesaing menghilangkan satu atau lebih opsi ini, memaksa developer melakukan koreksi manual setelah generate.

Bagaimana ini dibandingkan dengan quicktype, json2ts, dan MakeTypes

quicktype.io adalah opsi paling lengkap untuk generate multi-bahasa — ia menargetkan Python, Go, C#, Kotlin, dan banyak bahasa lain selain TypeScript. Keluasan itu berarti outputnya kadang menyertakan helper runtime quicktype dan boilerplate ekstra yang perlu Anda hapus untuk file tipe yang bersih. Ia juga memproses JSON Anda di server mereka, yang penting untuk payload rahasia. json2ts.com lebih sederhana dan menghasilkan interface polos tapi tidak punya deteksi enum, dukungan readonly, dan opsi penanganan null yang dibutuhkan proyek produksi.

MakeTypes menghasilkan class TypeScript dengan parsing runtime, yang berguna jika Anda ingin validasi bawaan tapi menambah overhead kode signifikan. Converter UtiloKit ini menghasilkan tipe murni tanpa jejak runtime — hanya interface atau type alias yang dibutuhkan kode Anda, berjalan sepenuhnya di browser tanpa upload server dan tanpa akun. Untuk pekerjaan API sehari-hari di mana Anda butuh tipe cepat dan bersih, itu adalah trade-off yang tepat.

Privat by design — JSON Anda tidak pernah meninggalkan browser

Setiap konversi terjadi secara lokal memakai JavaScript di tab Anda. JSON Anda tidak pernah diunggah ke server, disimpan, atau dibagikan — tool ini bekerja offline dan aman untuk payload rahasia, API internal, dan data produksi. Simpan bookmark json to typescript converter ini dan gunakan kapan pun Anda butuh tipe dari sampel, cepat dan gratis.

Parser yang toleran bahkan menerima input mirip-JSON dengan // komentar, koma di akhir, dan string berpetik tunggal, sehingga Anda bisa menempel object literal JavaScript langsung dari editor Anda dan tetap mendapat output yang valid. Tidak ada langkah lain yang dibutuhkan.

Bagaimana TypeScript menyimpulkan tipe dari nilai JSON

Model inferensi tipe TypeScript memetakan setiap primitif JSON ke tipe bawaan TypeScript: string berpetik menjadi string, angka menjadi number, true atau false menjadi boolean, dan null menjadi null (atau string | null ketika key tersebut juga membawa nilai string di item array lain). undefined tidak pernah muncul dalam JSON yang valid, jadi ia hanya masuk gambaran ketika sebuah key tidak ada di sebagian objek dalam array — pada titik itu properti diperluas menjadi T | undefined dan ditandai optional dengan ?.

Array layak mendapat perhatian khusus. Array homogen seperti [1, 2, 3] menghasilkan number[], sementara array campuran seperti [1, "a"] diringkas menjadi tipe union (string | number)[]. Array of objects digabungkan: semua key dari semua elemen dikumpulkan, key yang hilang dari sebagian elemen menjadi optional, dan bentuk gabungan tersebut dihasilkan sebagai satu interface bernama — Order[] alih-alih tipe anonim inline. Penggabungan struktural inilah yang membedakan generator tipe dari converter baris-demi-baris yang naif.

Satu catatan penting: yang dihasilkan tool ini adalah potret struktural dari satu sampel payload. Compiler TypeScript memercayai bentuk yang Anda deklarasikan; ia tidak bisa tahu bahwa API yang berjalan kadang menghilangkan sebuah field, mengirimnya sebagai tipe berbeda dalam respons error, atau menambah field baru di versi API mendatang. Perlakukan interface yang dihasilkan sebagai titik awal dan perkuat dengan modifier optional serta tipe union di mana pun dokumentasi API Anda mendeskripsikan variasi.

Utility type TypeScript untuk memperketat interface API

Pustaka standar TypeScript menyediakan sekumpulan mapped utility type yang memungkinkan Anda menurunkan tipe baru dari interface yang dihasilkan tanpa menduplikasi kode. Partial<T> membuat setiap properti optional — ideal sebagai tipe body untuk endpoint PATCH di mana hanya field yang berubah yang dikirim. Required<T> melakukan kebalikannya, menghapus semua modifier ?, yang berguna untuk menegaskan bahwa respons server yang sudah terhidrasi penuh selalu membawa setiap field. Readonly<T> menambahkan modifier readonly ke setiap properti pada level tipe, mencegah mutasi data API yang tidak disengaja dalam state aplikasi.

Pick<T, K> dan Omit<T, K> memungkinkan Anda mengambil subset dari interface yang dihasilkan. Misalnya, jika server mengembalikan interface User yang besar tapi sebuah form hanya peduli pada name dan email, Pick<User, 'name' | 'email'> membuat tipe presisi tanpa menyentuh interface asli. Sebaliknya, Omit<User, 'passwordHash'> menghapus field sensitif dari tipe yang dipublikasikan. Record<K, V> mencakup objek JSON berbentuk dictionary di mana key-nya dinamis — respons seperti { "en": "Hello", "fr": "Bonjour" } paling baik ditipekan sebagai Record<string, string> alih-alih interface literal dengan key tetap.

Utility ini bergabung mulus dengan interface yang dihasilkan. Buat bentuk dasarnya sekali dengan tool ini, impor, lalu turunkan varian yang dibutuhkan aplikasi Anda memakai Partial, Pick, dan Omit alih-alih copy-paste dan mengedit interface. Dengan begitu satu interface sumber kebenaran tetap sinkron dengan API sementara subtipe permintaan dan respons khusus diturunkan secara otomatis.

Nullable vs optional: kapan pakai string | null vs string?

Dua konsep berbeda sering tercampur ketika mentipekan respons API: nullable dan optional. Field bertipe string | null memberi tahu TypeScript bahwa key selalu ada dalam JSON, tapi server boleh secara eksplisit mengirim null sebagai nilainya — misalnya, timestamp deletedAt bernilai null sampai record dihapus, lalu membawa string tanggal. Field bertipe string | undefined, atau ditulis sebagai field?: string dalam interface, memberi tahu TypeScript bahwa key tersebut mungkin tidak muncul sama sekali dalam JSON. Kedua hal ini berbeda secara struktural: { deletedAt: null } dan {} keduanya memenuhi deletedAt?: string | null, tapi hanya yang pertama memenuhi deletedAt: string | null.

Respons API sungguhan sering pantas mendapat kedua modifier sekaligus: coupon?: string | null. Server mungkin menghilangkan field pada respons list yang ringan (undefined) tapi mengirimnya sebagai null pada respons detail ketika tidak ada kupon. Meratakan ini menjadi sekadar string menyebabkan error runtime ketika Anda mencoba memanggil .toUpperCase() pada null; meratakannya menjadi sekadar string? menghilangkan perbedaan antara server secara eksplisit menandakan ketiadaan versus field yang benar-benar hilang. Utility type NonNullable<T> adalah kebalikannya: ia menghapus null dan undefined dari union — NonNullable<string | null | undefined> menghasilkan string — berguna ketika Anda sudah melakukan pengecekan null dan ingin mempersempit tipe untuk kode di hilir.

Toggle penanganan null di converter ini memungkinkan Anda memutuskan konvensi mana yang cocok dengan basis kode Anda: pertahankan union | null eksplisit untuk presisi maksimal, atau ratakan null menjadi optional ? untuk gaya yang lebih ringkas. Tidak ada yang universal benar — pilihan yang tepat bergantung pada apakah basis kode Anda membedakan antara field yang hilang dan field yang secara eksplisit di-null-kan, serta apakah dokumentasi API Anda mendefinisikan perbedaan itu dengan jelas.

Validasi runtime dengan Zod — karena tipe TypeScript hilang saat runtime

TypeScript adalah tool compile-time. Ketika compiler TypeScript mentranspilasi kode Anda menjadi JavaScript, setiap interface, type alias, dan parameter generic dihapus — tidak satu pun ada saat runtime. Ini berarti interface yang tipenya benar tidak bisa menangkap API yang mengembalikan bentuk tak terduga saat runtime: jika interface User Anda mengharapkan id: number tapi server mengirim id: "abc", pemeriksa tipe TypeScript menerima deklarasi tersebut tapi program yang berjalan menerima nilai yang salah tanpa error apa pun.

Zod adalah solusi paling populer untuk celah ini. Schema Zod seperti z.object({ id: z.number(), name: z.string() }).parse(response) memvalidasi nilai runtime sebenarnya dan melempar error detail jika bentuknya tidak cocok — dan secara bersamaan ia menyimpulkan tipe TypeScript lewat z.infer<typeof schema>, sehingga Anda mendapat keamanan runtime maupun compile-time dari satu sumber kebenaran. Polanya adalah: buat interface awal dari sampel JSON dengan tool ini, lalu tulis ulang sebagai schema Zod untuk pemakaian produksi. io-ts menawarkan jaminan runtime-plus-tipe yang sama dengan gaya pemrograman fungsional yang dibangun di atas tipe aljabar, dan lebih disukai di basis kode yang sudah memakai fp-ts.

Untuk proyek yang sudah punya JSON Schema atau spesifikasi OpenAPI, tool pendamping json-schema-to-zod dan openapi-typescript bisa menghasilkan schema Zod atau tipe TypeScript langsung dari spek tersebut alih-alih dari payload sampel. Itu memberi Anda tipe yang mengikuti kontrak resmi alih-alih satu contoh yang diamati. Gunakan tool JSON-ke-TypeScript ini untuk prototyping cepat dan generate tipe sekali pakai; beralih ke tooling berbasis spek — openapi-typescript untuk REST, graphql-code-generator untuk GraphQL, atau tipe bawaan Prisma untuk model database — ketika Anda memiliki atau punya akses ke spesifikasi API lengkap.