Cara membuat TypeScript dari JSON
- Tempel contoh JSON. Semakin banyak item dalam array-nya, semakin baik field opsional dan union terdeteksi.
- Atur nama tipe root dan pilih
interfaceatautype, dengan atau tanpaexportdanreadonly. - Salin kode TypeScript ke proyek Anda atau unduh sebagai file
.ts.
Cara tipe TypeScript disimpulkan dari JSON
| JSON | TypeScript |
|---|---|
"Ada" | string |
42, 3.14 | number |
true | boolean |
null di samping nilai lain | union seperti string | null |
"address": {"city": "Paris"} | interface Address tersendiri |
"users": [{"id": 1}] | User[] – nama item diubah ke bentuk tunggal (singular) |
| key yang tidak ada di sebagian item array | properti opsional key?: |
[1, "a"] | (string | number)[] |
[] | unknown[] |
{} | Record<string, unknown> |
Contoh: dari JSON ke interface TypeScript
JSON {"id": 1, "name": "Ada", "tags": ["admin"], "manager": null} menjadi:
export interface Root { id: number; name: string; tags: string[]; manager: null; }
Ganti nama Root dengan nama yang bermakna seperti User atau ApiResponse. Objek bersarang dengan bentuk yang persis sama – misalnya alamat penagihan dan alamat pengiriman – memakai satu interface yang sama, dan key yang bukan identifier valid diberi tanda kutip, mis. "first-name": string.
Pertanyaan yang sering diajukan
Interface atau type – mana yang sebaiknya dipilih?
Untuk bentuk objek, keduanya berperilaku sama. Interface bisa di-extend dan digabung (merge), sedangkan type alias juga bisa mendeskripsikan union. Banyak tim memakai interface untuk objek; ikuti gaya codebase Anda.
Bagaimana field opsional dideteksi?
Objek di dalam array yang sama digabungkan. Key yang tidak ada di sebagian objek menjadi opsional (key?:), dan key dengan tipe nilai yang berbeda menjadi union.
Apakah ini memvalidasi data saat runtime?
Tidak. Tipe TypeScript hilang saat kode dijalankan. Untuk memeriksa data yang masuk, buat JSON Schema dari contoh yang sama dengan JSON Schema generator kami, lalu validasi data dengan library schema.
Apakah JSON saya dikirim ke server?
Tidak. Tipe dibuat di browser Anda, jadi Anda bisa dengan aman menempelkan respons API yang bersifat privat.