JSON เป็น TypeScript

อัปโหลด

อินเทอร์เฟซ TypeScript

ใส่ JSON ด้านซ้ายเพื่อเริ่มแปลง

พร้อม

เครื่องมือออนไลน์ฟรี JSON เป็น TypeScript อนุมานข้อมูล JSON เป็นนิยามชนิด interface TS มาตรฐานโดยอัตโนมัติ รองรับ sub-interface ที่ซ้อนกัน ชนิดยูเนียนของอาเรย์ ฟิลด์ทางเลือกและ readonly เลือกย่อหน้า 2/4 ช่องว่างได้ ประมวลผลในเบราว์เซอร์เท่านั้นไม่มีการอัปโหลด

คำแนะนำที่เกี่ยวข้อง

ตัวแปลง SQL

จัดรูปแบบ JSON

JSON เป็น CSV

JSON → YAML

คิวรี JSONPath

เครื่องมือจัดรูปแบบ SQL

เกี่ยวกับ JSON เป็น TypeScript: เปลี่ยนข้อมูล JSON เป็นชนิด TS โดยอัตโนมัติ

JSON เป็น TypeScript คือกระบวนการแปลงข้อมูลในรูปแบบ JSON (อ็อบเจ็กต์ JSON หรืออาเรย์ JSON) เป็นการประกาศชนิด interface ของ TypeScript JSON (JavaScript Object Notation) เป็นรูปแบบข้อมูลมาตรฐานสำหรับ REST API, ไฟล์คอนฟิก, บันทึก และมีอยู่ทั่วไปในการพัฒนา frontend และ backend ในขณะที่ TypeScript เป็น superset ของ JavaScript ที่เพิ่มการตรวจสอบชนิดแบบสแตติกให้กับโค้ด ในการพัฒนา มักจำเป็นต้องเขียน interface TS ที่สอดคล้องกับ JSON ที่ API ส่งคืน การเขียนด้วยตนเองมีแนวโน้มที่จะเกิดข้อผิดพลาดและใช้เวลานาน — เครื่องมือนี้มีจุดมุ่งหมายเพื่อทำให้กระบวนการนี้เป็นอัตโนมัติ

แก่นของเครื่องมือคือการอนุมานโครงสร้างของอ็อบเจ็กต์ JSON เป็น interface TypeScript โดยอัตโนมัติ key ของอ็อบเจ็กต์ JSON แต่ละตัวจะกลายเป็นชื่อคุณสมบัติของ interface, ชนิดตัวอักษรของ value แต่ละตัวจะถูกแมปกับชนิด TS ที่เกี่ยวข้อง: สตริงเป็น `string`, ตัวเลขเป็น `number`, บูลีนเป็น `boolean`, null เป็น `null`, อาเรย์เป็น `T[]`, อ็อบเจ็กต์ซ้อนเป็น sub-interface อิสระ กระบวนการทั้งหมดเสร็จสิ้นในเบราว์เซอร์โดยสมบูรณ์ ไม่ต้องการบริการ backend สร้างนิยามชนิดที่สมบูรณ์และใช้งานได้ภายในไม่กี่วินาที

การอนุมานชนิดเป็นแก่นของการแปลง JSON เป็น TypeScript ตัว JSON เองมีเพียง 6 ชนิดพื้นฐาน (null, boolean, number, string, array, object) ในขณะที่ระบบชนิดพื้นฐานของ TypeScript ประกอบด้วย string, number, boolean, null, undefined, any, unknown, void, never, object, Array, T[], ชนิดยูเนียน (A | B) ฯลฯ ฟังก์ชัน getTsType ของเครื่องมือเราแมปตาม typeof และรูปแบบเฉพาะของ value: typeof null แมปเป็น `null`; typeof undefined แมปเป็น `undefined`; typeof boolean แมปเป็น `boolean`; typeof number แมปเป็น `number`; typeof string แมปเป็น `string`; เมื่อ Array.isArray() ตรง จะถูกประมวลผลเป็นอาเรย์

การจัดการอ็อบเจ็กต์ซ้อนเป็นความสามารถสำคัญของเครื่องมือ เมื่อ JSON มีอ็อบเจ็กต์ซ้อน เครื่องมือจะสร้าง sub-interface อิสระแบบวนซ้ำ หลีกเลี่ยงการซ้ำซ้อนของชนิด ตัวอย่างเช่น `address: { street, city }` จะสร้าง sub-interface `RootAddress` และ interface หลักจะอ้างอิงผ่าน `address: RootAddress` กฎการตั้งชื่อ sub-interface: "ชื่อ interface หลัก + อักษรตัวแรกของชื่อฟิลด์เป็นตัวพิมพ์ใหญ่" รักษาความชัดเจนเชิงความหมาย Set processedTypes ใช้สำหรับการขจัดข้อมูลซ้ำ อ็อบเจ็กต์ซ้อนที่มีโครงสร้างเดียวกันจะสร้าง interface เพียงครั้งเดียว

การอนุมานชนิดอาเรย์มีสามโหมดการประมวลผล ประการแรก เมื่ออาเรย์ว่าง จะสร้าง `any[]` เป็นทางสำรอง (เนื่องจากไม่สามารถอนุมานชนิดขององค์ประกอบได้) ประการที่สอง เมื่อองค์ประกอบทั้งหมดเป็นชนิดเดียวกัน จะสร้างรูปแบบ `T[]` (เช่น `string[]`, `User[]`) ประการที่สาม เมื่อชนิดขององค์ประกอบไม่สอดคล้องกัน จะสร้างอาเรย์ยูเนียน `(A | B)[]` (เช่น `(string | number)[]`) การแบ่งแยกนี้ทำให้ชนิดที่สร้างขึ้นถูกต้องและอ่านง่าย หลีกเลี่ยงการใช้ `any[]` มากเกินไปโดยไม่จำเป็น

