JSON ke TypeScript

Unggah

Antarmuka TypeScript

Masukkan JSON di sebelah kiri untuk memulai konversi

Siap

Alat online gratis JSON ke TypeScript. Menginferensi tipe data JSON secara otomatis menjadi definisi tipe interface TS standar. Mendukung sub-interface bersarang, tipe union array, bidang opsional dan readonly, pilihan indentasi 2/4 spasi, pemrosesan sepenuhnya lokal di browser tanpa unggahan.

Rekomendasi Terkait

Konverter SQL

Pemformat JSON

JSON ke CSV

JSON → YAML

Kueri JSONPath

Alat Pemformat SQL

Tentang JSON ke TypeScript: Mengubah Data JSON Secara Otomatis menjadi Tipe TS

JSON ke TypeScript adalah proses mengubah data dalam format JSON (objek JSON atau array JSON) menjadi deklarasi tipe interface TypeScript. JSON (JavaScript Object Notation) sebagai format data standar untuk REST API, file konfigurasi, dan log ada di mana-mana dalam pengembangan frontend dan backend, sedangkan TypeScript adalah superset JavaScript, menambahkan pemeriksaan tipe statis ke kode. Dalam pengembangan, sering kali perlu menulis interface TS yang sesuai untuk JSON yang dikembalikan API, penulisan manual rentan terhadap kesalahan dan memakan waktu - alat ini bertujuan untuk mengotomatisasi proses tersebut.

Inti dari alat ini adalah secara otomatis menginferensi struktur objek JSON menjadi interface TypeScript. Setiap key objek JSON menjadi nama properti interface, setiap tipe literal value dipetakan ke tipe TS yang sesuai: string ke `string`, number ke `number`, boolean ke `boolean`, null ke `null`, array ke `T[]`, objek bersarang ke sub-interface independen. Seluruh proses selesai secara lokal di browser, tanpa memerlukan layanan backend, menghasilkan definisi tipe yang lengkap dan dapat digunakan dalam beberapa detik.

Inferensi tipe adalah inti dari konversi JSON ke TypeScript. JSON sendiri hanya memiliki 6 tipe dasar (null, boolean, number, string, array, object), sedangkan sistem tipe dasar TypeScript mencakup string, number, boolean, null, undefined, any, unknown, void, never, object, Array, T[], tipe union (A | B), dll. Fungsi getTsType alat kami memetakan berdasarkan typeof dan bentuk spesifik value: typeof null dipetakan ke `null`; typeof undefined dipetakan ke `undefined`; typeof boolean dipetakan ke `boolean`; typeof number dipetakan ke `number`; typeof string dipetakan ke `string`; ketika Array.isArray() cocok, diperlakukan sebagai array.

Penanganan objek bersarang adalah kemampuan penting dari alat. Ketika JSON berisi objek bersarang, alat secara rekursif menghasilkan sub-interface independen, menghindari duplikasi tipe. Misalnya `address: { street, city }` akan menghasilkan sub-interface `RootAddress`, dan interface utama akan merujuknya melalui `address: RootAddress`. Aturan penamaan sub-interface: "nama interface induk + huruf pertama nama bidang huruf besar", mempertahankan kejelasan semantik. Set processedTypes digunakan untuk deduplikasi, objek bersarang dengan struktur yang sama hanya menghasilkan interface satu kali.

Inferensi tipe array memiliki tiga mode pemrosesan. Pertama, ketika array kosong, dihasilkan `any[]` sebagai fallback (karena tipe elemen tidak dapat diinferensi). Kedua, ketika semua elemen memiliki tipe yang sama, dihasilkan bentuk `T[]` (mis. `string[]`, `User[]`). Ketiga, ketika tipe elemen tidak konsisten, dihasilkan array union `(A | B)[]` (mis. `(string | number)[]`). Pembedaan ini membuat tipe yang dihasilkan akurat dan mudah dibaca, menghindari penggunaan `any[]` yang berlebihan.

