ข้ามไปยังเนื้อหา
EVOA Toolbox

แปลง JSON เป็น TypeScript

สร้าง interface หรือ type ของ TypeScript จากตัวอย่าง JSON รองรับออบเจ็กต์ซ้อน อาร์เรย์ union, null และพร็อพเพอร์ตี้ที่เป็นตัวเลือก

ประมวลผลในเบราว์เซอร์ของคุณ ข้อความของคุณไม่ถูกอัปโหลด

กำลังโหลดเครื่องมือ…

เครื่องมือนี้ทำอะไรได้

วางตัวอย่างการตอบกลับของ API หรือไฟล์คอนฟิก แล้วรับการประกาศ TypeScript ที่พร้อมใช้งาน ออบเจ็กต์ซ้อนจะกลายเป็น interface ที่มีชื่อของตัวเอง อาร์เรย์จะกลายเป็นอาร์เรย์ที่มีชนิด และค่า null จะมีชนิดเป็น null เพื่อให้เห็นว่าฟิลด์ใดอาจหายไป

เมื่ออาร์เรย์มีออบเจ็กต์หลายตัว รูปร่างของออบเจ็กต์จะถูกรวมกัน พร็อพเพอร์ตี้ที่มีในทุกสมาชิกจะเป็นแบบจำเป็น และพร็อพเพอร์ตี้ที่ปรากฏเฉพาะบางสมาชิกจะเป็นตัวเลือก (name?: type) อาร์เรย์ที่มีค่าหลายชนิดจะได้ union เช่น (string | number)[] ชื่อพร็อพเพอร์ตี้ที่ไม่ใช่ identifier ที่ถูกต้อง เช่น first-name จะใส่เครื่องหมายคำพูด

คุณเลือกชื่อ root type, เอาต์พุตแบบ interface หรือ type alias, จะใส่ export หรือไม่ และจะทำเครื่องหมายพร็อพเพอร์ตี้เป็น readonly หรือไม่ การอนุมานทำงานในเบราว์เซอร์จากตัวอย่างที่คุณให้ ผลลัพธ์จึงสมบูรณ์เท่าที่ตัวอย่างครอบคลุม ควรตรวจทานและปรับชนิดให้กว้างขึ้นในจุดที่ API อาจคืนรูปร่างอื่น

วิธีใช้งาน

  1. 1วางตัวอย่าง JSON ที่เป็นตัวแทนได้ดี (ตัวอย่างที่หลากหลายกว่าจะช่วยตรวจจับฟิลด์ตัวเลือกได้ดีกว่า)
  2. 2ตั้งชื่อ root type และเลือก interface หรือ type
  3. 3เปิดหรือปิด export และ readonly ให้ตรงกับสไตล์โค้ดของคุณ
  4. 4คัดลอกโค้ดที่สร้าง หรือดาวน์โหลดเป็น types.ts แล้วตรวจชนิดของฟิลด์เทียบกับสัญญา (contract) ของ API

รูปแบบที่รองรับ

อินพุต: JSON แบบเข้มงวด เอาต์พุต: การประกาศ TypeScript (.ts) ที่ใช้ interface หรือ type alias

ความเป็นส่วนตัว

เครื่องมือนี้ทำงานในเบราว์เซอร์ของคุณ ข้อมูลที่คุณป้อนจะถูกประมวลผลบนอุปกรณ์ของคุณและไม่ถูกส่งไปยังเซิร์ฟเวอร์ของเรา

ข้อจำกัด

  • ชนิดถูกอนุมานจากตัวอย่างเดียวเท่านั้น ฟิลด์ที่เป็นสตริงเสมอในตัวอย่างของคุณอาจเป็นตัวเลขหรือ null ในกรณีอื่น
  • อาร์เรย์ว่างจะมีชนิด unknown[] เพราะไม่มีข้อมูลให้อนุมาน
  • แมปแบบออบเจ็กต์ (เช่น คีย์ที่เป็น ID) จะถูกสร้างเป็นพร็อพเพอร์ตี้คงที่ ไม่ใช่ Record<string, T> ต้องแก้ด้วยตนเอง
  • วันที่ UUID และ enum จะแสดงเป็น string หรือ number ธรรมดา เครื่องมือไม่สามารถรู้ความหมายของค่าเหล่านั้น
  • ตัวเลขทั้งหมดมีชนิดเป็น number รวมถึงค่าที่เกิน 2^53 ซึ่ง JSON.parse จะปัด

คำถามที่พบบ่อย

ตัดสินพร็อพเพอร์ตี้ที่เป็นตัวเลือกอย่างไร

ตัดสินจากการเปรียบเทียบออบเจ็กต์ภายในอาร์เรย์เดียวกัน (หรือที่ซ้ำกันในตำแหน่งเดียวกัน) เท่านั้น หากพร็อพเพอร์ตี้หายไปอย่างน้อยหนึ่งสมาชิก จะถูกทำเครื่องหมายเป็นตัวเลือก พร็อพเพอร์ตี้ที่มีอยู่แต่มีค่า null จะมีชนิดเป็น null (หรือ union กับ null) ไม่ใช่ตัวเลือก

ควรเลือก interface หรือ type

สำหรับรูปร่างออบเจ็กต์ธรรมดา ใช้แทนกันได้ interface ขยายและรวมได้ ส่วน type alias เหมาะกับ union และ mapped type มากกว่า เลือกแบบที่โค้ดเบสของคุณใช้อยู่แล้ว

ทำไมออบเจ็กต์ซ้อนสองตัวจึงได้ชื่อชนิดเดียวกัน

ออบเจ็กต์ที่มีโครงสร้างเหมือนกันจะถูกนำมาใช้ซ้ำเป็นการประกาศเดียว เมื่อรูปร่างต่างกันสองแบบจะได้ชื่อเดียวกัน แบบที่สองจะได้ตัวเลขต่อท้าย เช่น Item2

JSON ของฉันถูกอัปโหลดหรือไม่

ไม่ ชนิดถูกสร้างในเบราว์เซอร์ของคุณ

เครื่องมือที่เกี่ยวข้อง