JSON Swiss

JSON Swiss

Generator JSON ke TypeScript

Input JSON

Memuat editor…

TypeScript Dihasilkan

Configuration

Opsi Pembuatan TypeScript

Buat interface alih-alih type alias

Tandai properti sebagai opsional saat mungkin undefined

Tambahkan data JSON untuk menghasilkan tipe TypeScript

Menghasilkan interface, type, dan objek bertipe kuat

Cara mengonversi JSON ke TypeScript – panduan langkah demi langkah

Gunakan generator JSON ke TypeScript ini untuk membuat antarmuka dan tipe yang aman dari sampel JSON untuk aplikasi frontend dan layanan Node.js.

  1. Langkah 1 – Tempelkan sampel JSON

    • Tempelkan objek atau larik JSON yang representatif ke editor kiri.
    • Sertakan objek bertumpuk, array, dan bidang nullable sehingga jenis dapat disimpulkan dengan benar.
    • Gunakan Import untuk memuat JSON dari file, URL, atau data sampel.

  2. Langkah 2 – Pilih opsi pembuatan TypeScript

    • Tetapkan Root Type Name yang cocok dengan model Anda (misalnya Root).
    • Pilih strategi penanganan null (Optional (?) vs Union (| null)) agar sesuai dengan dasar kode Anda.
    • Putuskan apakah Anda menginginkan alias interfaces atau type untuk keluarannya.

  3. Langkah 3 – Tinjau kode yang dihasilkan

    • Periksa nama bidang, tipe, dan bagaimana array/objek dimodelkan.
    • Sesuaikan opsi seperti Root Type Name, penanganan null, dan kerangka kerja jika tersedia.
    • Jika suatu bidang disimpulkan dengan salah, sesuaikan sampel JSON Anda dan buat ulang.

  4. Langkah 4 – Gunakan tipe yang dihasilkan

    • Tempel hasilnya ke proyek Anda dan diekspor dari modul tipe Anda.
    • Gunakan tipe untuk respons API, DTO, dan batas waktu penguraian proses.
    • Buat ulang ketika payload JSON Anda berubah untuk menjaga klien tetap tenggelam.

  5. Langkah 5 – Salin atau unduh

    • Salin hasilnya ke proyek Anda atau unduh sebagai file.
    • Jalankan formatter/linter Anda agar sesuai dengan gaya kode Anda.
    • Tambahkan pustaka penguraian/serialisasi JSON jika bahasa Anda memerlukannya.

Kiat cepat

  • Pilih unknown untuk bidang yang benar-benar belum diketik, lalu persempit saat Anda memvalidasi.
  • Jika API tidak konsisten, mempertimbangkan untuk membuat Skema JSON dan memvalidasi saat runtime.
  • File pisahkan yang dihasilkan agar mudah diganti saat ada pembaruan.
Contoh keluaran (disederhanakan)
// masukan JSON
{
  "id": 123,
  "name": "Maeve Winters",
  "email": "[email protected]",
  "active": true,
  "roles": ["admin", "editor"],
  "metadata": { "plan": "pro" },
  "createdAt": "2024-03-01T10:15:00Z",
  "score": 99.5,
  "notes": null
}

// Generated TypeScript types (simplified)
export interface Metadata {
  plan: string;
}

export interface Root {
  id: number;
  name: string;
  email: string | null;
  active: boolean;
  roles: string[];
  metadata: Metadata;
  createdAt: string;
  score: number;
  notes: null;
}

Alat JSON & TypeScript terkait

Jelajahi lebih banyak alat JSON dan skema yang berfungsi baik bersama generator JSON ke TypeScript ini.

Ketik TypeScript ke Skema JSON & JSON

Ubah tipe TypeScript yang ada menjadi contoh JSON dan Skema JSON untuk dokumen dan validasi.

Skema Generator JSON

Hasilkan Skema JSON dari sampel JSON untuk memvalidasi payload API.

Pemformat & Validator JSON

Format dan validasi JSON sebelum membuat tipe untuk menghindari masalah waktu proses.

JSON ke Generator Java

Hasilkan POJO Java saat Anda juga memelihara layanan JVM.

Pertanyaan yang Sering Diajukan

Fitur TypeScript apa yang didukung di kode yang dihasilkan?

Generator membuat interface, type, dan class TypeScript dengan type safety penuh. Mendukung properti opsional, union type, interface bersarang, tipe array, dan penanganan null yang tepat. Kode yang dihasilkan kompatibel dengan standar TypeScript terbaru.

Bagaimana generator menangani struktur JSON bersarang yang kompleks?

Objek bersarang yang kompleks dikonversi menjadi interface TypeScript terpisah dengan relasi tipe yang tepat. Array diberi tipe dengan benar, dan generator membuat hirarki tipe yang sesuai dengan struktur JSON Anda sambil mempertahankan type safety.

Bisakah saya menyesuaikan penanganan null dan undefined pada tipe yang dihasilkan?

Bisa. Anda dapat memilih berbagai strategi penanganan null: properti opsional dengan '?', union type dengan '| null', atau mengabaikan nilai null sepenuhnya. Ini memberi Anda fleksibilitas dalam menentukan seberapa ketat tipe Anda.

Apakah kode TypeScript yang dihasilkan siap digunakan di produksi?

Tentu! Kode yang dihasilkan mengikuti best practice TypeScript, menyertakan export yang tepat, dan dapat langsung diimpor ke proyek TypeScript Anda. Interface dirancang agar mudah dipelihara dan mengikuti konvensi penamaan standar.

Generator JSON ke TypeScript | JSONSwiss