JSON เป็น TypeScript

ตัวอย่าง

ข้อมูลเข้า:

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

ผลลัพธ์:

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

interface Address {
  city: string;
}

การแมปชนิดข้อมูล

ฟิลด์แบบเลือกได้ เทียบกับ ฟิลด์แบบเป็น null ได้

• foo?: string, ฟิลด์นี้อาจไม่มีอยู่ในอ็อบเจกต์ ต้องมีการตรวจสอบค่า undefined
• foo: string | null, ฟิลด์นี้มีอยู่เสมอ แต่อาจถูกกำหนดเป็น null อย่างชัดเจน
• foo?: string | null, อาจไม่มีอยู่ หรืออาจเป็น null

JSON เองไม่มีค่า undefined แต่แต่ละ API มีวิธีบ่งบอกการขาดค่านี้แตกต่างกัน โปรดปรับให้ตรงกับความหมายของ API ที่คุณใช้

• API แบบ REST มักจะละฟิลด์ที่ขาดหายไป -> ?:
• GraphQL จะคืนทุกฟิลด์ที่ร้องขอเสมอ -> | null
• SDK บางตัวใช้ทั้งสองแบบในบริบทที่ต่างกัน

ชนิดยูเนียน เทียบกับ ชนิดลิเทอรัล

หากเครื่องมือพบว่าฟิลด์สตริงเดียวกันมีค่าเพียงไม่กี่ค่าในตัวอย่างต่าง ๆ ("status": "pending", "active", "archived") เครื่องมือสามารถสร้างเป็นยูเนียนของสตริงลิเทอรัลได้

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

หากต้องการพฤติกรรมนี้ ให้เปิดตัวเลือก “อนุมานยูเนียนของสตริงลิเทอรัล”

ข้อผิดพลาดที่พบบ่อย

• การอนุมานจากตัวอย่างเพียงชุดเดียว ทุกฟิลด์จะกลายเป็นฟิลด์ที่จำเป็น และไม่สามารถสังเกตความเป็น null ได้ เพื่อให้ได้ชนิดข้อมูลที่ดีขึ้น ให้ใส่ตัวอย่างที่หลากหลาย 5-10 ชุด
• อาร์เรย์ว่าง "tags": [] ไม่ให้ข้อมูลชนิดใด ๆ เครื่องมือจึงสร้างเป็น unknown[] โปรดใส่ตัวอย่างที่มีอย่างน้อยหนึ่งองค์ประกอบ
• อาร์เรย์ชนิดผสม [1, "two", true] สร้างเป็น (number | string | boolean)[] โดยทั่วไปหมายความว่าควรออกแบบ JSON ใหม่ แทนที่จะกำหนดชนิดให้ตามเดิม
• คีย์ที่เป็นสตริงตัวเลข JSON {"1": "a", "2": "b"} ยังคงเป็นอ็อบเจกต์ใน TypeScript (Record<string, string>) ไม่ใช่อาร์เรย์ เครื่องมือจัดการกรณีนี้ได้อย่างถูกต้อง