Aesthetic study notes about Vue 3 and TypeScript Installation on an iPad screen

1. 🎯 ตอนที่ 3: สวมเกราะเหล็กให้โค้ดด้วย TypeScript และการติดตั้ง Vue 3 ฉบับสมบูรณ์

2. 📖 เปิดฉาก (The Hook)

คุณเคยเจอเหตุการณ์นี้ไหมครับ? นั่งเขียนโค้ด JavaScript อย่างเมามันส์ ฟังก์ชันทำงานได้ดีตอนทดสอบ แต่พอดันขึ้น Production กลับเจอบั๊ก TypeError: Cannot read properties of undefined ระเบิดตู้มใส่หน้า! การเขียน JavaScript เพียวๆ ก็เหมือนการขับรถสปอร์ตที่ไม่มีเข็มขัดนิรภัยครับ มันเร็ว อิสระ แต่ก็พร้อมจะเกิดอุบัติเหตุได้ทุกเมื่อถ้าเราพลาดเอง

นี่แหละครับคือเหตุผลที่ TypeScript (TS) เข้ามาเป็นพระเอกขี่ม้าขาว TypeScript คือ “เกราะป้องกัน” ที่ช่วยตรวจจับข้อผิดพลาด (Static analysis) ตั้งแต่ตอนที่เรากำลังพิมพ์โค้ด (Build time) ทำให้ลดโอกาสเกิดบั๊กตอนรันจริงได้อย่างมหาศาล แถมยังมีระบบ Auto-completion ที่ฉลาดล้ำลึก ทำให้เราทำงานร่วมกับทีมได้มั่นใจขึ้น

ข่าวดีคือ Vue 3 ถูกเขียนขึ้นมาด้วย TypeScript ทั้งระบบ (First-class TypeScript support) ดังนั้นการจับคู่ Vue 3 เข้ากับ TypeScript ในยุคนี้จึงเป็นอะไรที่ “เข้าขากันสุดๆ” วันนี้พี่จะพาน้องๆ ไปดูวิธีเซ็ตอัปโปรเจกต์ Vue 3 + TypeScript แบบยุคใหม่ (Modern Setup) ที่ทำงานเร็วปานสายฟ้าแลบกันครับ!

3. 🧠 แก่นวิชา (Core Concepts)

ก่อนจะพิมพ์คำสั่งติดตั้ง เรามาทำความเข้าใจเครื่องมือหลักๆ ใน Ecosystem ยุคนี้กันก่อนครับ:

  • Vite (เตาหลอมความเร็วแสง): ในอดีตเราอาจจะคุ้นเคยกับ Vue CLI และ Webpack แต่ปัจจุบันเครื่องมือสร้างโปรเจกต์อย่างเป็นทางการคือ create-vue ซึ่งทำงานอยู่บนขุมพลังของ Vite Vite จะทำหน้าที่เสิร์ฟโค้ดให้เราตอน Development แบบไม่ต้องรอ Bundle นานๆ ทำให้การทำงานร่วมกับ TypeScript เร็วมาก
  • VS Code & Vue - Official Extension: สำหรับ Editor แนะนำให้ใช้ Visual Studio Code (VS Code) และสิ่งที่ขาดไม่ได้คือต้องติดตั้ง Extension ที่ชื่อว่า Vue - Official (หรือชื่อเดิมคือ Volar),
    • ⚠️ ข้อควรระวัง: หากใครเคยเขียน Vue 2 และมี Extension ที่ชื่อ Vetur อยู่ในเครื่อง ต้องปิดการใช้งาน (Disable) มันก่อนนะครับ ไม่งั้นมันจะตีกันกับโปรเจกต์ Vue 3,
  • vue-tsc (ผู้ตรวจการพิมพ์): เนื่องจาก Vite ถูกออกแบบมาให้ทำแค่ Transpile (แปลงโค้ด TS เป็น JS) อย่างเดียวเพื่อให้เร็วที่สุด มันจึงไม่ได้ทำหน้าที่เช็ค Type (Type-checking) ให้เรา เราจึงต้องอาศัยพระรองที่ชื่อว่า vue-tsc (ซึ่งห่อหุ้ม tsc ของ TypeScript มาอีกที) ในการตรวจเช็ค Type ผ่าน Command Line
Modern frontend development environment setup featuring Vue 3, TypeScript, Vite, and VS Code

4. 💻 ร่ายมนต์โค้ด (Show me the Code)

เอาล่ะ! มาเริ่มติดตั้งกันเลย เปิด Terminal ขึ้นมาแล้วพิมพ์คำสั่งเวทมนตร์นี้ลงไป (ใช้ Node.js เวอร์ชัน 18.3 ขึ้นไปนะครับ):

# ร่ายคำสั่งสร้างโปรเจกต์ด้วย create-vue
npm create vue@latest
# หรือถ้าใครสาย pnpm ก็ใช้: pnpm create vue@latest

ตัว Wizard จะถามคำถามเพื่อเซ็ตอัปโปรเจกต์ ให้เราตอบตามนี้เลยครับ:

✔ Project name: … my-vue-ts-app
✔ Add TypeScript? … No / Yes  <-- 🟢 เลือก Yes ตรงนี้สำคัญมาก!
✔ Add JSX Support? … No / Yes <-- ⚪ เลือก No (เราจะใช้ Template ปกติ)
✔ Add Vue Router for Single Page Application development? … No / Yes <-- 🟢 เลือก Yes (ถ้าทำหลายหน้า)
✔ Add Pinia for state management? … No / Yes <-- 🟢 เลือก Yes (ระบบจัดการ State)
✔ Add Vitest for Unit Testing? … No / Yes <-- ⚪ เลือก No ก่อนก็ได้เพื่อความง่าย
✔ Add an End-to-End Testing Solution? … No / Cypress / Playwright <-- ⚪ เลือก No
✔ Add ESLint for code quality? … No / Yes <-- 🟢 เลือก Yes (ช่วยจัดระเบียบโค้ด)
✔ Add Prettier for code formatting? … No / Yes <-- 🟢 เลือก Yes

เมื่อระบบสร้างไฟล์เสร็จเรียบร้อย ให้รันคำสั่งตามที่ระบบแนะนำเพื่อเข้าไปติดตั้ง Dependencies และสตาร์ทเซิร์ฟเวอร์:

cd my-vue-ts-app
npm install
npm run dev

การใช้งาน TypeScript ในไฟล์ Component (.vue) เพื่อเปิดใช้งาน TypeScript ใน Single-File Component (SFC) เราแค่เติม attribute lang="ts" เข้าไปในแท็ก <script> ครับ ลองดูตัวอย่างนี้:

<template>
  <div class="counter-card">
    <!-- Type Checking ทำงานได้ถึงระดับ Template เลยนะ! -->
    <h2>ยินดีต้อนรับ: {{ username }}</h2>
    <button @click="increment">คลิกไปแล้ว {{ count }} ครั้ง</button>
  </div>
</template>

<script setup lang="ts">
// 🟢 แค่เติม lang="ts" คุณก็ได้รับพลังแห่ง TypeScript แล้ว
import { ref } from 'vue'

// TypeScript จะรู้ทันทีว่าตัวแปรนี้คือ Type: string
const username = ref('Front-end Master')

// หรือเราจะบังคับ Type (Explicit type) ก็ทำได้ผ่าน Generic
const count = ref<number>(0)

const increment = () => {
  count.value++ // ถ้าคุณเผลอพิมพ์ count.value = '1' TS จะแจ้งเตือน Error ทันที!
}
</script>

5. 🛡️ เคล็ดลับจากคัมภีร์ลับ (Under the Hood / Pro-Tips)

มีเคล็ดลับลับใต้พรม 2-3 อย่างที่ Senior Dev อยากบอกน้องๆ ไว้กันพลาดครับ:

  1. ไฟล์ env.d.ts หรือ shims-vue.d.ts คืออะไร? หลายคนเปิดโปรเจกต์มาเจอไฟล์นี้แล้วงง มันคือไฟล์ “Declaration” ครับ หน้าที่ของมันคือการเดินไปกระซิบกระซาบกับ TypeScript Compiler ว่า “เฮ้ นายอาจจะไม่รู้จักไฟล์นามสกุล .vue ใช่ไหม? ไม่เป็นไรนะ มองว่ามันเป็น Component ตัวนึงก็พอ”, หากไม่มีไฟล์นี้ TypeScript จะบ่นว่าหาโมดูลที่ชื่อลงท้ายด้วย .vue ไม่เจอเวลาเรา import ครับ
  2. ความลับของ npm run build ในยุค Vite ถ้าคุณไปดูที่ package.json ตรงส่วนของ scripts จะเห็นคำสั่ง build หน้าตาแบบนี้: "build": "vue-tsc --noEmit && vite build" นี่คือความแยบยลครับ! อย่างที่บอกว่า Vite ตัวมันเองแค่แปลงโค้ดเฉยๆ (ใช้ esbuild ซึ่งไม่ตรวจ Type เพื่อความเร็ว) ทีม Vue เลยเอาคำสั่ง vue-tsc --noEmit มาดักหน้าไว้ก่อน เพื่อให้มัน “ตรวจเช็ค Type อย่างเข้มงวด” หากมีโค้ดไหนพิมพ์ผิด Type โปรแกรมก็จะพังตั้งแต่ตอน Build ช่วยปกป้องไม่ให้บั๊กหลุดรอดไปถึง Production ได้นั่นเองครับ,

6. 🏁 บทสรุป (To be continued…)

การจับคู่กันระหว่าง Vue 3 และ TypeScript ผ่านระบบ Vite คือการผสมผสานที่ลงตัวที่สุดในยุคนี้ครับ คุณจะได้ความเร็วในการทำงาน (Developer Experience) ที่ไหลลื่นราวกับสายน้ำ พร้อมกับความน่าเชื่อถือของ TypeScript ที่คอยเป็นบอดี้การ์ดปกป้องโค้ดให้คุณ,

เมื่อคุณติดตั้งอาวุธชุดนี้เสร็จแล้ว ในบทถัดไปเราจะเริ่มเจาะลึกเข้าไปใน Composition API ควบคู่กับการประกาศ Props และ Emits แบบ Type-Safe กัน เตรียมตัวให้พร้อม แล้วพบกันครับ!

ต้องการที่ปรึกษาและพัฒนาระบบ Web Application หรือ Frontend Architecture ให้กับธุรกิจของคุณ? ทีมงาน WP Solution พร้อมให้บริการออกแบบและพัฒนาซอฟต์แวร์แบบครบวงจร ดูรายละเอียดบริการของเราได้ที่: www.wpsolution2017.com หรือพูดคุยปรึกษาเบื้องต้นได้ที่ Line: wisit.p