ฟิลด์ทางเลือก (?) เป็นฟีเจอร์สำคัญของโหมด TypeScript strict เมื่อเปิดใช้งาน เครื่องมือจะสแกนค่าของแต่ละฟิลด์ และหากเป็น null หรือ undefined จะเพิ่มตัวปรับ `?` ใน interface: `name?: string` หมายความว่าฟิลด์นั้นสามารถละเว้นได้ สิ่งนี้มีประโยชน์มากสำหรับฟิลด์ทางเลือกที่ API ของ backend ส่งคืน หลีกเลี่ยงข้อผิดพลาดรันไทม์เมื่อเข้าถึงฟิลด์ที่เป็น undefined ฟิลด์ readonly เน้นความไม่เปลี่ยนแปลง โค้ดที่สร้างขึ้นมีรูปแบบ `readonly id: number` เหมาะสำหรับการกำหนดค่าคอนฟิก สแน็ปช็อตสถานะ DTO ฯลฯ

interface vs type alias เป็นตัวเลือกทั่วไปสำหรับผู้ใช้ TypeScript เครื่องมือนี้เลือกสร้าง interface อย่างสม่ำเสมอ เนื่องจาก interface เป็นวิธีมาตรฐานในการอธิบายชนิดของอ็อบเจ็กต์ใน TypeScript รองรับการรวมการประกาศ (declaration merging), คีย์เวิร์ด implements, การสืบทอด extends เหมาะสมกับมาตรฐานการเขียนโค้ดของโปรเจกต์ frontend หลัก ๆ อย่าง React, Vue, Angular มากกว่า type alias มีประสิทธิภาพมากกว่าในการอธิบายชนิดยูเนียน ชนิดตัดข้าม ชนิดฟังก์ชัน แต่สำหรับชนิดอ็อบเจ็กต์ interface เป็นที่นิยมมากกว่า

การแปลงแบบเรียลไทม์เป็นฟีเจอร์ที่ใช้งานได้จริงของเครื่องมือ หลังจากผู้ใช้ป้อน JSON 400ms debounce จะทริกเกอร์การแปลงโดยอัตโนมัติโดยไม่ต้องคลิกปุ่มด้วยตนเอง เมื่อรวมกับการเน้นไวยากรณ์ TypeScript ของ CodeMirror (ผ่านตัวเลือก typescript: true ใน @codemirror/lang-javascript) ผู้ใช้สามารถเห็น interface ที่สร้างขึ้นทันที แก้ไขอินพุต และสังเกตการเปลี่ยนแปลงของเอาต์พุต ข้อเสนอแนะแบบเรียลไทม์นี้ช่วยเพิ่มประสิทธิภาพการออกแบบชนิดอย่างมาก โดยเฉพาะอย่างยิ่งเมื่อลองผิดลองถูกอย่างรวดเร็ว

การซ่อมแซมข้อผิดพลาด JSON อัตโนมัติช่วยเพิ่มความทนทานของเครื่องมือ ในทางปฏิบัติ JSON ที่ผู้ใช้ป้อนมักมีปัญหาเล็กน้อย เช่น เครื่องหมายจุลภาคท้าย เครื่องหมายคำพูดเดี่ยว การขาดเครื่องหมายคำพูด ความคิดเห็น ฟังก์ชัน tryFixJSON ในตัวจะพยายามซ่อมแซมข้อผิดพลาดทั่วไปโดยอัตโนมัติเมื่อ JSON.parse ล้มเหลว แจ้งผู้ใช้หากซ่อมแซมสำเร็จ หากยังแยกวิเคราะห์ไม่ได้ ตำแหน่งและสาเหตุของข้อผิดพลาดจะแสดงทางด้านขวา แนะนำผู้ใช้ในการแก้ไข การออกแบบนี้ยกระดับการใช้งานจริงของเครื่องมือ ขจัดความจำเป็นในการปรับด้วยตนเองซ้ำ ๆ เนื่องจากข้อผิดพลาดเล็กน้อย

การประมวลผล frontend ล้วน ๆ เป็นสถาปัตยกรรมหลักของเครื่องมือนี้ การแยกวิเคราะห์ JSON การอนุมานชนิด การสร้าง interface ทั้งหมดทำงานใน JavaScript ของเบราว์เซอร์ ไม่ส่งข้อมูลใด ๆ ไปยังเซิร์ฟเวอร์ใด ๆ การออกแบบนี้มีประโยชน์หลักสองประการ: ประการแรก เนื้อหา JSON อาจมีข้อมูลที่ละเอียดอ่อนของผู้ใช้ (คีย์ API, โทเค็น, ข้อมูลผู้ใช้) การประมวลผลในเครื่องขจัดความเสี่ยงในการรั่วไหลโดยสมบูรณ์ ประการที่สอง ความเร็วในการแปลงถูกจำกัดด้วย CPU ของอุปกรณ์เท่านั้น JSON ที่น้อยกว่า 1MB จะถูกแปลงเกือบจะในทันที โดยไม่ต้องรอการเดินทางไปกลับของเครือข่าย เมื่อเปรียบเทียบกับบริการออนไลน์บางอย่างที่ต้องลงทะเบียนและเข้าสู่ระบบ สิ่งนี้ให้การปกป้องความเป็นส่วนตัวและประสิทธิภาพที่ดีกว่า

กรณีการใช้งาน