Bidang opsional (?) adalah fitur penting dari mode TypeScript strict. Saat diaktifkan, alat memindai nilai setiap bidang, dan jika null atau undefined, menambahkan pengubah `?` di interface: `name?: string` menunjukkan bahwa bidang tersebut dapat dihilangkan. Ini sangat berguna untuk bidang opsional yang dikembalikan oleh API backend, menghindari kesalahan runtime saat mengakses bidang undefined. Bidang readonly menekankan ketidakubahan, kode yang dihasilkan berbentuk `readonly id: number`, cocok untuk mendefinisikan konfigurasi, snapshot status, DTO, dll.

interface vs type alias adalah pilihan umum bagi pengguna TypeScript. Alat ini memilih untuk menghasilkan interface secara konsisten, karena interface adalah cara standar untuk mendeskripsikan tipe objek di TypeScript, mendukung penggabungan deklarasi (declaration merging), kata kunci implements, pewarisan extends, lebih sesuai dengan standar pengkodean proyek frontend utama React, Vue, Angular. type alias lebih kuat dalam mendeskripsikan tipe union, tipe persilangan, tipe fungsi, tetapi untuk tipe objek, interface lebih disukai.

Konversi waktu nyata adalah fitur praktis dari alat. Setelah pengguna memasukkan JSON, debounce 400ms secara otomatis memicu konversi, tanpa perlu mengklik tombol secara manual. Dikombinasikan dengan penyorotan sintaks TypeScript CodeMirror (melalui opsi typescript: true di @codemirror/lang-javascript), pengguna dapat langsung melihat interface yang dihasilkan, memodifikasi input dan mengamati perubahan output. Umpan balik waktu nyata ini secara signifikan meningkatkan efisiensi desain tipe, terutama saat coba-coba cepat.

Perbaikan otomatis kesalahan JSON meningkatkan ketahanan alat. Dalam praktiknya, JSON yang dimasukkan pengguna sering memiliki koma di akhir, tanda kutip tunggal, tanda kutip yang hilang, komentar, dan masalah kecil lainnya. Fungsi tryFixJSON bawaan secara otomatis mencoba memperbaiki kesalahan umum ketika JSON.parse gagal, memberi tahu pengguna jika perbaikan berhasil; jika masih tidak dapat diurai, lokasi dan penyebab kesalahan spesifik ditampilkan di sisi kanan, memandu pengguna untuk mengoreksi. Desain ini membawa kegunaan alat ke tingkat berikutnya, menghilangkan kebutuhan untuk penyesuaian manual berulang karena kesalahan kecil.

Pemrosesan murni frontend adalah arsitektur inti dari alat ini. Semua penguraian JSON, inferensi tipe, pembuatan interface dijalankan di JavaScript browser, tanpa mengirim data apa pun ke server mana pun. Desain ini memiliki dua manfaat inti: pertama, konten JSON mungkin berisi informasi sensitif pengguna (kunci API, token, data pengguna), pemrosesan lokal sepenuhnya menghilangkan risiko kebocoran; kedua, kecepatan konversi hanya dibatasi oleh CPU perangkat, JSON di bawah 1MB dikonversi hampir secara instan, tanpa menunggu round-trip jaringan. Dibandingkan dengan beberapa layanan online yang memerlukan registrasi dan login, ini memberikan perlindungan privasi dan kinerja yang lebih baik.

Kasus penggunaan

