ข้ามไปยังเนื้อหา
เครื่องมือแปลงไฟล์

สร้างอินเทอร์เฟซและชนิดข้อมูล TypeScript จาก JSON

สร้างอินเทอร์เฟซหรือชื่อแทนชนิดข้อมูล TypeScript จากตัวอย่าง JSON เช่น ผลตอบกลับ API รองรับการซ้อน null และอาร์เรย์ผสม โดยแปลงในเบราว์เซอร์

สร้างชนิดข้อมูล TypeScript ที่มีชื่อสำหรับผลตอบกลับ API

Converted in your browser. Null stays a value type; ? marks a field missing from some objects in an array. Empty arrays use unknown elements.

Load an example (replaces your input)

JSON

TypeScript

เหมาะกับงานแบบไหน

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

วิธีใช้

  1. วาง JSON จริงหรือโหลดตัวอย่าง การโหลดตัวอย่างจะแทนที่ข้อมูลเข้า
  2. กำหนดชื่อชนิดข้อมูลรากและเลือก interface (ออบเจ็กต์ซ้อนกันเป็นชนิดข้อมูลแยก) หรือ type (ชื่อแทนชนิดข้อมูลเดียวที่มีออบเจ็กต์ซ้อนแบบอินไลน์)
  3. ตรวจ null ฟิลด์ที่ไม่บังคับ (?) และ union ของ string/number แล้วคัดลอกชนิดข้อมูล

ข้อมูลเข้า JSON

[{"id":1,"name":"Tokyo"},{"id":2}]

ผลลัพธ์ TypeScript (Root, interface)

export type Root = RootValueItem[];

export interface RootValueItem {
  id: number;
  name?: string;
}

รายละเอียดและข้อจำกัด

ตรวจทุกสมาชิกในอาร์เรย์ ในตัวอย่าง name ไม่มีในออบเจ็กต์ที่สองจึงเป็นฟิลด์ไม่บังคับ ส่วนฟิลด์ที่มีค่า null จะเป็น union กับ null แทน

อาร์เรย์ว่างให้ unknown[] อาร์เรย์ผสมจะเป็นอาร์เรย์ของชนิด union ไม่ใช่ tuple ที่มีความยาวคงที่

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

ข้อมูลเข้าต้องเป็น JSON มาตรฐาน ใช้เครื่องมือจัดรูปแบบ JSON ลบคอมเมนต์หรือจุลภาคท้ายรายการก่อน และป้อน ID ที่มีเลขศูนย์นำหน้าเป็นสตริง

ข้อมูลเข้าจำกัด 1,000,000 อักขระ ประมาณ 64 ระดับ และ 50,000 ค่า ชนิดข้อมูล TypeScript ไม่ตรวจข้อมูลขณะทำงาน

FAQ

ควรสร้าง interface หรือ type?

ทั้งสองอธิบายโครงสร้างเดียวกัน interface สร้างอินเทอร์เฟซที่มีชื่อสำหรับแต่ละออบเจ็กต์ซ้อนกัน จึงนำกลับมาใช้ง่าย ส่วน type สร้างชื่อแทนชนิดข้อมูลเดียวที่เขียนออบเจ็กต์ซ้อนแบบอินไลน์

สร้างคลาส TypeScript ได้หรือไม่?

ไม่ได้ สร้างเฉพาะอินเทอร์เฟซหรือชื่อแทนชนิดข้อมูล หากต้องตรวจข้อมูลขณะทำงาน ให้ใช้เครื่องมือแปลง JSON เป็น Zod แล้วปรับสคีมาตามกฎของคุณ

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

{"name":null} มี name ที่มีค่า null ส่วน {} ไม่มี name เลย null จะคงอยู่ในชนิดข้อมูล และเพิ่ม ? เฉพาะเมื่อออบเจ็กต์บางตัวในอาร์เรย์เดียวกันไม่มีฟิลด์นั้น

JSON ที่รากเป็นอาร์เรย์จะได้ผลลัพธ์อะไร?

ได้ชื่อแทนชนิดข้อมูลสำหรับอาร์เรย์พร้อมอินเทอร์เฟซสำหรับสมาชิก เช่น ตัวอย่างด้านบนที่ Root เป็น RootValueItem[]

ข้อกำหนดและแหล่งอ้างอิง