ในการพัฒนา frontend แปลงการตอบสนอง JSON จาก REST API หรือ GraphQL เป็น interface TS อย่างรวดเร็ว หลีกเลี่ยงการเขียนนิยามชนิดด้วยตนเอง
เมื่อโปรเจกต์ React/Vue/Angular ต้องการการประกาศชนิดสำหรับ Props, State, พารามิเตอร์ของคอมโพเนนต์ สร้างได้ในไม่กี่วินาทีจาก JSON ตัวอย่าง
ในโปรเจกต์ TypeScript full-stack เมื่อ frontend และ backend ใช้นิยามชนิดร่วมกัน mock JSON ของ backend สามารถทำหน้าที่เป็นแหล่งชนิดสำหรับ frontend
เมื่อรวมเข้ากับ API ของบุคคลที่สาม (การจัดส่ง สภาพอากาศ การชำระเงิน ฯลฯ) สร้าง interface TypeScript ที่เกี่ยวข้องอย่างรวดเร็ว ขจัดความจำเป็นในการศึกษาเอกสาร
อนุมานนิยามชนิดย้อนกลับจากข้อมูล mock, ฟิกซ์เจอร์ทดสอบ, ไฟล์คอนฟิก JSON เพื่อเสริมสร้างความปลอดภัยของชนิดและคำแนะนำ IDE
แปลง JSON Schema ที่ส่งออกจาก ORM ของฐานข้อมูลเป็น interface TypeScript เพื่อรวมเข้ากับนิยาม DTO ของ backend Node.js
เมื่อเรียนรู้ TypeScript แปลง JSON ที่มีอยู่เป็นตัวอย่าง interface เพื่อทำความเข้าใจไวยากรณ์ของชนิดซ้อน ชนิดยูเนียน ฟิลด์ทางเลือก
เมื่อปรับโครงสร้างโค้ดใหม่ แปลงตัวอักษรอ็อบเจ็กต์ JS ที่กระจัดกระจายเป็น interface อย่างเป็นทางการ เพิ่มความสามารถในการอ่านโค้ดและความปลอดภัยของชนิด

วิธีการใช้งาน

วางเนื้อหา JSON ลงในกล่องป้อนข้อมูลทางซ้าย หรือคลิกปุ่ม "อัปโหลด" เพื่อเลือกไฟล์ .json/.txt หรือคลิก "ตัวอย่าง" เพื่อโหลดตัวอย่างในตัว
คลิกปุ่มชื่อ interface ทางด้านขวาของแถบเครื่องมือ (หรือไอคอนเฟือง) ปรับแต่งชื่อ interface หลัก (ค่าเริ่มต้น Root) เปิดใช้งานฟิลด์ทางเลือก/readonly
เครื่องมือจะแปลงอัตโนมัติ (debounce 400ms หลังจากป้อนข้อมูล) ดูโค้ด interface TypeScript ที่สร้างขึ้นทางด้านขวา การเน้นของ CodeMirror ช่วยให้อ่านง่าย
เลือกสไตล์การย่อหน้า (2 หรือ 4 ช่องว่าง) ปรับความกว้างแผงซ้าย/ขวาของแถบเครื่องมือเพื่อประสบการณ์การดูที่ดีที่สุด
คลิก "คัดลอก" เพื่อคัดลอกโค้ด TS ไปยังคลิปบอร์ด หรือ "ดาวน์โหลด" เพื่อบันทึกเป็นไฟล์ `${interfaceName}.ts` (เช่น User.ts)
วางโค้ดในไดเรกทอรี `types/` หรือ `src/types/` ของโปรเจกต์ ใช้ผ่าน import ตามต้องการ

คุณสมบัติ

การอนุมานชนิดอัจฉริยะ: ระบุชนิด null, boolean, number, string, array, object ฯลฯ โดยอัตโนมัติและแมปกับไวยากรณ์ TS ดั้งเดิม
ขยายอ็อบเจ็กต์ซ้อนอัตโนมัติ: สร้าง sub-interface อิสระสำหรับอ็อบเจ็กต์ซ้อน (เช่น RootAddress) โดยอัตโนมัติ รักษาลำดับชั้นของชนิดให้ชัดเจนและหลีกเลี่ยงความซ้ำซ้อน
การจัดการชนิดอาเรย์อัจฉริยะ: สร้าง `T[]` สำหรับองค์ประกอบชนิดเดียวกัน, อาเรย์ยูเนียน `(A | B)[]` สำหรับชนิดผสม, `any[]` เป็นทางสำรองสำหรับอาเรย์ว่าง
การทำเครื่องหมายฟิลด์ทางเลือก: เมื่อเปิดใช้งาน จะตรวจจับฟิลด์ null/undefined โดยอัตโนมัติ เพิ่มตัวปรับ `?` สร้างโค้ดที่เป็นไปตามโหมด TypeScript strict
การรองรับฟิลด์ readonly: เมื่อเปิดใช้งาน จะเพิ่มตัวปรับ `readonly` ให้กับทุกฟิลด์ เหมาะสำหรับสถานะที่ไม่เปลี่ยนแปลง คอนฟิก DTO ฯลฯ
การปรับแต่งชื่อ interface: ชื่อ interface หลักสามารถกำหนดค่าได้ (ค่าเริ่มต้น Root) ชื่อไฟล์ที่ดาวน์โหลดก็ใช้ชื่อนี้ด้วย (เช่น User.ts)
เลือกย่อหน้า 2/4 ช่องว่างได้: สลับได้ด้วยคลิกเดียวบนแถบเครื่องมือระหว่างสไตล์ 2 ช่องว่าง (ค่าเริ่มต้น ESLint) และ 4 ช่องว่าง
การแปลงอัตโนมัติแบบเรียลไทม์: หลังจาก 400ms ของการป้อน JSON จะมี debounce และการแปลงอัตโนมัติ โดยไม่ต้องคลิกปุ่ม รองรับการวาง การอัปโหลดไฟล์ ตัวอย่าง - สามวิธีในการป้อนข้อมูล
การซ่อมแซมข้อผิดพลาด JSON อัตโนมัติ: ฟังก์ชันซ่อมแซม tryFixJSON ในตัว จัดการเครื่องหมายจุลภาคท้าย เครื่องหมายคำพูดเดี่ยว การขาดเครื่องหมายคำพูด และข้อผิดพลาดทางไวยากรณ์ทั่วไปอื่น ๆ โดยอัตโนมัติ
การเน้นโค้ด TypeScript: ผลลัพธ์ทางด้านขวาใช้การเน้น CodeMirror + JavaScript (TypeScript) อ่านง่าย
คัดลอกและดาวน์โหลด: คัดลอกไปยังคลิปบอร์ดด้วยคลิกเดียว หรือดาวน์โหลดเป็นไฟล์ .ts มาตรฐานเพื่อใช้ในโปรเจกต์ frontend โดยตรง
การประมวลผลในเบราว์เซอร์เท่านั้น: การแยกวิเคราะห์ JSON การอนุมานชนิด การสร้าง interface ทั้งหมดทำใน JavaScript ของเบราว์เซอร์ ข้อมูลต้นฉบับจะไม่ถูกอัปโหลด

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

