วิธีสร้าง TypeScript จาก JSON
- วางตัวอย่าง JSON ยิ่งอาร์เรย์มีรายการมาก ฟิลด์ optional และ union ก็จะถูกตรวจจับได้แม่นยำขึ้น
- ตั้งชื่อ type หลัก แล้วเลือก
interfaceหรือtypeจะใส่หรือไม่ใส่exportและreadonlyก็ได้ - คัดลอกโค้ด TypeScript ไปใช้ในโปรเจกต์ของคุณ หรือดาวน์โหลดเป็นไฟล์
.ts
การอนุมานชนิด TypeScript จาก JSON
| JSON | TypeScript |
|---|---|
"Ada" | string |
42, 3.14 | number |
true | boolean |
null ร่วมกับค่าอื่น | union เช่น string | null |
"address": {"city": "Paris"} | interface Address แยกต่างหาก |
"users": [{"id": 1}] | User[] – ชื่อของรายการจะถูกเปลี่ยนเป็นเอกพจน์ |
| คีย์ที่ไม่มีในบางรายการของอาร์เรย์ | พร็อพเพอร์ตี optional key?: |
[1, "a"] | (string | number)[] |
[] | unknown[] |
{} | Record<string, unknown> |
ตัวอย่างการแปลง JSON เป็น TypeScript
JSON {"id": 1, "name": "Ada", "tags": ["admin"], "manager": null} จะกลายเป็น:
export interface Root { id: number; name: string; tags: string[]; manager: null; }
เปลี่ยนชื่อ Root เป็นชื่อที่มีความหมาย เช่น User หรือ ApiResponse อ็อบเจ็กต์ซ้อนที่มีโครงสร้างเหมือนกันทุกประการ – เช่น ที่อยู่สำหรับออกใบแจ้งหนี้และที่อยู่สำหรับจัดส่ง – จะใช้ interface ร่วมกัน และคีย์ที่ไม่ใช่ identifier ที่ถูกต้องจะถูกใส่เครื่องหมายคำพูด เช่น "first-name": string
คำถามที่พบบ่อย
ควรเลือก interface หรือ type?
สำหรับโครงสร้างอ็อบเจ็กต์ ทั้งสองแบบทำงานเหมือนกัน interface สามารถ extend และ merge ได้ ส่วน type alias สามารถอธิบาย union ได้ด้วย หลายทีมใช้ interface สำหรับอ็อบเจ็กต์ ให้ทำตามสไตล์ของโค้ดเบสของคุณ
ตรวจจับฟิลด์ optional อย่างไร?
อ็อบเจ็กต์ที่อยู่ในอาร์เรย์เดียวกันจะถูกรวมเข้าด้วยกัน คีย์ที่ไม่มีในบางอ็อบเจ็กต์จะกลายเป็น optional (key?:) และคีย์ที่มีค่าต่างชนิดกันจะกลายเป็น union
เครื่องมือนี้ตรวจสอบข้อมูลตอน runtime ได้ไหม?
ไม่ได้ ชนิดของ TypeScript จะหายไปเมื่อโค้ดทำงาน หากต้องการตรวจสอบข้อมูลที่เข้ามา ให้สร้าง JSON Schema จากตัวอย่างเดียวกันด้วยเครื่องมือสร้าง JSON Schema ของเรา แล้วตรวจสอบด้วยไลบรารี schema
JSON ของฉันถูกส่งไปยังเซิร์ฟเวอร์หรือไม่?
ไม่ ชนิดข้อมูลถูกสร้างในเบราว์เซอร์ของคุณ คุณจึงวาง response ของ API ที่เป็นข้อมูลส่วนตัวได้อย่างปลอดภัย