วิธีใช้งาน

วาง JSON ลงในช่องป้อนข้อมูล เปิดไฟล์ .json หรือลองใช้ตัวอย่าง
ตั้งชื่อของ root type เช่น Order หรือ ApiResponse
เลือกการประกาศแบบ interface หรือ type และเลือกว่าจะเพิ่ม export และ readonly หรือไม่
คัดลอก TypeScript ที่สร้างขึ้น หรือดาวน์โหลดเป็น types.ts

วิธีการทำงาน

เครื่องมือนี้จะอ่านผ่านเอกสาร JSON ทั้งหมดและบันทึกชนิดของค่าที่พบในแต่ละตำแหน่ง แต่ละออบเจ็กต์ JSON จะถูกสร้างเป็น declaration ที่มีชื่อของตัวเอง ชื่อมาจากคีย์ property ที่เขียนแบบ PascalCase เช่น “shipping_address” กลายเป็น ShippingAddress ไอเท็มในอาร์เรย์ตั้งชื่อตามรูปเอกพจน์ของคีย์: “items” กลายเป็น Item, “categories” กลายเป็น Category และคีย์ที่ดูไม่เหมือนพหูพจน์จะเติมคำต่อท้าย “Item”

ออบเจ็กต์ทั้งหมดในอาร์เรย์เดียวกันจะถูกรวมเป็น interface เดียว ถ้าคีย์ปรากฏแค่บางออบเจ็กต์ จะถูกทำเครื่องหมายเป็น optional ด้วย “?” ถ้าค่ามีชนิดต่างกันในตำแหน่งต่างกัน type จะเป็น union เช่น string | number ค่า null จะถูกเก็บเป็น type ของมันเอง ดังนั้นฟิลด์ที่บางครั้งเป็น null จะกลายเป็น string | null อาร์เรย์ว่างจะกลายเป็น unknown[] เพราะไม่มีอะไรให้อนุมาน ออบเจ็กต์สองชุดที่มี properties และ types เหมือนกันทุกประการจะใช้ interface ร่วมกันแทนที่จะสร้างซ้ำ คีย์ที่ไม่ใช่ identifier ที่ถูกต้อง เช่น “first-name” จะถูกใส่เครื่องหมายคำพูด

ผลลัพธ์อธิบายเฉพาะตัวอย่างที่คุณวาง ฟิลด์ที่จริง ๆ แล้วเป็น optional หรือเป็น null ได้ จะกลายเป็น required และไม่เป็น null ถ้าตัวอย่างของคุณไม่แสดงเช่นนั้น และวันที่มาถึงเป็น string ธรรมดา ตรวจสอบ types เทียบกับเอกสาร API ของคุณก่อนนำไปใช้

ตัวอย่าง

การใส่ type ให้ API response

วางคำสั่งซื้อจาก API ของร้านคุณและตั้งชื่อ root ว่า Order คุณจะได้อินเทอร์เฟซ Order, Customer, Item และ Shipping โดยที่ Item มี note?: string เนื่องจาก item สองรายการมีเพียงรายการเดียวที่มี note

คอนฟิกแบบอ่านอย่างเดียว

วาง config.json ติ๊ก “ทำให้ properties เป็น readonly” แล้ววางผลลัพธ์ลงใน config.d.ts เพื่อให้ compiler ตรวจจับการเขียนค่าลง config โดยไม่ตั้งใจ

อาร์เรย์ที่ระดับบนสุด

endpoint แบบ list ส่งค่า [{…}, {…}] กลับมา เมื่อตั้งชื่อ root เป็น Product ผลลัพธ์จะเริ่มด้วย “export type Product = ProductItem[];” ตามด้วยอินเทอร์เฟซ ProductItem

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

ทำไมฟิลด์ในผลลัพธ์ถึงเป็น optional?

เพราะมีออบเจ็กต์อย่างน้อยหนึ่งตัวในอาร์เรย์เดียวกันที่ไม่มีคีย์นั้น ถ้าทุกออบเจ็กต์มี คีย์นั้นจะถูกกำหนดเป็น required ลองวางหลาย ๆ เรกคอร์ดเพื่อให้ได้ฟิลด์ optional ที่แม่นยำขึ้น

ทำไมวันที่จึงถูกกำหนด type เป็น string?

JSON ไม่มีชนิดข้อมูลวันที่ ดังนั้นวันที่จึงมาในรูปแบบ string เครื่องมือนี้ไม่เดารูปแบบ ถ้าโค้ดของคุณแปลงค่าเหล่านี้เป็นออบเจ็กต์ Date ให้เปลี่ยน type เอง

interface กับ type ต่างกันอย่างไร?

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

เครื่องมือนี้สร้างการตรวจสอบตอนรันไทม์ เช่น Zod schema ได้ไหม

ไม่ได้ สร้างเฉพาะ TypeScript declarations ซึ่งตรวจสอบตอนคอมไพล์เท่านั้น และไม่ตรวจสอบข้อมูลตอนรันไทม์

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

JSON ของคุณถูกประมวลผลในเบราว์เซอร์ของคุณเท่านั้น ไม่มีการอัปโหลด จัดเก็บ หรือรวมอยู่ใน analytics