จะแปลง JSON เป็น TypeScript interface ได้อย่างไร?

วางเนื้อหา JSON ลงในกล่องป้อนข้อมูลทางซ้าย เครื่องมือจะอนุมานชนิดของแต่ละฟิลด์ (string, number, boolean, array, object ฯลฯ) โดยอัตโนมัติและสร้างนิยาม interface มาตรฐานของ TypeScript อ็อบเจ็กต์ที่ซ้อนกันจะสร้าง sub-interface โดยอัตโนมัติเพื่อรักษาลำดับชั้นของชนิดให้ชัดเจน การแปลงเกิดขึ้นอัตโนมัติหลังจาก 400ms ของการป้อนข้อมูลโดยไม่ต้องคลิกปุ่ม

รองรับการสร้าง type alias หรือ interface?

เครื่องมือนี้สร้างการประกาศ interface ของ TypeScript เท่านั้น (ไม่รองรับ type alias) interface เป็นวิธีมาตรฐานในการอธิบายชนิดของอ็อบเจ็กต์ใน TypeScript รองรับการรวมการประกาศ (declaration merging) และคีย์เวิร์ด implements เป็นที่นิยมในโปรเจกต์ frontend ของ React, Vue, Angular

จะทำเครื่องหมายฟิลด์ทางเลือกได้อย่างไร?

เมื่อเปิดใช้งาน "ฟิลด์ทางเลือก (?)" ในการตั้งค่า เครื่องมือจะตรวจจับฟิลด์ที่มีค่า null หรือ undefined โดยอัตโนมัติและเพิ่มตัวปรับ `?` ใน interface ตัวอย่างเช่น `name?: string` หมายความว่าฟิลด์นั้นสามารถละเว้นได้ โค้ดที่สร้างขึ้นเป็นไปตามข้อกำหนดโหมดเข้มงวด TypeScript strict

จะสร้างฟิลด์ readonly ได้อย่างไร?

เมื่อเปิดใช้งาน "ฟิลด์ readonly" ในการตั้งค่า ทุกฟิลด์จะได้รับตัวปรับ `readonly` โดยอัตโนมัติ เช่น `readonly id: number` interface ที่สร้างขึ้นเน้นความไม่เปลี่ยนแปลง เหมาะสำหรับการกำหนดค่าคอนฟิก สแน็ปช็อตสถานะ หรือ DTO

ชนิดของอาเรย์ได้รับการจัดการอย่างไร?

เครื่องมือวิเคราะห์ชนิดขององค์ประกอบอาเรย์ หากองค์ประกอบทั้งหมดเป็นชนิดเดียวกัน จะสร้างรูปแบบ `T[]` (เช่น `string[]`) หากชนิดต่างกัน จะสร้างอาเรย์ยูเนียน `(A | B)[]` (เช่น `(string | number)[]`) หากอาเรย์ว่างเปล่า จะสร้าง `any[]` เป็นทางสำรอง

อ็อบเจ็กต์ที่ซ้อนกันสร้างหลาย interface หรือไม่?

ใช่ อ็อบเจ็กต์ที่ซ้อนกันแต่ละตัวจะสร้าง sub-interface อิสระ กฎการตั้งชื่อ: "ชื่อ interface หลัก + อักษรตัวแรกของชื่อฟิลด์เป็นตัวพิมพ์ใหญ่" ตัวอย่างเช่น หาก Root มีอ็อบเจ็กต์ address จะสร้างทั้ง interface Root และ RootAddress sub-interface จะอ้างอิงถึงกันโดยอัตโนมัติ หลีกเลี่ยงการซ้ำซ้อนของนิยามชนิด

ชื่อ interface ปรับแต่งได้หรือไม่?

ได้ คลิกปุ่มชื่อ interface ทางด้านขวาของแถบเครื่องมือ (หรือในการตั้งค่า) คุณสามารถปรับแต่งชื่อ interface หลักได้ (ค่าเริ่มต้น Root) ไฟล์ .ts ที่ดาวน์โหลดจะถูกตั้งชื่อตามชื่อนี้ด้วย (เช่น `User.ts`) ชื่อ sub-interface จะถูกสร้างขึ้นโดยอัตโนมัติตามชื่อหลัก

ไฟล์ .ts ที่ดาวน์โหลดสามารถใช้ในโปรเจกต์ได้โดยตรงหรือไม่?

ได้ โค้ดที่สร้างขึ้นเป็นไปตามมาตรฐานการเขียนโค้ด TypeScript ประกอบด้วยนิยามชนิดที่สมบูรณ์ interface ที่ซ้อนกัน การอนุมานชนิดยูเนียน ฯลฯ สามารถคัดลอกไปยังโปรเจกต์ React, Vue, Angular หรือ Node.js ได้โดยตรง ชื่อไฟล์ที่ดาวน์โหลดคือ `${interfaceName}.ts` เช่น User.ts