Dalam pengembangan frontend, dengan cepat mengonversi respons JSON dari REST API atau GraphQL ke interface TS, menghindari penulisan definisi tipe secara manual.
Ketika proyek React/Vue/Angular membutuhkan deklarasi tipe untuk Props, State, parameter komponen, buat dalam beberapa detik dari JSON sampel.
Dalam proyek TypeScript full-stack, ketika frontend dan backend berbagi definisi tipe, mock JSON backend dapat berfungsi sebagai sumber tipe untuk frontend.
Saat mengintegrasikan dengan API pihak ketiga (pengiriman, cuaca, pembayaran, dll.), dengan cepat menghasilkan interface TypeScript yang sesuai, menghilangkan kebutuhan untuk mempelajari dokumentasi.
Inferensi mundur definisi tipe dari data mock, test fixture, file konfigurasi JSON untuk memperkuat keamanan tipe dan petunjuk IDE.
Mengonversi JSON Schema yang diekspor dari ORM basis data ke interface TypeScript untuk diintegrasikan ke dalam definisi DTO backend Node.js.
Saat mempelajari TypeScript, mengonversi JSON yang ada menjadi contoh interface untuk memahami sintaks tipe bersarang, tipe union, bidang opsional.
Saat memfaktorkan ulang kode, mengonversi literal objek JS yang tersebar menjadi interface formal, meningkatkan keterbacaan kode dan keamanan tipe.

Cara Penggunaan

Tempel konten JSON ke kotak input kiri, atau klik tombol "Unggah" untuk memilih file .json/.txt, atau klik "Sampel" untuk memuat sampel bawaan.
Klik tombol nama interface di sisi kanan toolbar (atau ikon gerigi), sesuaikan nama interface root (default Root), aktifkan bidang opsional/readonly.
Alat akan secara otomatis mengonversi (debounce 400ms setelah input); periksa kode interface TypeScript yang dihasilkan di sisi kanan, penyorotan CodeMirror memudahkan pembacaan.
Pilih gaya indentasi (2 atau 4 spasi), sesuaikan lebar panel kiri/kanan toolbar untuk pengalaman tampilan yang optimal.
Klik "Salin" untuk menyalin kode TS ke clipboard, atau "Unduh" untuk menyimpan sebagai file `${interfaceName}.ts` (mis. User.ts).
Tempel kode ke direktori `types/` atau `src/types/` proyek Anda, gunakan melalui import sesuai kebutuhan.

Fitur

Inferensi tipe cerdas: secara otomatis mengenali tipe null, boolean, number, string, array, object, dll. dan memetakannya ke sintaks TS asli.
Ekspansi otomatis objek bersarang: secara otomatis membuat sub-interface independen untuk objek bersarang (mis. RootAddress), mempertahankan hierarki tipe yang jelas dan menghindari redundansi.
Penanganan cerdas tipe array: menghasilkan `T[]` untuk elemen tipe yang sama, array union `(A | B)[]` untuk tipe campuran, `any[]` fallback untuk array kosong.
Penandaan bidang opsional: saat diaktifkan, secara otomatis mendeteksi bidang null/undefined, menambahkan pengubah `?`, menghasilkan kode yang sesuai dengan mode TypeScript strict.
Dukungan bidang readonly: saat diaktifkan, menambahkan pengubah `readonly` ke semua bidang, cocok untuk status tidak dapat diubah, konfigurasi, DTO, dll.
Kustomisasi nama interface: nama interface root dapat dikonfigurasi (default Root), nama file yang diunduh juga menggunakan nama ini (mis. User.ts).
Indentasi 2/4 spasi dapat dipilih: beralih dengan satu klik di toolbar antara gaya 2 spasi (default ESLint) dan 4 spasi.
Konversi otomatis waktu nyata: setelah 400ms dari input JSON, debounce dan konversi otomatis terjadi, tanpa mengklik tombol; mendukung tempel, unggah file, sampel - tiga cara input.
Perbaikan otomatis kesalahan JSON: fungsi perbaikan tryFixJSON bawaan, secara otomatis menangani koma di akhir, tanda kutip tunggal, tanda kutip yang hilang, dan kesalahan sintaks umum lainnya.
Penyorotan kode TypeScript: output kanan menggunakan penyorotan CodeMirror + JavaScript (TypeScript), dengan keterbacaan tinggi.
Salin dan unduh: salin ke clipboard dengan satu klik atau unduh sebagai file .ts standar untuk digunakan langsung di proyek frontend.
Pemrosesan sepenuhnya lokal di browser: semua penguraian JSON, inferensi tipe, pembuatan interface dilakukan di JavaScript browser, data asli tidak diunggah.

