jsonecho

JSON เป็น TypeScript

วางตัวอย่าง JSON เพื่อสร้างชนิดข้อมูล TypeScript ที่ตรงกัน

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

วิธีใช้ JSON เป็น TypeScript

  1. วางตัวอย่าง JSON ที่สะท้อนข้อมูลจริง โดยควรกรอกฟิลด์ที่ไม่บังคับให้ครบด้วย
  2. ตั้งชื่อชนิดข้อมูลหลัก แล้วเลือกว่าจะให้สร้างโค้ดช่วยด้วยหรือสร้างเฉพาะชนิดข้อมูล
  3. คัดลอกโค้ด TypeScript ที่สร้างไปยังโปรเจกต์ของคุณ

เกี่ยวกับ JSON เป็น TypeScript

การเขียนคลาสโมเดลสำหรับข้อมูล JSON จำนวนมากด้วยตนเองเป็นงานน่าเบื่อ และพิมพ์ผิดได้ง่าย วางตัวอย่างที่นี่ แล้วเครื่องมือจะวิเคราะห์โครงสร้างว่ามีฟิลด์ใดบ้าง ฟิลด์ใดเป็นออบเจ็กต์หรืออาร์เรย์ และแต่ละค่ามีชนิดข้อมูลอะไร ผลลัพธ์มี interface สำหรับแต่ละออบเจ็กต์ เอาเครื่องหมายถูกออกจาก "เฉพาะชนิดข้อมูล" เพื่อเพิ่มคลาส Convert ที่ตรวจสอบข้อมูลขณะทำงาน

interface มีอยู่เฉพาะตอนคอมไพล์ เก็บคลาส Convert ไว้หากต้องตรวจสอบข้อมูลที่รับเข้ามาระหว่างทำงาน ทุกอย่างทำงานในเบราว์เซอร์ ข้อมูลตัวอย่างจึงอยู่ในอุปกรณ์ของคุณ

การใช้โค้ดที่สร้างขึ้น

สกัดด้วย const data: Root = JSON.parse(text)หรือใช้ Convert.toRoot(text) สําหรับการตรวจสอบ

คุณสมบัติทางเลือกถูกเขียนด้วยเครื่องหมายคําถาม และคุณสมบัติที่ไม่มีค่า string | null.

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

โค้ด TypeScript ที่สร้างต้องใช้ไลบรารีหรือส่วนประกอบใด?

ผลลัพธ์มี interface สำหรับแต่ละออบเจ็กต์ เอาเครื่องหมายถูกออกจาก "เฉพาะชนิดข้อมูล" เพื่อเพิ่มคลาส Convert ที่ตรวจสอบข้อมูลขณะทำงาน

ผมพิจารณา JSON กับผลอย่างไร?

สกัดด้วย const data: Root = JSON.parse(text)หรือใช้ Convert.toRoot(text) สําหรับการตรวจสอบ

จัดการฟิลด์ที่ไม่บังคับและฟิลด์ที่ไม่มีอย่างไร?

คุณสมบัติทางเลือกถูกเขียนด้วยเครื่องหมายคําถาม และคุณสมบัติที่ไม่มีค่า string | null.

เครื่องมือดูมากกว่าหนึ่งระเบียนหรือไม่?

เครื่องมือรู้จักเฉพาะข้อมูลที่อยู่ในตัวอย่างของคุณเท่านั้น ฟิลด์ที่ไม่มีในตัวอย่างจะไม่ปรากฏในชนิดข้อมูลที่สร้างขึ้น และถ้าค่าในตัวอย่างเป็น null เครื่องมือจะระบุชนิดข้อมูลของค่านั้นไม่ได้ วางตัวอย่างที่กรอกข้อมูลให้ครบมากที่สุด หรือวางอาร์เรย์ที่มีหลายระเบียนแตกต่างกัน

ข้อมูล JSON ของฉันถูกส่งไปยังเซิร์ฟเวอร์หรือไม่?

ไม่ เมื่อใช้ครั้งแรก เครื่องมือขนาดประมาณ 1 MB จะถูกดาวน์โหลดเข้าเบราว์เซอร์ จากนั้นทุกอย่างจะทำงานในเครื่องของคุณ

เครื่องมือเพิ่มเติมใน แปลงข้อมูลเป็นคลาส

เครื่องมือทั้งหมด →