nicetool.dev logo

JSON เป็น TypeScript

วางผลลัพธ์จาก API หรือออบเจ็กต์ JSON ไทป์จะอัปเดตขณะพิมพ์

JSON
โค้ดที่สร้าง
export interface User {
  id: number;
  name: string;
  email: string;
  score: number;
  active: boolean;
  tags: string[];
  address: Address;
  orders: Order[];
}

export interface Address {
  city: string;
  postcode: null;
}

export interface Order {
  id: number;
  total: number;
  paidAt?: string;
  coupon?: string;
}

ทำไมต้องสร้างไทป์จาก JSON?

API ไฟล์คอนฟิก และ webhook ส่งข้อมูลเป็น JSON แต่ TypeScript, Go และตัวตรวจสอบข้อมูลขณะรันต้องการโครงสร้างที่ชัดเจน การเขียน interface ด้วยมือสำหรับผลลัพธ์ขนาดใหญ่ทั้งช้าและผิดพลาดง่าย ฟิลด์ที่บางครั้งหายไป ตัวเลขที่บางครั้งเป็น null หรืออาร์เรย์ของออบเจ็กต์ที่ซ้อนกันล้วนเขียนผิดได้ง่าย เครื่องมือนี้อ่านตัวอย่างจริงแล้วอนุมานโครงสร้างให้ อาร์เรย์ของออบเจ็กต์จะถูกรวมกัน คีย์ที่มีเฉพาะบางรายการจะกลายเป็นไม่บังคับ คีย์ที่บางครั้งเป็น null จะเป็น nullable และออบเจ็กต์ที่ซ้อนกันแต่ละตัวได้ชื่อไทป์ของตัวเอง

ฟีเจอร์

  • • TypeScript interface หรือ type alias พร้อมฟิลด์ไม่บังคับ (?)
  • • Go struct พร้อม json tag, omitempty และชื่อแบบ Go (ID, URL)
  • • Zod schema พร้อมไทป์ TypeScript ที่อนุมาน เรียงลำดับให้อ้างอิงได้ถูกต้อง
  • • รวมอาร์เรย์ของออบเจ็กต์ และตรวจจับ null ค่าผสม และจำนวนเต็ม
  • • ใส่เครื่องหมายคำพูดให้คีย์ที่ไม่ใช่ตัวระบุที่ถูกต้อง เช่น "first-name"

ข้อมูลของคุณเป็นส่วนตัว

การแยกวิเคราะห์และการสร้างโค้ดทำในเบราว์เซอร์ ผลลัพธ์ API ที่มีข้อมูลลูกค้าจริงจะไม่ออกจากเครื่องของคุณ

ไม่อัปโหลด ใช้งานออฟไลน์ได้

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

  1. 1

    วางตัวอย่าง JSON เช่น ผลลัพธ์ที่คัดลอกจากแท็บ Network ของเบราว์เซอร์ Postman หรือ curl ยิ่งอาร์เรย์มีหลายรายการ ยิ่งตรวจจับฟิลด์ไม่บังคับได้แม่นยำ

  2. 2

    เลือกผลลัพธ์ TypeScript interface, Go struct หรือ Zod schema สำหรับ TypeScript สลับเป็น type alias ได้

  3. 3

    ตั้งชื่อไทป์หลัก เช่น User หรือ OrderResponse ออบเจ็กต์ซ้อนได้ชื่อตามคีย์ ส่วนรายการในอาร์เรย์ใช้รูปเอกพจน์ (orders เป็น Order)

  4. 4

    ตรวจผลลัพธ์ ปรับสิ่งที่ตัวอย่างบอกไม่ได้ (เช่น สตริงที่จริงเป็นวันที่หรือ enum) แล้วคัดลอกไปใช้ในโค้ด

ตัวอย่างการใช้งานจริง

กำหนดไทป์ให้ผลลัพธ์ REST API

วาง JSON จาก GET /api/users/42 แล้วได้ interface User พร้อมไทป์ Address ซ้อนอยู่ ใช้กับ fetch หรือ axios ได้ทันที

Go client สำหรับ API ภายนอก

สร้าง struct พร้อม json tag สำหรับ payload ของ webhook จาก Stripe หรือ GitHub คีย์ไม่บังคับได้ omitempty และออบเจ็กต์ซ้อนกลายเป็นไทป์แยก

ตรวจสอบข้อมูลขณะรันด้วย Zod

แปลง request body ตัวอย่างเป็น Zod schema แล้วใช้ schema.parse() ใน route handler ของ Next.js เพื่อปฏิเสธข้อมูลผิดรูปแบบ พร้อม z.infer สำหรับไทป์แบบสแตติก

ไฟล์คอนฟิก

วางไฟล์คอนฟิก JSON เพื่อได้ interface ที่มีไทป์ ทำให้ editor เติมคีย์อัตโนมัติและจับคำพิมพ์ผิดได้

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

ตรวจจับฟิลด์ไม่บังคับอย่างไร?+

เมื่อรากหรือค่าที่ซ้อนอยู่เป็นอาร์เรย์ของออบเจ็กต์ ทุกรายการจะถูกรวมกัน คีย์ที่ขาดไปอย่างน้อยหนึ่งรายการจะถูกระบุว่าไม่บังคับ (? ใน TypeScript, omitempty ใน Go, .optional() ใน Zod)

ค่า null จัดการอย่างไร?+

คีย์ที่เป็น null ในบางรายการและเป็นสตริงในรายการอื่นจะเป็น string | null (nullable() ใน Zod, *string ใน Go) ส่วนคีย์ที่เป็น null ทุกครั้งในตัวอย่างจะคงเป็น null เพราะไม่รู้ไทป์จริง

ทำไมตัวเลขเป็น int64 ใน Go?+

จำนวนเต็มในตัวอย่างเป็น int64 ส่วนทศนิยมเป็น float64 หากฟิลด์มีทั้งสองแบบ จะขยายเป็น float64 (number ใน TypeScript)

ตรวจจับวันที่ enum หรือ UUID ได้ไหม?+

ไม่ได้ JSON ไม่มีไทป์วันที่หรือ enum จึงแสดงเป็น string ให้ปรับเองด้วยมือ เช่น z.string().datetime() หรือ union ของค่าคงที่