Pertanyaan Umum

Bagaimana cara mengonversi JSON ke interface TypeScript?

Tempel konten JSON ke kotak input kiri, alat akan secara otomatis menginferensi tipe setiap bidang (string, number, boolean, array, object, dll.) dan menghasilkan definisi interface TypeScript standar. Objek bersarang akan secara otomatis membuat sub-interface, mempertahankan hierarki tipe yang jelas. Konversi otomatis terjadi setelah 400ms dari input, tanpa perlu mengklik tombol.

Apakah pembuatan type alias atau interface didukung?

Alat ini hanya menghasilkan deklarasi interface TypeScript (type alias tidak didukung). interface adalah cara standar untuk mendeskripsikan tipe objek di TypeScript, mendukung penggabungan deklarasi (declaration merging) dan kata kunci implements, yang lebih disukai dalam proyek frontend React, Vue, Angular.

Bagaimana cara menandai bidang opsional?

Setelah mengaktifkan "Bidang opsional (?)" di pengaturan, alat akan secara otomatis mendeteksi bidang dengan nilai null atau undefined dan menambahkan pengubah `?` di interface. Misalnya `name?: string` menunjukkan bahwa bidang tersebut dapat dihilangkan. Kode yang dihasilkan sesuai dengan spesifikasi mode ketat TypeScript strict.

Bagaimana cara menghasilkan bidang readonly?

Setelah mengaktifkan "Bidang readonly" di pengaturan, semua bidang akan secara otomatis mendapatkan pengubah `readonly`, misalnya `readonly id: number`. Interface yang dihasilkan menekankan ketidakubahan, cocok untuk mendefinisikan konfigurasi, snapshot status, atau DTO.

Bagaimana tipe array ditangani?

Alat menganalisis tipe elemen array. Jika semua elemen memiliki tipe yang sama, dihasilkan bentuk `T[]` (mis. `string[]`); jika tipenya berbeda, dihasilkan array union `(A | B)[]` (mis. `(string | number)[]`); jika array kosong, dihasilkan `any[]` sebagai fallback.

Apakah objek bersarang menghasilkan banyak interface?

Ya. Setiap objek bersarang menghasilkan sub-interface independen, aturan penamaan: "nama interface induk + huruf pertama nama bidang huruf besar". Misalnya jika Root berisi objek address, kedua interface Root dan RootAddress akan dihasilkan. Sub-interface secara otomatis saling merujuk, menghindari duplikasi definisi tipe.

Apakah nama interface dapat disesuaikan?

Ya. Dengan mengklik tombol nama interface di sisi kanan toolbar (atau di pengaturan), Anda dapat menyesuaikan nama interface root (default Root). File .ts yang diunduh juga akan dinamai sesuai dengan nama ini (mis. `User.ts`). Nama sub-interface dihasilkan secara otomatis berdasarkan nama root.

Apakah file .ts yang diunduh dapat digunakan langsung di proyek?

Ya. Kode yang dihasilkan sesuai dengan standar pengkodean TypeScript, berisi definisi tipe lengkap, interface bersarang, inferensi tipe union, dll., dan dapat langsung disalin ke proyek React, Vue, Angular, atau Node.js. Nama file yang diunduh adalah `${interfaceName}.ts`, misalnya User.ts.

Bagaimana jika penguraian JSON gagal?

Jika JSON memiliki kesalahan umum seperti koma di akhir, tanda kutip yang hilang, tanda kutip tunggal menggantikan tanda kutip ganda, alat akan secara otomatis memanggil tryFixJSON untuk mencoba perbaikan. Jika perbaikan berhasil, pengguna akan diberi tahu; jika tidak dapat diperbaiki, lokasi dan penyebab kesalahan spesifik akan ditampilkan di sisi kanan. Anda dapat memformat ulang dengan indentasi 2/4 spasi dan mencoba lagi.

