การตั้งค่า TypeScript ในโปรเจกต์ Vue
vite.config.ts, tsconfig.json, vue-tsc, lang='ts' ใน SFC และการรองรับ TypeScript ใน IDE
การตั้งค่า TypeScript ในโปรเจกต์ Vue เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน
TypeScript ใน Vue 3
Vue 3 ถูกเขียนขึ้นใหม่ด้วย TypeScript จึงรองรับชนิดข้อมูลได้อย่างยอดเยี่ยม โปรเจกต์ที่ตั้งค่าอย่างเหมาะสมจะตรวจจับข้อบกพร่องระหว่างการคอมไพล์ และมอบการเติมโค้ดอัตโนมัติที่ดีในไฟล์ .vue
การตั้งโครงด้วย TS
จุดเริ่มต้นที่ง่ายที่สุดคือ create-vue ซึ่งจะถามว่าต้องการเพิ่ม TypeScript หรือไม่ และจัดเตรียม tsconfig.json, vue-tsc รวมถึงเครื่องมือที่เหมาะสมให้
npm create vue@latest
# select "Add TypeScript? Yes"พื้นฐาน tsconfig.json
tsconfig.json ควบคุมการคอมไพล์ การตั้งค่าที่สำคัญที่สุดสำหรับตรวจจับข้อผิดพลาดคือ โหมดเข้มงวด
{
"compilerOptions": {
"strict": true,
"target": "ESNext",
"module": "ESNext"
}
}เหตุใดโหมดเข้มงวดจึงสำคัญ
strict: true เปิดใช้ strictNullChecks, noImplicitAny และการตรวจสอบอื่น ๆ โดยบังคับให้คุณจัดการกับ null/undefined และป้องกันไม่ให้ค่าที่ไม่มีการระบุชนิดข้อมูลเล็ดลอดผ่านไป
นามแฝงพาธ
นามแฝง @/ จะชี้ไปยังโฟลเดอร์ src ทำให้การนำเข้ายังคงสะอาดไม่ว่าความลึกของไฟล์จะเป็นเท่าใด ให้กำหนดค่านี้ทั้งใน tsconfig.json และเครื่องมือรวมไฟล์ของคุณ
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
}
}การใช้นามแฝง
ตอนนี้การนำเข้าจะอ้างอิงโมดูลจากรากของโครงการ แทนการต่อพาธแบบสัมพันธ์ ../../ หลายชั้น
import Button from '@/components/Button.vue'
import { useAuth } from '@/composables/useAuth'TypeScript ใน SFC
หากต้องการใช้ TypeScript ภายในคอมโพเนนต์ไฟล์เดียว ให้เพิ่ม lang="ts" ลงในแท็กสคริปต์ เมื่อใช้ร่วมกับ <script setup> คุณจะสามารถใช้มาโครที่มีชนิดข้อมูลได้
<script setup lang="ts">
const count: number = 0
</script>การตรวจสอบชนิดข้อมูลของ SFC
คอมไพเลอร์ tsc ปกติไม่เข้าใจไฟล์ .vue Vue จึงมี vue-tsc ซึ่งเป็นตัวห่อหุ้มที่ตรวจสอบชนิดข้อมูลของแม่แบบและสคริปต์ร่วมกัน
vue-tsc --noEmitการเพิ่มสคริปต์ตรวจสอบ
เพิ่มสคริปต์ลงใน package.json เพื่อให้ระบบผสานรวมอย่างต่อเนื่องและคุณสามารถตรวจสอบชนิดข้อมูลได้ด้วยคำสั่งเดียว
{
"scripts": {
"type-check": "vue-tsc --noEmit"
}
}การรองรับในตัวแก้ไขด้วย Volar
ส่วนขยาย Volar (Vue - Official) สำหรับ VS Code มอบความสามารถด้าน TypeScript ภายในไฟล์ .vue ได้แก่ การเติมโค้ดอัตโนมัติ การไปยังคำจำกัดความ และข้อผิดพลาดของชนิดข้อมูลในแม่แบบ ปิดใช้ Vetur รุ่นเก่าเพื่อหลีกเลี่ยงความขัดแย้ง
โหมดเข้าควบคุม
Volar สามารถทำงานใน โหมดเข้าควบคุม โดยแทนที่ส่วนขยาย TS ในตัว เพื่อให้จัดการทั้งไฟล์ .ts และ .vue ได้ ช่วยเพิ่มประสิทธิภาพและความสอดคล้องในโครงการขนาดใหญ่
ตรวจสอบอย่างรวดเร็ว
ทดสอบความรู้เกี่ยวกับการตั้งค่า TypeScript ของคุณ
สรุปทบทวน
คุณได้ตั้งค่า TypeScript ใน Vue แล้ว:
- เปิดใช้โหมดเข้มงวดใน tsconfig.json เพื่อให้ตรวจสอบได้เข้มงวดที่สุด
- กำหนดนามแฝงพาธ @/* ให้ชี้ไปยัง src
- เพิ่ม lang="ts" ในสคริปต์ของ SFC
- ตรวจสอบชนิดข้อมูลด้วย vue-tsc --noEmit และใช้ส่วนขยาย Volar ใน VS Code
คำถามที่พบบ่อย
บทเรียน “การตั้งค่า TypeScript ในโปรเจกต์ Vue” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การตั้งค่า TypeScript ในโปรเจกต์ Vue” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การตั้งค่า TypeScript ในโปรเจกต์ Vue”
vite.config.ts, tsconfig.json, vue-tsc, lang='ts' ใน SFC และการรองรับ TypeScript ใน IDE คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “การตั้งค่า TypeScript ในโปรเจกต์ Vue” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม
ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การตั้งค่า TypeScript ในโปรเจกต์ Vue
- Props และ Emits แบบมีชนิดด้วย defineProps/defineEmits
- การกำหนดชนิดให้คอมโพสิเบิลและรีฟ
- คอมโพเนนต์ Vue แบบ Generic