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

แปลง TypeScript เป็น JavaScript ออนไลน์ — TS/TSX เป็น JS/JSX

ลบชนิดข้อมูล TypeScript ทั้งคำกำกับชนิดข้อมูล อินเทอร์เฟซ ชื่อแทนชนิดข้อมูล และ generics เพื่อรับ JavaScript ปกติ รองรับ .ts และ .tsx โดยคง JSX เดิม คอมโพเนนต์ TSX จึงกลายเป็น JSX แปลงโค้ดบนอุปกรณ์ในเบราว์เซอร์ โดยไม่ตรวจชนิดข้อมูล รวมบันเดิล หรือเรียกใช้โค้ด

ดูว่าโค้ด TypeScript จะเป็นอย่างไรเมื่อแปลงเป็น JavaScript ปกติก่อนนำไปใช้ในโปรเจกต์ JS

Code is converted on the server. No type-checking, execution or dependency bundling is performed. JSX is preserved.

Load an example (replaces your input)

TypeScript

JavaScript

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

  • ดูว่าโค้ด TypeScript จะเป็นอย่างไรเมื่อแปลงเป็น JavaScript ปกติก่อนนำไปใช้ในโปรเจกต์ JS
  • แปลงคอมโพเนนต์ React .tsx เป็น .jsx ด้วยการลบชนิดของ props และคง JSX

วิธีใช้

  1. วาง TypeScript หรือ TSX หรือโหลดตัวอย่าง (อินเทอร์เฟซและฟังก์ชัน generics หรือ JSX) การโหลดตัวอย่างจะแทนที่ข้อมูลเข้า
  2. อ่าน JavaScript ด้านขวา คำกำกับชนิดข้อมูลและอินเทอร์เฟซจะหายไป ส่วนโค้ดที่มีอยู่ขณะทำงาน เช่น enum จะถูกสร้างเป็น JavaScript
  3. คัดลอกผลลัพธ์ หากต้องการความปลอดภัยด้านชนิดข้อมูล ให้ตรวจ TypeScript ต้นฉบับแยกด้วย tsc --noEmit

ข้อมูลเข้า TypeScript

interface User { name: string }
const greet = (user: User): string => "Hello, " + user.name;

ผลลัพธ์ JavaScript

const greet = user => "Hello, " + user.name;

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

แปลงโค้ดบนอุปกรณ์ในเบราว์เซอร์โดยไม่อัปโหลด ล้างข้อมูลเข้าหลังใช้อุปกรณ์ร่วมกับผู้อื่น

การลบชนิดข้อมูลไม่ใช่การตรวจชนิดข้อมูล เช่น const count: number = "text" แปลงได้โดยไม่แจ้งข้อผิดพลาด ควรตรวจชนิดด้วยคอมไพเลอร์ TypeScript

JSX ยังคงเป็น JSX การเรียกใช้คอมโพเนนต์ React ในเบราว์เซอร์ยังต้องผ่านขั้นตอนบิลด์ JSX ของโปรเจกต์

โครงสร้างที่มีค่าขณะทำงาน เช่น enum จะสร้างโค้ด JavaScript แทนที่จะหายไป

แปลงเฉพาะโค้ดที่วาง ไม่แก้การอ้างอิง imports ไม่รวมไฟล์เป็นบันเดิล และไม่แปลงไวยากรณ์สมัยใหม่ให้รองรับเบราว์เซอร์เก่า

FAQ

แปลง TSX เป็น JSX ได้หรือไม่?

ได้ วางคอมโพเนนต์ .tsx แล้วชนิดของ props และอินเทอร์เฟซจะถูกลบโดยคง JSX เดิม ผลลัพธ์จึงบันทึกเป็น .jsx ได้ เครื่องมือนี้ไม่ได้คอมไพล์ JSX เป็นการเรียก React.createElement

ต่างจากการใช้ tsc อย่างไร?

tsc ตรวจชนิดข้อมูลทั้งโปรเจกต์และสร้าง JavaScript ตามเป้าหมายที่เลือกได้ หน้านี้ใช้การแปลง TypeScript ของ Babel เพื่อลบชนิดจากโค้ดที่วางเท่านั้น โดยคงไวยากรณ์สมัยใหม่และไม่แจ้งข้อผิดพลาดด้านชนิดข้อมูล สำหรับทั้งโปรเจกต์ ให้ใช้ tsc หรือเครื่องมือรวมบันเดิล เช่น esbuild บนอุปกรณ์

ทำไมจึงแปลงโค้ดที่มีข้อผิดพลาดด้านชนิดข้อมูลได้?

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

ควรตรวจอะไรเมื่อพบข้อผิดพลาดทางไวยากรณ์?

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

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