ตัวแปลง JSON เป็น TypeScript
วาง API response แล้วรับ TypeScript interface หรือ type alias ที่พร้อมใช้ โดยอนุมาน type ที่ซ้อนกัน ฟิลด์ optional และ union กับ null ให้อัตโนมัติ
ทำงานในเบราว์เซอร์ไม่ต้องสมัครไม่มีการอัปโหลด
วิธีใช้ JSON เป็น TypeScript
- วางตัวอย่าง JSON เช่น API response ลงในช่องซ้าย หรือเปิดไฟล์
.json - ตั้งชื่อ type ของ root (เช่น
UserหรือApiResponse) - เลือกการประกาศแบบ
interfaceหรือtypeและเปิด/ปิดexport,readonlyหรือให้ทุกฟิลด์เป็น optional - เลือก
unknown(ปลอดภัยกว่า) หรือanyสำหรับค่าที่ตัวอย่างบอกชนิดไม่ได้ เช่น array ว่างและ null - คัดลอกโค้ดที่สร้างหรือดาวน์โหลดเป็นไฟล์
.ts
การอนุมาน type ทำงานอย่างไร
- Primitive: สตริง ตัวเลข และ boolean แปลงเป็น
string,numberและboolean - Object ที่ซ้อนกัน กลายเป็น interface ที่มีชื่อของตัวเองแบบ PascalCase เช่น
billing_addressกลายเป็นBillingAddress - Array ของ object ถูกรวมเป็น type ของสมาชิกเดียว ตั้งชื่อแบบเอกพจน์:
usersได้User[]คีย์ที่ไม่มีในบางสมาชิกจะเป็น optional (key?:) - ค่า null รวมกับค่าอื่นที่พบในคีย์นั้น:
string | nullคีย์ที่เป็นnullตลอดจะใช้unknownหรือanyแทน - Array ที่มีหลายชนิด กลายเป็น union array เช่น
(number | string)[] - รูปร่างที่เหมือนกัน ถูกประกาศครั้งเดียวและนำกลับมาใช้ ส่วนรูปร่างต่างกันที่จะได้ชื่อซ้ำกันจะมีตัวเลขต่อท้าย
- คีย์ที่ไม่ใช่ identifier ที่ถูกต้อง เช่น
"first-name"หรือ"2fa"จะถูกใส่อัญประกาศ
interface vs. type
สำหรับรูปร่าง object ธรรมดา ทั้งสองแทบใช้แทนกันได้ การประกาศ interface ขยายและ merge ได้ และให้ข้อความ error จากคอมไพเลอร์ที่ชัดเจนกว่าเล็กน้อย ส่วน type alias ยังแสดง union และ mapped type ได้ หลายทีมใช้ interface สำหรับโมเดล API และ type สำหรับอย่างอื่น ให้เลือกตามที่ codebase หรือ linter ของคุณ (@typescript-eslint/consistent-type-definitions) กำหนด
ได้ type ที่ดีขึ้นจากตัวอย่างของคุณ
type จะสมบูรณ์ได้เท่ากับตัวอย่างเท่านั้น ให้วาง response ที่มีฟิลด์ optional หรือ array ที่มีสมาชิกหลากหลายหลายตัว เพื่อให้ตัวสร้างตรวจพบคีย์ที่เป็น optional และ nullable ค่าอย่างวันที่และ enum มาเป็นสตริงธรรมดาใน JSON ให้จำกัดชนิดเองภายหลัง เช่น status: 'active' | 'disabled' สำหรับการตรวจสอบตอน runtime ให้ใช้ type ที่สร้างร่วมกับไลบรารี schema อย่าง Zod
คำถามที่พบบ่อย
JSON ของฉันถูกอัปโหลดหรือไม่?
ตรวจจับ property ที่เป็น optional อย่างไร?
? หากมี object เดียว ทุกคีย์จะเป็น required เว้นแต่คุณติ๊ก optional ทั้งหมดควรใช้ <code>unknown</code> หรือ <code>any</code>?
unknown ปลอดภัยกว่า: TypeScript บังคับให้คุณจำกัดชนิดของค่าก่อนใช้งาน ส่วน any ปิดการตรวจสอบชนิดสำหรับค่านั้น ใช้เฉพาะเมื่อคุณวางแผนจะปรับ type ภายหลังทำไมวันที่แบบ ISO ถูกกำหนดเป็น <code>string</code>?
new Date() หลังพาร์ส ให้เปลี่ยน property เป็น Date ในโมเดลของคุณ