CrateX.app

JSON เป็น TypeScript

แปลงตัวอย่าง JSON เป็น TypeScript interface และ type alias โดยรวมฟิลด์จาก array ของ object อัตโนมัติ อนุมานฟิลด์แบบ optional และ union กับ null และสร้าง type declaration ที่เหมาะสมสำหรับ array และ object ว่าง เหมาะสำหรับการทำโมเดล response ของ API การตั้งต้น type ฝั่ง frontend และการจัดระเบียบโครงสร้างข้อมูล

เริ่มต้นอย่างรวดเร็ว

วางตัวอย่าง JSON ที่ถูกต้องลงในตัวแก้ไขด้านซ้าย

ไม่บังคับ: ตั้งชื่อ type หลักแบบกำหนดเอง เช่น ApiResponse ก่อนสร้าง

ตรวจสอบประกาศที่สร้างทางด้านขวา root ที่เป็น object จะกลายเป็น interface ส่วน array และ primitive จะกลายเป็น type alias

ใช้ปุ่มคัดลอกหรือดาวน์โหลดเพื่อนำเอาต์พุต .ts ที่สร้างไปใช้ต่อในโปรเจกต์ของคุณ

สถานการณ์การใช้งานทั่วไป

แปลง response ของ API จริงให้เป็นโมเดล TypeScript ตั้งต้นสำหรับหน้า frontend, SDK client หรือ integration test

ตรวจสอบ array ของ object ที่มีหลายรูปแบบเพื่อดูฟิลด์แบบ optional และ union type ก่อนสรุปสัญญา API

แปลงข้อมูล JSON จำลองให้เป็น type definitions แบบเร็วสำหรับ fixture, Storybook หรือ prototype

ตรวจสอบประกาศแบบซ้อนอย่าง User หรือ Meta เมื่อรูปแบบ payload ฝั่ง backend เปลี่ยนไป

คำแนะนำการใช้งาน

ใช้ตัวอย่าง JSON ที่เป็นตัวแทนของข้อมูลจริงให้มากที่สุด generator จะ infer จากค่าที่คุณวางเท่านั้น กรณีที่ไม่มีในตัวอย่างจะไม่ปรากฏในผลลัพธ์

array ว่างจะกลายเป็น unknown[] และ object ว่างจะกลายเป็น interface ที่ขยายจาก Record<string, unknown> จนกว่าคุณจะให้ข้อมูลตัวอย่างที่ครบขึ้น

ชื่อประกาศแบบซ้อนจะถูกปรับมาตรฐานจากชื่อ property ดังนั้นผลลัพธ์ใหม่จึงมักใช้ชื่ออย่าง User หรือ Meta แทนรูปแบบเก่าที่มี prefix ของ root

การสร้างจะทำงานเฉพาะกับ JSON ที่ถูกต้องเท่านั้น แก้ syntax error ก่อน โดยตัวแก้ไขจะแสดงบรรทัดและคอลัมน์เมื่อ parse ไม่ผ่าน

ชื่อ root แบบกำหนดเองที่ถูกต้องจะถูกเก็บไว้ตามเดิม ส่วนชื่อที่ไม่ถูกต้องจะถูกปรับเป็น PascalCase TypeScript identifier ที่ถูกต้อง

ข้อจำกัดและความเข้ากันได้

เครื่องมือนี้ infer type จากข้อมูลตัวอย่าง ไม่ใช่จาก schema อย่างเป็นทางการ ฟิลด์ที่ไม่มีในตัวอย่างจะไม่สามารถเดาได้

อินพุตต้องเป็น JSON แบบเคร่งครัด ไม่รองรับ comments, trailing commas หรือ syntax เฉพาะของ JavaScript

เอาต์พุตที่สร้างจะไม่ใส่คำสั่ง export ให้อัตโนมัติ หากโปรเจกต์ของคุณต้องใช้ declaration ที่ export แล้ว ให้เพิ่มเองภายหลัง

ผลลัพธ์เป็นเพียงโค้ด TypeScript แบบ static เท่านั้น ไม่ได้สร้าง validator, parser หรือ serializer ฝั่ง runtime

ความเป็นส่วนตัวและความปลอดภัย

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

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

ขั้นตอนถัดไปสามารถทำต่อด้วยเครื่องมือที่เกี่ยวข้องเหล่านี้