Struktur data JSON apa yang didukung?

Mendukung semua struktur data JSON yang valid: tipe dasar (null, boolean, number, string), array (satu atau multidimensi), objek bersarang (kedalaman berapa pun), array tipe campuran (menghasilkan tipe union). Input yang tidak didukung: JSON yang berisi fungsi, Symbol, undefined, dan nilai khusus JavaScript lainnya (ini bukan JSON yang valid).

Bisakah jumlah spasi indentasi dipilih?

Ya. Ada dropdown pengaturan indentasi di sisi kanan toolbar, mendukung dua gaya: 2 spasi dan 4 spasi. 2 spasi adalah gaya default ESLint/Prettier, 4 spasi cocok untuk proyek yang membutuhkan indentasi lebih longgar. Kode yang dihasilkan mempertahankan indentasi yang konsisten untuk keterbacaan dan pemeliharaan.

Apa bedanya dengan JSON Schema, Zod, dan pustaka tipe lainnya?

JSON Schema cocok untuk validasi data runtime (batas API, validasi input pengguna); Zod/yup adalah pustaka validasi runtime yang ramah TypeScript, dapat menghasilkan tipe TS dari schema; alat kami adalah generator definisi tipe murni yang ringan, tidak melakukan validasi runtime, berfokus pada skenario definisi tipe statis frontend, lebih cepat dan tanpa dependensi.

Pemecahan Masalah

Bagaimana jika interface yang dihasilkan tidak benar?

Penyebab umum: penguraian JSON gagal, kesalahan pengenalan objek bersarang, kesalahan inferensi tipe array. Solusi: 1) Periksa apakah JSON valid (gunakan alat pemformatan JSON); 2) Untuk objek bersarang, konfirmasi hubungan referensi sub-interface; 3) Untuk array, konfirmasi apakah tipe elemen konsisten; 4) Buat ulang atau sesuaikan kode yang dihasilkan secara manual. Interface yang dihasilkan adalah draf, detail perlu disesuaikan dengan API proyek yang sebenarnya.

File .ts yang diunduh menyebabkan kesalahan kompilasi di proyek?

Kemungkinan penyebab: 1) tsconfig.json tidak mengaktifkan mode strict tetapi bidang readonly dihasilkan; 2) Nama interface bentrok dengan tipe lain di proyek; 3) Nama bidang adalah kata kunci TypeScript (mis. `class`, `type`). Solusi: sesuaikan pengaturan strict di tsconfig, ubah nama interface, tambahkan escape tanda kutip untuk bidang yang bentrok (mis. `"class": string`).

JSON berisi array bersarang, inferensi tipe tidak benar?

Alat ini memproses array multidimensi (mis. `[[1, 2], [3, 4]]`) secara rekursif, akhirnya menghasilkan `number[][]`. Jika tipe elemen array bersarang tidak konsisten, alat akan menghasilkan bentuk `((A | B)[])[]`. Array kosong selalu menghasilkan `any[]`, karena tipe elemen tidak dapat diinferensi.

Nilai null dipetakan ke tipe `null` alih-alih bidang opsional?

Secara default, alat memetakan nilai null dalam JSON ke tipe `null` di TS (mis. `middleName: null`). Jika Anda ingin menghasilkan bidang opsional (`middleName?: string`), Anda perlu: 1) Aktifkan opsi "Bidang opsional" (disarankan); 2) Atau ubah nilai null dalam JSON menjadi bidang yang hilang; 3) Atau setelah dihasilkan, ubah `null` secara manual menjadi `string | null` atau `?`.

Nama interface dan nama file unduhan tidak cocok?

