สนามทดลอง TypeScript

TypeScript Playground นี้ช่วยให้คุณทดสอบ snippet ได้อย่างรวดเร็วโดยไม่ต้องเปิดโปรเจกต์เต็มรูปแบบ โดยจะรัน compiler ของ TypeScript ในเบราว์เซอร์ของคุณ แสดงการวินิจฉัยการตรวจสอบ type พร้อมหมายเลขบรรทัด ส่งออก JavaScript และสามารถรันผลลัพธ์อย่างง่ายใน console แบบ sandbox ได้

TypeScript Playground นี้ทำอะไรได้บ้าง

เครื่องมือนี้ออกแบบมาสำหรับการตรวจสอบ TypeScript ในชีวิตประจำวัน ได้แก่ การตรวจสอบการทำ union narrowing การทดสอบ type ของ helper แบบ generic การเปรียบเทียบ target ของ compiler การยืนยันพฤติกรรมของ strict mode และการตรวจสอบ JavaScript ที่ TypeScript ส่งออกมา เหมาะสำหรับการเรียนรู้ การ debug ตัวอย่างขนาดเล็ก การเตรียมคำตอบ หรือการตรวจสอบการ refactor เล็ก ๆ ก่อนที่จะนำไปใส่ในโปรเจกต์

วิธีใช้ compiler ของ TypeScript

1. วาง TypeScript ลงในตัวแก้ไขหรือเลือกตัวอย่างด่วน
2. เลือก target ของ JavaScript และรูปแบบของ module
3. เปิดใช้ strict mode และการตรวจสอบ indexed access แบบเสริมเมื่อคุณต้องการการวินิจฉัยที่เข้มงวดยิ่งขึ้น
4. คลิกคอมไพล์และตรวจสอบ type หรือเปิด auto compile ไว้เพื่อรับผลแบบสด ๆ
5. ตรวจสอบการวินิจฉัย ตรวจสอบ JavaScript ที่ส่งออกมา จากนั้นรัน snippet ง่าย ๆ ใน console แบบ sandbox

หมายเหตุเกี่ยวกับการตรวจสอบ type

compiler ในเบราว์เซอร์ใช้ไฟล์ declaration ในตัวที่กระชับสำหรับออบเจ็กต์ JavaScript ทั่วไป เช่น array, string, record, JSON, console และ timer ซึ่งทำให้ playground รวดเร็วและพอเพียงในตัวเองสำหรับ snippet หากโค้ดของคุณพึ่งพา React, Node.js, DOM API หรือ declaration เฉพาะแพ็กเกจ ให้ยืนยันผลลัพธ์สุดท้ายภายในโปรเจกต์ของคุณด้วย tsconfig.json จริงและแพ็กเกจ type ที่ติดตั้งไว้

ตัวอย่างและกรณีการใช้งาน

ใช้ playground เมื่อคุณต้องการแยกข้อผิดพลาดด้าน type ออกจาก codebase ขนาดใหญ่ เปรียบเทียบว่า strict mode เปลี่ยนการวินิจฉัยอย่างไร อธิบายแนวคิดของ TypeScript ให้เพื่อนร่วมทีมฟัง หรือตรวจสอบว่า snippet เล็ก ๆ คอมไพล์เป็น JavaScript อย่างไร ตัวอย่างในตัวครอบคลุม discriminated union, helper ของ record แบบ generic, ตัวดำเนินการ satisfies และข้อผิดพลาดด้าน type ที่จงใจใส่ไว้ เพื่อให้คุณเห็นทั้งสถานะที่สะอาดและล้มเหลวของ compiler

• ตรวจสอบ type แบบ union ก่อนเพิ่มลงในโมเดลการตอบสนองของ API
• ทดสอบ helper แบบ generic โดยไม่ต้องรอการ build แอปพลิเคชันเต็มรูปแบบ
• ตรวจสอบ JavaScript ที่ส่งออกเมื่อเปลี่ยนตัวเลือก target หรือ module
• แชร์การจำลองปัญหาแบบกระชับของการวินิจฉัยจาก TypeScript

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

เครื่องมือนี้ตรวจสอบ type ของ TypeScript หรือไม่

ใช่ เครื่องมือนี้สร้างโปรแกรม TypeScript ภายในเบราว์เซอร์และรายงานการวินิจฉัยจาก compiler รวมถึงข้อผิดพลาดด้าน type ข้อผิดพลาดด้าน syntax และข้อความเกี่ยวกับตัวเลือกของ compiler

ฉันสามารถเปลี่ยนตัวเลือกของ compiler ของ TypeScript ได้หรือไม่

ได้ ตัวควบคุมหลักครอบคลุม target ของ JavaScript, ผลลัพธ์ของ module, strict mode, การส่งออก declaration และ noUncheckedIndexedAccess

ทำไม type ของไลบรารีถึงขาดหายไป

playground นี้ตั้งใจใช้ไลบรารี type ในตัวที่กระชับ สำหรับ type ของ framework, DOM, Node.js หรือแพ็กเกจ npm ให้ใช้การตั้งค่าของโปรเจกต์ในเครื่องของคุณ

ตัวรัน JavaScript ปลอดภัยหรือไม่

ตัวรันใช้ iframe แบบ sandbox สำหรับ snippet ที่รวดเร็ว หลีกเลี่ยงการรันโค้ดที่ไม่น่าเชื่อถือ และทดสอบโค้ดแอปจริงภายในสภาพแวดล้อมการพัฒนาปกติของคุณ