ข้ามไปยังเนื้อหาหลัก
LibraTool logoLibraTool

แปลง JSON เป็น TypeScript ฟรี

สร้าง TypeScript interface หรือ type alias จาก JSON object หรือ array ใดก็ได้ วาง JSON และรับ TypeScript type ที่พร้อมใช้งานทันที

ใช้งานได้แบบออฟไลน์เมื่อโหลดแล้ว
export interface User {
  id: number;
  name: string;
  email: string;
  isActive: boolean;
  score: number;
  tags: string[];
  address?: null;
}

export interface Root {
  user: User;
  createdAt: string;
  version: number;
}

การใช้งานทั่วไป

  • สร้างประเภท TypeScript จากการตอบสนองของ APIวางการตอบสนอง JSON API และสร้างอินเทอร์เฟซ TypeScript ทันทีเพื่อให้โค้ด front-end ของคุณปลอดภัยตามประเภท
  • ประเภท TypeScript สำหรับวัตถุการกำหนดค่าและการตั้งค่าสร้างอินเทอร์เฟซ TypeScript จากไฟล์การกำหนดค่า JSON เพื่อเพิ่มความปลอดภัยของประเภทให้กับการตั้งค่าแอปพลิเคชันของคุณ
  • สร้างประเภท TypeScript จากบันทึกฐานข้อมูลแปลงบันทึกฐานข้อมูลที่ส่งออกเป็น JSON หรือผลลัพธ์การค้นหา ORM เป็นอินเทอร์เฟซ TypeScript สำหรับการพิมพ์ชั้นข้อมูล
  • ประเภทข้อมูล Mock และ Test Fixturesสร้างอินเทอร์เฟซ TypeScript จากข้อมูล mock JSON และการแก้ไขการทดสอบเพื่อพิมพ์การทดสอบหน่วยและเรื่อง Storybook ของคุณ
  • ประเภทการตอบสนองของ API บริษัทที่สามสร้างอินเทอร์เฟซ TypeScript จากการตอบสนองของ API บริษัทที่สาม ซึ่งประเภทอย่างเป็นทางการหายไปหรือล้าสมัย

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

เครื่องมือนี้ใช้อัลกอริทึมอนุมานชนิดแบบเรียกซ้ำที่เขียนขึ้นเองโดยไม่มีไลบรารีภายนอก — JSON.parse เพื่อตรวจสอบและแยกวิเคราะห์อินพุต แล้วการไล่ที่กำหนดเองซึ่งเดินผ่านทุกค่าในต้นไม้ JSON และสร้างการประกาศ TypeScript interface หรือ type ในเบราว์เซอร์โดยตรง ไม่มีสิ่งใดถูกส่งไปยังเซิร์ฟเวอร์

  1. 1
    แยกวิเคราะห์และตรวจสอบ JSON
    อินพุตของคุณถูกส่งให้ JSON.parse หากไม่สำเร็จ ข้อผิดพลาดการแยกวิเคราะห์ที่แน่นอนจะแสดงใต้อินพุตทันที การแยกวิเคราะห์ที่สำเร็จจะได้ต้นไม้ค่าที่มีชนิดซึ่งขับเคลื่อนการแปลงที่เหลือ
  2. 2
    อนุมานชนิดแบบเรียกซ้ำ
    ฟังก์ชัน getType แบบเรียกซ้ำไล่ทุกโหนด: ค่าพื้นฐานจับคู่เป็น string, number, boolean หรือ null ออบเจกต์สร้าง interface ใหม่ที่มีชื่อ อาร์เรย์ของออบเจกต์รวมคีย์จากทุกองค์ประกอบ คีย์ที่มีเฉพาะบางรายการจึงกลายเป็นแบบไม่บังคับ และชนิดค่าที่ขัดแย้งถูกเชื่อมด้วย |
  3. 3
    ตั้งชื่อ interface โดยไม่ชนกัน
    ออบเจกต์ที่ซ้อนแต่ละตัวได้ชื่อแบบ PascalCase จากคีย์ JSON (snake_case, kebab-case และช่องว่างถูกทำให้เป็นมาตรฐานทั้งหมด) หากออบเจกต์สองตัวที่โครงสร้างต่างกันจะใช้ชื่อเดียวกัน จะเติมตัวเลขต่อท้าย (Data, Data2, …) แทนที่จะเขียนทับคำจำกัดความก่อนหน้าโดยไม่แจ้ง
  4. 4
    แสดงผลลัพธ์และดาวน์โหลดได้
    interface ที่ซ้อนกันถูกสร้างก่อน แล้วตามด้วยชนิดราก จัดรูปแบบเป็น export interface หรือ export type ตามที่คุณเลือก ผลลัพธ์คัดลอกไปยังคลิปบอร์ดหรือดาวน์โหลดเป็นไฟล์ .ts ได้ — ทั้งหมดสร้างด้วย Blob มาตรฐานโดยไม่มีการเรียกเซิร์ฟเวอร์ไปกลับ

เครื่องมือที่เกี่ยวข้อง

📋

JSON Schema เป็นฟอร์ม

วาง JSON Schema และรับฟอร์มที่ทำงานได้จริง — ข้อความ ตัวเลข checkbox dropdown และฟิลด์รายการ — จากนั้นคัดลอก JSON ที่ input ของคุณสร้าง เหมาะสำหรับ prototype API request body ทำงานในเบราว์เซอร์

ลองใช้
⌨️

ทดสอบความเร็วพิมพ์ (WPM)

วัดความเร็วการพิมพ์ (WPM) และความแม่นยำด้วยการทดสอบแบบจับเวลา นับคำ ข้อความคำพูด กำหนดเอง และโหมดเซน WPM แบบสด ความเร็วดิบ ความสม่ำเสมอ กราฟผลลัพธ์ หลายภาษา และผลตอบรับรายอักขระ — ทั้งหมดในเบราว์เซอร์ของคุณ

ลองใช้
📐

สร้าง CSS clamp()

สร้างค่า CSS clamp() แบบ fluid สำหรับ typography และ spacing ที่ responsive กำหนดขนาดต่ำสุด/สูงสุดและช่วง viewport ดูตัวอย่างสดๆ และคัดลอก CSS บรรทัดเดียว

ลองใช้

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