Dalam alat, keduanya adalah nilai yang sama, dikontrol oleh pengaturan "nama interface" (default Root). Nama file unduhan adalah `${interfaceName}.ts`. Jika tampak tidak konsisten, periksa apakah ada beberapa tab terbuka yang menyebabkan pengaturan tidak sinkron. Disarankan untuk membuat ulang setelah mengubah pengaturan.

Kode yang dihasilkan memiliki banyak tipe `any`?

Kemungkinan penyebab: 1) JSON berisi tipe yang tidak dikenali (sebenarnya objek tetapi diurai dengan kesalahan); 2) Array kosong menyebabkan fallback any[]; 3) Nilai bidang null dan opsi bidang opsional tidak diaktifkan. Solusi: periksa integritas data JSON, tambahkan data sampel untuk meningkatkan inferensi alat, tentukan tipe secara manual untuk array yang selalu kosong (mis. `User[]`).

Ingin menggabungkan interface yang dihasilkan dengan tipe yang ada?

TypeScript interface mendukung penggabungan deklarasi (declaration merging), interface dengan nama yang sama secara otomatis menggabungkan propertinya. Cukup buat interface dengan nama yang sama di proyek dan export, lalu gabungkan: misalnya alat menghasilkan `export interface User { id: number }`, Anda menulis `export interface User { name: string }` di proyek, keduanya akan otomatis digabung menjadi `{ id: number; name: string }`.

Glosarium