จะทำอย่างไรถ้าการแยกวิเคราะห์ JSON ล้มเหลว?

หาก JSON มีข้อผิดพลาดทั่วไป เช่น การใส่เครื่องหมายจุลภาคท้าย การขาดเครื่องหมายคำพูด การใช้เครื่องหมายคำพูดเดี่ยวแทนคู่ เครื่องมือจะเรียก tryFixJSON โดยอัตโนมัติเพื่อพยายามซ่อมแซม หากซ่อมแซมสำเร็จ ผู้ใช้จะได้รับแจ้ง หากไม่สามารถซ่อมแซมได้ ตำแหน่งและสาเหตุของข้อผิดพลาดจะแสดงทางด้านขวา คุณสามารถจัดรูปแบบใหม่ด้วยการย่อหน้า 2/4 ช่องว่างแล้วลองอีกครั้ง

โครงสร้างข้อมูล JSON ใดบ้างที่รองรับ?

รองรับโครงสร้างข้อมูล JSON ที่ถูกต้องทั้งหมด: ชนิดพื้นฐาน (null, boolean, number, string) อาเรย์ (หนึ่งมิติหรือหลายมิติ) อ็อบเจ็กต์ซ้อน (ความลึกเท่าใดก็ได้) อาเรย์ชนิดผสม (สร้างชนิดยูเนียน) อินพุตที่ไม่รองรับ: JSON ที่มีฟังก์ชัน, Symbol, undefined และค่าพิเศษอื่น ๆ ของ JavaScript (สิ่งเหล่านี้ไม่ใช่ JSON ที่ถูกต้อง)

สามารถเลือกจำนวนช่องว่างของการย่อหน้าได้หรือไม่?

ได้ มีดรอปดาวน์การตั้งค่าการย่อหน้าทางด้านขวาของแถบเครื่องมือ รองรับสองสไตล์คือ 2 ช่องว่างและ 4 ช่องว่าง 2 ช่องว่างเป็นสไตล์เริ่มต้นของ ESLint/Prettier, 4 ช่องว่างเหมาะสำหรับโปรเจกต์ที่ต้องการการย่อหน้าที่หลวมกว่า โค้ดที่สร้างขึ้นรักษาการย่อหน้าที่สอดคล้องกันเพื่อให้อ่านง่ายและบำรุงรักษาได้

แตกต่างจาก JSON Schema, Zod และไลบรารีชนิดอื่น ๆ อย่างไร?

JSON Schema เหมาะสำหรับการตรวจสอบข้อมูลรันไทม์ (ขอบเขต API, การตรวจสอบอินพุตผู้ใช้); Zod/yup เป็นไลบรารีตรวจสอบรันไทม์ที่เป็นมิตรกับ TypeScript สามารถสร้างชนิด TS จาก schema เครื่องมือของเราเป็นตัวสร้างนิยามชนิดล้วน ๆ ที่เบา ไม่ทำการตรวจสอบรันไทม์ มุ่งเน้นไปที่สถานการณ์การนิยามชนิดสแตติกของ frontend เร็วกว่าและไม่มีการพึ่งพา

การแก้ไขปัญหา

จะทำอย่างไรถ้า interface ที่สร้างขึ้นไม่ถูกต้อง?

สาเหตุทั่วไป: การแยกวิเคราะห์ JSON ล้มเหลว ข้อผิดพลาดในการจดจำอ็อบเจ็กต์ซ้อน ข้อผิดพลาดในการอนุมานชนิดอาเรย์ วิธีแก้: 1) ตรวจสอบว่า JSON ถูกต้องหรือไม่ (ใช้เครื่องมือจัดรูปแบบ JSON); 2) สำหรับอ็อบเจ็กต์ซ้อน ยืนยันความสัมพันธ์การอ้างอิงของ sub-interface; 3) สำหรับอาเรย์ ยืนยันว่าชนิดขององค์ประกอบสอดคล้องกัน; 4) สร้างใหม่หรือปรับแต่งโค้ดที่สร้างขึ้นด้วยตนเอง interface ที่สร้างขึ้นเป็นฉบับร่าง ต้องปรับรายละเอียดตาม API จริงของโปรเจกต์

ไฟล์ .ts ที่ดาวน์โหลดทำให้เกิดข้อผิดพลาดในการคอมไพล์ในโปรเจกต์?

สาเหตุที่เป็นไปได้: 1) tsconfig.json ไม่ได้เปิดใช้งานโหมด strict แต่สร้างฟิลด์ readonly; 2) ชื่อ interface ขัดแย้งกับชนิดอื่นในโปรเจกต์; 3) ชื่อฟิลด์เป็นคีย์เวิร์ด TypeScript (เช่น `class`, `type`) วิธีแก้: ปรับการตั้งค่า strict ใน tsconfig, แก้ไขชื่อ interface, เพิ่ม escape เครื่องหมายคำพูดสำหรับฟิลด์ที่ขัดแย้ง (เช่น `"class": string`)

JSON มีอาเรย์ซ้อน การอนุมานชนิดไม่ถูกต้อง?

เครื่องมือนี้ประมวลผลอาเรย์หลายมิติ (เช่น `[[1, 2], [3, 4]]`) แบบวนซ้ำ สร้าง `number[][]` ในที่สุด หากชนิดขององค์ประกอบอาเรย์ซ้อนไม่สอดคล้องกัน เครื่องมือจะสร้างรูปแบบ `((A | B)[])[]` อาเรย์ว่างเปล่าจะสร้าง `any[]` เสมอ เนื่องจากไม่สามารถอนุมานชนิดขององค์ประกอบได้

ค่า null ถูกแมปเป็นชนิด `null` แทนที่จะเป็นฟิลด์ทางเลือก?

