JSON ke TypeScript

Contoh

Masukan:

{ "id": 1, "name": "Alice", "age": null, "tags": ["admin", "user"], "address": { "city": "Madrid" } }

Keluaran:

interface User {
  id: number;
  name: string;
  age: number | null;
  tags: string[];
  address: Address;
}

interface Address {
  city: string;
}

Pemetaan tipe

Bidang opsional vs bidang yang dapat bernilai null

• foo?: string, bidang ini bisa tidak ada pada objek. Pemeriksaan undefined berlaku.
• foo: string | null, bidang ini selalu ada, tetapi bisa secara eksplisit bernilai null.
• foo?: string | null, bisa tidak ada ATAU bernilai null.

JSON sendiri tidak memiliki undefined, tetapi setiap API menandakan ketiadaan bidang dengan cara berbeda. Sesuaikan dengan semantik API yang Anda gunakan.

• API REST biasanya menghilangkan bidang yang hilang -> ?:.
• GraphQL selalu mengembalikan setiap bidang yang diminta -> | null.
• Beberapa SDK menggunakan keduanya dalam konteks yang berbeda.

Tipe union vs tipe literal

Jika alat melihat bidang string yang sama hanya mengambil sekumpulan kecil nilai di seluruh sampel ("status": "pending", "active", "archived"), alat dapat menghasilkan union literal string:

status: "pending" | "active" | "archived";

Aktifkan “simpulkan union literal string” jika Anda menginginkannya.

Kesalahan umum

• Menyimpulkan dari satu sampel. Setiap bidang menjadi wajib; kemungkinan null tidak dapat diamati. Untuk tipe yang lebih baik, berikan 5-10 sampel yang bervariasi.
• Array kosong. "tags": [] tidak memberikan informasi tipe, generator menghasilkan unknown[]. Berikan sampel dengan setidaknya satu elemen.
• Array bertipe campuran. [1, "two", true] menghasilkan (number | string | boolean)[]. Biasanya ini berarti JSON sebaiknya dirancang ulang alih-alih diberi tipe apa adanya.
• Kunci string numerik. JSON {"1": "a", "2": "b"} tetap berupa objek di TypeScript (Record<string, string>), bukan array. Generator menangani hal ini dengan benar.