JSON (JavaScript Object Notation): Format pertukaran data ringan, berdasarkan sintaks objek JavaScript tetapi independen dari bahasa pemrograman. Mendukung 6 tipe dasar: objek ({}), array ([]), string, number, boolean, null. Banyak digunakan dalam REST API, transmisi data frontend-backend, file konfigurasi, log, dll.
TypeScript: Superset JavaScript yang dikembangkan oleh Microsoft, menambahkan definisi tipe statis, interface, generic, dan fitur lainnya ke JavaScript. Kode TypeScript dikompilasi menjadi JavaScript murni untuk dijalankan di browser atau Node.js. Bahasa pilihan untuk proyek frontend modern React, Vue, Angular.
interface (antarmuka): Kata kunci TypeScript untuk mendeskripsikan tipe objek, sintaks: `interface Name { prop: type; }`. Mendukung penggabungan deklarasi (interface dengan nama yang sama otomatis digabung), implements (kelas mengimplementasikan interface), extends (pewarisan interface). Cara utama mendeskripsikan bentuk objek di TypeScript.
type alias: Kata kunci TypeScript untuk membuat alias tipe, sintaks: `type Name = ...`. Dapat digunakan untuk mendefinisikan tipe union (`A | B`), tipe persilangan (`A & B`), tipe fungsi, dll. Lebih fleksibel daripada interface tetapi tidak mendukung penggabungan deklarasi. Alat ini menggunakan interface, bukan type.
Inferensi Tipe (Type Inference): Proses di mana alat ini secara otomatis menentukan tipe TS yang sesuai berdasarkan typeof dan bentuk spesifik value JSON. Misalnya typeof string dipetakan ke string, ketika Array.isArray() cocok, diperlakukan sebagai array, ketika typeof object cocok, dihasilkan sub-interface independen.
Bidang opsional (?): Pengubah TypeScript yang menunjukkan bahwa bidang dapat dihilangkan. `name?: string` menunjukkan bahwa bidang name mungkin tidak ada (nilai undefined). Setelah mengaktifkan opsi "Bidang opsional" alat, bidang dengan nilai null atau undefined secara otomatis mendapatkan `?`.
Bidang readonly (readonly): Pengubah TypeScript yang menunjukkan bahwa bidang tidak dapat diubah. `readonly id: number` menunjukkan bahwa bidang id tidak dapat ditetapkan ulang setelah objek dibuat. Setelah mengaktifkan opsi "Bidang readonly" alat, semua bidang secara otomatis mendapatkan `readonly`.
Tipe Union (Union Type): Sintaks TypeScript yang menunjukkan bahwa nilai dapat berupa salah satu dari beberapa tipe, ditulis sebagai `A | B`. Alat menggunakannya ketika tipe elemen array tidak konsisten, misalnya `(string | number)[]` menunjukkan bahwa elemen array dapat berupa string atau number.
Tipe Array (Array Type): Sintaks TypeScript untuk array, ada dalam dua bentuk: bentuk generic `Array<T>` dan bentuk singkat `T[]`. Alat secara konsisten menggunakan bentuk singkat. Alat memiliki tiga mode pembuatan tipe array: tipe seragam `T[]`, tipe campuran `(A | B)[]`, array kosong `any[]`.
Interface Bersarang (Nested Interface): Merujuk interface lain dalam interface untuk membentuk hierarki tipe. Alat menghasilkan sub-interface independen untuk setiap objek bersarang, interface utama merujuk melalui nama properti. Misalnya Root merujuk RootAddress, RootAddress dapat secara independen dirujuk oleh tipe lain.
Mode TypeScript strict: Mode ketat dari kompiler TypeScript, mencakup beberapa sub-pilihan: noImplicitAny, strictNullChecks, strictFunctionTypes, dll. Setelah mengaktifkan strictNullChecks, null dan undefined adalah tipe independen dan tidak dapat ditetapkan ke variabel tipe lain. Bidang opsional yang dihasilkan oleh alat ini sepenuhnya kompatibel dengan mode strict.
DTO (Data Transfer Object): Objek transfer data, digunakan untuk mentransfer data antara lapisan yang berbeda (mis. API dan lapisan Service). Dalam proyek TypeScript biasanya dideskripsikan dengan interface, dikombinasikan dengan readonly menekankan ketidakubahan. Alat ini adalah alat umum untuk menghasilkan definisi tipe DTO.
Penggabungan Deklarasi (Declaration Merging): Fitur interface TypeScript: interface dengan nama yang sama secara otomatis menggabungkan propertinya. Sering digunakan untuk memperluas definisi tipe pustaka pihak ketiga. Interface yang dihasilkan oleh alat ini dapat digabungkan dengan interface lain dengan nama yang sama di proyek, memfasilitasi ekstensi tipe progresif.
tsconfig.json: File konfigurasi proyek TypeScript, terletak di direktori root proyek. Berisi compilerOptions (target, module, strict, dll.), include, exclude, dan pengaturan lainnya. File .ts yang dihasilkan oleh alat ini dapat digunakan di proyek tsconfig standar mana pun.
tryFixJSON: Fungsi perbaikan JSON bawaan alat ini, secara otomatis menangani koma di akhir, penggantian tanda kutip ganda dengan tunggal, tanda kutip yang hilang pada key, komentar, dan kesalahan sintaks JSON umum lainnya. Dipanggil secara otomatis ketika JSON.parse gagal, memberi tahu pengguna setelah perbaikan berhasil dan melanjutkan konversi.

Aturan Pemetaan Tipe JSON ke Tipe TypeScript

Aturan lengkap di mana fungsi getTsType alat kami menginferensi tipe TypeScript berdasarkan bentuk value JSON:

Nilai JSON	Contoh	Tipe TypeScript	Aturan Penentuan
`null`	`null`	`null`	JSON null dipetakan langsung ke tipe TS null
`undefined`	`undefined`	`undefined`	Nilai undefined dipetakan ke TS undefined (hanya ada saat runtime)
`boolean`	`true / false`	`boolean`	typeof boolean dipetakan ke TS boolean
`integer`	`1, 100, -9999`	`number`	Bilangan bulat dan desimal keduanya dipetakan ke TS number
`float`	`3.14, -0.5, 1e10`	`number`	Semua literal numerik dipetakan ke number (TS tidak membedakan int dan float)
`string`	`"Alice", "Jakarta"`	`string`	typeof string dipetakan ke TS string
`empty array`	`[]`	`any[]`	Array kosong tidak dapat menginferensi tipe elemen, fallback any[]
`homogeneous array`	`[1, 2, 3]`	`T[] (mis. number[])`	Elemen tipe sama menghasilkan tipe array tunggal
`mixed array`	`[1, "a"]`	`(A \| B)[] (mis. (number \| string)[])`	Elemen tipe berbeda menghasilkan tipe array union
`object`	`{a: 1, b: "x"}`	`SubInterface (mis. Root)`	Objek bersarang menghasilkan sub-interface independen dan merujuk