ตามค่าเริ่มต้น เครื่องมือจะแมปค่า null ใน JSON ไปยังชนิด `null` ของ TS (เช่น `middleName: null`) หากคุณต้องการสร้างฟิลด์ทางเลือก (`middleName?: string`) คุณต้อง: 1) เปิดใช้งานตัวเลือก "ฟิลด์ทางเลือก" (แนะนำ); 2) หรือเปลี่ยนค่า null ใน JSON เป็นฟิลด์ที่หายไป; 3) หรือหลังจากสร้างแล้ว เปลี่ยน `null` เป็น `string | null` หรือ `?` ด้วยตนเอง

ชื่อ interface และชื่อไฟล์ที่ดาวน์โหลดไม่ตรงกัน?

ในเครื่องมือ ทั้งสองเป็นค่าเดียวกัน ควบคุมโดยการตั้งค่า "ชื่อ interface" (ค่าเริ่มต้น Root) ชื่อไฟล์ที่ดาวน์โหลดคือ `${interfaceName}.ts` หากดูเหมือนไม่สอดคล้องกัน ให้ตรวจสอบว่ามีหลายแท็บเปิดอยู่ซึ่งอาจทำให้การตั้งค่าไม่ซิงค์ แนะนำให้สร้างใหม่หลังจากแก้ไขการตั้งค่า

โค้ดที่สร้างมีชนิด `any` เป็นจำนวนมาก?

สาเหตุที่เป็นไปได้: 1) JSON มีชนิดที่ไม่รู้จัก (จริง ๆ แล้วเป็นอ็อบเจ็กต์แต่ถูกแยกวิเคราะห์ผิด); 2) อาเรย์ว่างทำให้สำรองด้วย any[]; 3) ค่าฟิลด์เป็น null และไม่ได้เปิดใช้งานตัวเลือกฟิลด์ทางเลือก วิธีแก้: ตรวจสอบความสมบูรณ์ของข้อมูล JSON เพิ่มข้อมูลตัวอย่างเพื่อให้เครื่องมืออนุมานได้แม่นยำยิ่งขึ้น ระบุชนิดด้วยตนเองสำหรับอาเรย์ที่ว่างเปล่าเสมอ (เช่น `User[]`)

ต้องการรวม interface ที่สร้างขึ้นกับชนิดที่มีอยู่?

TypeScript interface รองรับการรวมการประกาศ (declaration merging) interface ที่มีชื่อเดียวกันจะรวมคุณสมบัติโดยอัตโนมัติ เพียงสร้าง interface ที่มีชื่อเดียวกันในโปรเจกต์และ export จากนั้นรวม: เช่น เครื่องมือสร้าง `export interface User { id: number }` คุณเขียน `export interface User { name: string }` ในโปรเจกต์ ทั้งสองจะถูกรวมเป็น `{ id: number; name: string }` โดยอัตโนมัติ

อภิธานศัพท์

