ค้นหาเว็บไซต์

โค้ดของฉันจะถูกแปลงโค้ดสองครั้งหรือไม่ถ้าฉันใช้ TypeScript ในโปรเจกต์ Vue.js 3?


ฉันไม่มีประสบการณ์มากนักทั้งใน TypeScript, Vue, หรือระบบนิเวศของ Node

ฉันมีการตั้งค่าที่ใช้งานได้ซึ่งสร้างขึ้นโดยใช้ Vue CLI โดยใช้ Vue 3 และ TypeScript ซึ่งเกือบจะไม่เปลี่ยนแปลงจากที่ vue create สร้างโปรเจกต์และการตั้งค่า หากฉันเข้าใจถูกต้อง Babel จะอ้างอิงไปยังการตั้งค่า "browserslist" ใน package.json ของฉันและเพิ่ม polyfills/เขียนโค้ดใหม่ให้ทำงานกับเบราว์เซอร์รุ่นเก่า ตัวคอมไพเลอร์ TypeScript ก็มีตัวเลือก --target และ --lib ด้วย ซึ่งดูเหมือนว่าจะทำสิ่งที่คล้ายกัน

โค้ด TypeScript ที่ฉันเขียนในโปรเจกต์ Vue ของฉันถูกแปลงครั้งสองหรือไม่ ครั้งแรกโดยคอมไพเลอร์ TypeScript และครั้งที่สองโดย Babel? ถ้าเป็นเช่นนั้น มีวิธีหลีกเลี่ยงความซ้ำซ้อนนี้หรือไม่?


แก้ไขเพื่อเพิ่มเติม: ฉันเพิ่งสร้างโปรเจกต์ใหม่ที่ว่างเปล่าพร้อมการตั้งค่าข้างต้น และถูกถามว่าฉันต้องการ "ใช้ Babel ร่วมกับ TypeScript (จำเป็นสำหรับโหมดสมัยใหม่, การตรวจจับ polyfills อัตโนมัติ, การแปลง JSX)" หรือไม่ ฉันไม่ได้ใช้ JSX ใน Vue แต่ใครจะปฏิเสธ 'โหมดสมัยใหม่' ก็ไม่รู้มันคืออะไร

คำตอบ #1

ฉันรู้ว่านี่ค่อนข้างเก่า แต่สำหรับใครก็ตามที่เจอสิ่งนี้

TypeScript สามารถถูกแปลงโดย babel หรือโดยตัวคอมไพเลอร์ของ typescript โดยปกติโครงการที่ใช้ babel จะทำการแปลง typescript ด้วย babel ด้วย ในกรณีนั้นตัวคอมไพเลอร์ของ typescript จะจัดการเฉพาะไฟล์ประเภท (.d.ts)

แม้ว่าคุณจะใช้ตัวคอมไพเลอร์ TypeScript เพื่อแปลงโค้ด ts ของคุณแล้วใช้ Babel แปลงอีกครั้ง ซึ่งไม่ใช่การตั้งค่าที่ปกติ แต่ก็ยังโอเคดีอยู่

ดังนั้นมีความเป็นไปได้สูงที่โค้ดของคุณไม่ได้ถูกแปรรูปสองครั้ง

บทความที่เกี่ยวข้อง