Perbandingan interface vs type alias

Alasan alat ini menghasilkan interface daripada type alias, dan perbedaan keduanya dalam proyek TypeScript:

Dimensi Kemampuan	interface	type alias	Catatan
Deskripsi tipe objek	✓ (lebih disukai)	✓ (juga didukung)	Keduanya didukung, alat menghasilkan interface
Penggabungan deklarasi	✓ (nama sama otomatis digabung)	✗ (deklarasi duplikat menyebabkan error)	interface mendukung ekstensi progresif, type tidak
implements/extends	✓ (kelas dapat implements)	△ (hanya type objek yang dapat implements)	interface lebih alami dalam skenario OOP
Tipe Union (A \| B)	✗	✓	type lebih ringkas untuk tipe union
Tipe Persilangan (A & B)	✗	✓	type lebih ringkas untuk tipe persilangan
Tipe fungsi	△ (memerlukan call signature)	✓ (definisi langsung)	type lebih intuitif untuk tipe fungsi
Performa (banyak tipe)	Sedikit lebih cepat	Sedikit lebih lambat	interface lebih cepat dengan penggabungan tambahan saat kompilasi
Pilihan alat	✓ Digunakan konsisten	✗	Alat berfokus pada tipe objek, interface adalah pilihan optimal

Aturan Pembuatan Bidang Opsional dan Readonly

Dampak dua opsi sakelar alat ini pada kode yang dihasilkan dan skenario penggunaan optimal:

Opsi	Kondisi Pemicu	Sintaks yang Dihasilkan	Skenario Penggunaan Optimal
Bidang opsional (?): mati	(default)	`name: string`	Semua bidang wajib, tipe ketat
Bidang opsional (?): hidup	value === null \|\| value === undefined	`name?: string`	Bidang opsional, data yang dapat dihilangkan
Bidang readonly (readonly): mati	(default)	`name: string`	Tipe umum, bidang dapat ditulis
Bidang readonly (readonly): hidup	Semua bidang diproses secara konsisten	`readonly name: string`	Status tidak dapat diubah, konfigurasi, DTO, respons API
Keduanya hidup	Kedua kondisi terpenuhi	`readonly name?: string`	Snapshot respons API, konfigurasi opsional

Privacy & Security

Semua operasi alat JSON ke TypeScript ini sepenuhnya dilakukan secara lokal di browser Anda: penguraian JSON, inferensi tipe, pembuatan interface dijalankan oleh JavaScript browser di sisi klien, tanpa mengirim konten JSON, file yang diunggah, atau kode yang dihasilkan ke server mana pun melalui jaringan. Pengunggahan file menggunakan API FileReader bawaan browser untuk membaca langsung ke memori, tanpa melalui layanan perantara. Tidak menggunakan pelacakan Cookie, tidak mengumpulkan input pengguna atau data penggunaan apa pun. Setelah menutup atau menyegarkan halaman, semua konten input dan output secara otomatis dihapus dari memori. Cocok untuk memproses JSON yang berisi kunci API, token, data bisnis sensitif.

Authoritative References

TypeScriptDokumentasi resmi TypeScript interface
TypeScriptBuku panduan pemula TypeScript
MDNSpesifikasi JSON - MDN Web Docs
TypeScriptTypeScript Playground coba online
TypeScriptReferensi konfigurasi tsconfig.json
ZodZod - pustaka validasi schema yang mengutamakan TypeScript