JSON (JavaScript Object Notation): รูปแบบการแลกเปลี่ยนข้อมูลที่มีน้ำหนักเบา อิงตามไวยากรณ์อ็อบเจ็กต์ JavaScript แต่เป็นอิสระจากภาษาเขียนโปรแกรม รองรับ 6 ชนิดพื้นฐาน: อ็อบเจ็กต์ ({}), อาเรย์ ([]), สตริง, ตัวเลข, บูลีน, null ใช้กันอย่างแพร่หลายใน REST API, การส่งข้อมูล frontend-backend, ไฟล์คอนฟิก, บันทึก ฯลฯ
TypeScript: Superset ของ JavaScript ที่พัฒนาโดย Microsoft เพิ่มนิยามชนิดแบบสแตติก, interface, generic และคุณสมบัติอื่น ๆ ให้กับ JavaScript โค้ด TypeScript จะถูกคอมไพล์เป็น JavaScript ล้วนเพื่อทำงานในเบราว์เซอร์หรือ Node.js เป็นภาษาที่นิยมสำหรับโปรเจกต์ frontend สมัยใหม่ React, Vue, Angular
interface (อินเทอร์เฟซ): คีย์เวิร์ด TypeScript สำหรับอธิบายชนิดของอ็อบเจ็กต์ ไวยากรณ์: `interface Name { prop: type; }` รองรับการรวมการประกาศ (interface ที่มีชื่อเดียวกันจะถูกรวมอัตโนมัติ), implements (คลาสใช้งาน interface), extends (การสืบทอด interface) เป็นวิธีหลักในการอธิบายรูปร่างของอ็อบเจ็กต์ใน TypeScript
type alias: คีย์เวิร์ด TypeScript สำหรับตั้งชื่อแทนให้กับชนิด ไวยากรณ์: `type Name = ...` สามารถใช้เพื่อกำหนดชนิดยูเนียน (`A | B`), ชนิดตัดข้าม (`A & B`), ชนิดฟังก์ชัน ฯลฯ ยืดหยุ่นกว่า interface แต่ไม่รองรับการรวมการประกาศ เครื่องมือนี้ใช้ interface ไม่ใช่ type
การอนุมานชนิด (Type Inference): กระบวนการที่เครื่องมือนี้กำหนดชนิด TS ที่เกี่ยวข้องโดยอัตโนมัติตาม typeof และรูปแบบเฉพาะของ value JSON ตัวอย่างเช่น typeof string แมปเป็น string, เมื่อ Array.isArray() ตรง จะถูกประมวลผลเป็นอาเรย์, เมื่อ typeof object ตรง จะสร้าง sub-interface อิสระ
ฟิลด์ทางเลือก (?): ตัวปรับ TypeScript ที่ระบุว่าฟิลด์สามารถละเว้นได้ `name?: string` หมายความว่าฟิลด์ name อาจไม่มีอยู่ (ค่า undefined) เมื่อเปิดใช้งานตัวเลือก "ฟิลด์ทางเลือก" ของเครื่องมือ ฟิลด์ที่มีค่า null หรือ undefined จะได้รับ `?` โดยอัตโนมัติ
ฟิลด์ readonly (readonly): ตัวปรับ TypeScript ที่ระบุว่าฟิลด์ไม่เปลี่ยนแปลง `readonly id: number` หมายความว่าฟิลด์ id ไม่สามารถกำหนดค่าใหม่ได้หลังจากสร้างอ็อบเจ็กต์ เมื่อเปิดใช้งานตัวเลือก "ฟิลด์ readonly" ของเครื่องมือ ทุกฟิลด์จะได้รับ `readonly` โดยอัตโนมัติ
ชนิดยูเนียน (Union Type): ไวยากรณ์ TypeScript ที่ระบุว่าค่าสามารถเป็นหนึ่งในหลายชนิด เขียนเป็น `A | B` เครื่องมือใช้เมื่อชนิดขององค์ประกอบอาเรย์ไม่สอดคล้องกัน เช่น `(string | number)[]` หมายความว่าองค์ประกอบอาเรย์อาจเป็น string หรือ number
ชนิดอาเรย์ (Array Type): ไวยากรณ์ TypeScript สำหรับอาเรย์ มีสองรูปแบบ: รูปแบบ generic `Array<T>` และรูปแบบย่อ `T[]` เครื่องมือใช้รูปแบบย่ออย่างสม่ำเสมอ เครื่องมือมีสามโหมดการสร้างชนิดอาเรย์: ชนิดเดียวกัน `T[]`, ชนิดผสม `(A | B)[]`, อาเรย์ว่าง `any[]`
Interface ซ้อน (Nested Interface): การอ้างอิง interface อื่นในภายใน interface เพื่อสร้างลำดับชั้นของชนิด เครื่องมือสร้าง sub-interface อิสระสำหรับอ็อบเจ็กต์ซ้อนแต่ละตัว, interface หลักอ้างอิงผ่านชื่อคุณสมบัติ เช่น Root อ้างอิง RootAddress, RootAddress สามารถถูกอ้างอิงโดยชนิดอื่นได้อย่างอิสระ
โหมด TypeScript strict: โหมดเข้มงวดของคอมไพเลอร์ TypeScript ประกอบด้วยตัวเลือกย่อยหลายตัว: noImplicitAny, strictNullChecks, strictFunctionTypes ฯลฯ เมื่อเปิดใช้งาน strictNullChecks, null และ undefined เป็นชนิดอิสระและไม่สามารถกำหนดให้กับตัวแปรชนิดอื่นได้ ฟิลด์ทางเลือกที่เครื่องมือนี้สร้างขึ้นเข้ากันได้อย่างสมบูรณ์กับโหมด strict
DTO (Data Transfer Object): อ็อบเจ็กต์การถ่ายโอนข้อมูล ใช้สำหรับถ่ายโอนข้อมูลระหว่างชั้นต่าง ๆ (เช่น API และชั้น Service) ในโปรเจกต์ TypeScript มักอธิบายด้วย interface เมื่อรวมกับ readonly เน้นความไม่เปลี่ยนแปลง เครื่องมือนี้เป็นเครื่องมือทั่วไปสำหรับสร้างนิยามชนิด DTO
การรวมการประกาศ (Declaration Merging): คุณสมบัติของ interface TypeScript: interface ที่มีชื่อเดียวกันจะรวมคุณสมบัติโดยอัตโนมัติ มักใช้เพื่อขยายนิยามชนิดของไลบรารีของบุคคลที่สาม interface ที่เครื่องมือนี้สร้างขึ้นสามารถรวมกับ interface อื่นที่มีชื่อเดียวกันในโปรเจกต์ อำนวยความสะดวกในการขยายชนิดแบบค่อยเป็นค่อยไป
tsconfig.json: ไฟล์คอนฟิกของโปรเจกต์ TypeScript ตั้งอยู่ในไดเรกทอรีรากของโปรเจกต์ ประกอบด้วย compilerOptions (target, module, strict ฯลฯ), include, exclude และการตั้งค่าอื่น ๆ ไฟล์ .ts ที่เครื่องมือนี้สร้างขึ้นสามารถใช้ในโปรเจกต์ tsconfig มาตรฐานใดก็ได้
tryFixJSON: ฟังก์ชันซ่อมแซม JSON ในตัวของเครื่องมือนี้ จัดการเครื่องหมายจุลภาคท้าย เครื่องหมายคำพูดเดี่ยวที่ใช้แทนคู่ การขาดเครื่องหมายคำพูดใน key ความคิดเห็น และข้อผิดพลาดทางไวยากรณ์ JSON ทั่วไปอื่น ๆ โดยอัตโนมัติ ถูกเรียกโดยอัตโนมัติเมื่อ JSON.parse ล้มเหลว แจ้งผู้ใช้หลังจากซ่อมแซมสำเร็จและดำเนินการแปลงต่อ

กฎการแมปชนิด JSON ไปยังชนิด TypeScript

กฎทั้งหมดที่ฟังก์ชัน getTsType ของเครื่องมือเราใช้อนุมานชนิด TypeScript ตามรูปแบบของ value JSON:

ค่า JSON	ตัวอย่าง	ชนิด TypeScript	กฎการตัดสิน
`null`	`null`	`null`	JSON null แมปโดยตรงไปยังชนิด TS null
`undefined`	`undefined`	`undefined`	ค่า undefined แมปไปยัง TS undefined (มีอยู่เฉพาะรันไทม์)
`boolean`	`true / false`	`boolean`	typeof boolean แมปไปยัง TS boolean
`integer`	`1, 100, -9999`	`number`	จำนวนเต็มและทศนิยมแมปไปยัง TS number ทั้งคู่
`float`	`3.14, -0.5, 1e10`	`number`	ตัวอักษรตัวเลขทั้งหมดแมปไปยัง number (TS ไม่แยก int และ float)
`string`	`"Alice", "กรุงเทพ"`	`string`	typeof string แมปไปยัง TS string
`empty array`	`[]`	`any[]`	อาเรย์ว่างไม่สามารถอนุมานชนิดองค์ประกอบได้ สำรอง any[]
`homogeneous array`	`[1, 2, 3]`	`T[] (เช่น number[])`	องค์ประกอบชนิดเดียวกันสร้างชนิดอาเรย์เดี่ยว
`mixed array`	`[1, "a"]`	`(A \| B)[] (เช่น (number \| string)[])`	องค์ประกอบชนิดต่างกันสร้างชนิดอาเรย์ยูเนียน
`object`	`{a: 1, b: "x"}`	`SubInterface (เช่น Root)`	อ็อบเจ็กต์ซ้อนสร้าง sub-interface อิสระและอ้างอิง

เปรียบเทียบ interface vs type alias

เหตุผลที่เครื่องมือนี้สร้าง interface แทน type alias และความแตกต่างระหว่างทั้งสองในโปรเจกต์ TypeScript:

มิติความสามารถ	interface	type alias	หมายเหตุ
อธิบายชนิดของอ็อบเจ็กต์	✓ (ต้องการ)	✓ (ก็รองรับ)	ทั้งสองรองรับ เครื่องมือสร้าง interface
การรวมการประกาศ	✓ (ชื่อเดียวกันรวมอัตโนมัติ)	✗ (การประกาศซ้ำทำให้เกิดข้อผิดพลาด)	interface รองรับการขยายแบบค่อยเป็นค่อยไป, type ไม่รองรับ
implements/extends	✓ (คลาสสามารถ implements ได้)	△ (เฉพาะ type อ็อบเจ็กต์ที่สามารถ implements ได้)	interface เป็นธรรมชาติมากกว่าในสถานการณ์ OOP
ชนิดยูเนียน (A \| B)	✗	✓	type กระชับกว่าสำหรับชนิดยูเนียน
ชนิดตัดข้าม (A & B)	✗	✓	type กระชับกว่าสำหรับชนิดตัดข้าม
ชนิดฟังก์ชัน	△ (ต้องการ call signature)	✓ (กำหนดโดยตรง)	type ใช้งานง่ายกว่าสำหรับชนิดฟังก์ชัน
ประสิทธิภาพ (ชนิดจำนวนมาก)	เร็วกว่าเล็กน้อย	ช้ากว่าเล็กน้อย	interface เร็วกว่าด้วยการรวมส่วนเพิ่มระหว่างคอมไพล์
ตัวเลือกของเครื่องมือ	✓ ใช้อย่างสม่ำเสมอ	✗	เครื่องมือเน้นชนิดอ็อบเจ็กต์ interface เป็นตัวเลือกที่ดีที่สุด

กฎการสร้างฟิลด์ทางเลือกและ readonly

ผลกระทบของตัวเลือกสวิตช์สองตัวของเครื่องมือนี้ต่อโค้ดที่สร้างขึ้นและสถานการณ์การใช้งานที่ดีที่สุด:

ตัวเลือก	เงื่อนไขการทริกเกอร์	ไวยากรณ์ที่สร้าง	สถานการณ์การใช้งานที่ดีที่สุด
ฟิลด์ทางเลือก (?): ปิด	(ค่าเริ่มต้น)	`name: string`	ทุกฟิลด์จำเป็น ชนิดเข้มงวด
ฟิลด์ทางเลือก (?): เปิด	value === null \|\| value === undefined	`name?: string`	ฟิลด์ทางเลือก ข้อมูลที่สามารถละเว้นได้
ฟิลด์ readonly (readonly): ปิด	(ค่าเริ่มต้น)	`name: string`	ชนิดทั่วไป ฟิลด์เขียนได้
ฟิลด์ readonly (readonly): เปิด	ทุกฟิลด์ถูกประมวลผลอย่างสม่ำเสมอ	`readonly name: string`	สถานะที่ไม่เปลี่ยนแปลง คอนฟิก DTO การตอบสนอง API
ทั้งสองเปิด	ตรงตามเงื่อนไขทั้งสอง	`readonly name?: string`	สแน็ปช็อตการตอบสนอง API คอนฟิกทางเลือก

Privacy & Security

การทำงานทั้งหมดของเครื่องมือ JSON เป็น TypeScript นี้ทำในเบราว์เซอร์ของคุณในเครื่องโดยสมบูรณ์: การแยกวิเคราะห์ JSON การอนุมานชนิด การสร้าง interface ทั้งหมดดำเนินการโดย JavaScript ของเบราว์เซอร์ฝั่งไคลเอ็นต์ โดยไม่ส่งเนื้อหา JSON ไฟล์ที่อัปโหลด หรือโค้ดที่สร้างขึ้นไปยังเซิร์ฟเวอร์ใด ๆ ผ่านเครือข่าย การอัปโหลดไฟล์ใช้ FileReader API ดั้งเดิมของเบราว์เซอร์เพื่ออ่านโดยตรงเข้าสู่หน่วยความจำ โดยไม่ผ่านบริการกลางใด ๆ ไม่ใช้การติดตามด้วย Cookie ไม่เก็บรวบรวมข้อมูลอินพุตหรือข้อมูลการใช้งานของผู้ใช้ หลังจากปิดหรือรีเฟรชหน้า เนื้อหาอินพุตและเอาต์พุตทั้งหมดจะถูกล้างออกจากหน่วยความจำโดยอัตโนมัติ เหมาะสำหรับการประมวลผล JSON ที่มีคีย์ API, โทเค็น, ข้อมูลทางธุรกิจที่ละเอียดอ่อน