สอนตั้งค่า Backend ด้วย TypeScript และ Node.js ฉบับเริ่มต้น

ทำความรู้จัก Backend TypeScript และเหตุผลที่ทำไมเราต้องใช้มัน

การพัฒนา Backend (ระบบหลังบ้านที่ทำงานบนเซิร์ฟเวอร์) ด้วย TypeScript กลายเป็นมาตรฐานใหม่ของวงการไปแล้ว หลายคนอาจจะสงสัยว่าทำไมเราไม่เขียน JavaScript ธรรมดาให้จบๆ ไป เหตุผลหลักคือ JavaScript นั้นมีความยืดหยุ่นสูงเกินไปจนบางครั้งทำให้เกิดบั๊ก (ข้อผิดพลาดในโค้ด) ได้ง่ายเวลาโปรเจกต์เริ่มใหญ่ขึ้น

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

สำหรับคนที่กำลังฝึกเป็นโปรแกรมเมอร์ การเรียนรู้ที่จะตั้งค่า Node.js (เครื่องมือที่ทำให้เราใช้ JavaScript รันบนคอมพิวเตอร์ได้) ร่วมกับ TypeScript ถือเป็นทักษะพื้นฐานที่สำคัญมาก หากเราตั้งค่าตั้งแต่ต้นได้ถูกต้อง เราก็จะประหยัดเวลาในการแก้ปัญหาจุกจิก และโฟกัสกับการเขียนฟีเจอร์หลักของแอปพลิเคชันได้เต็มที่ครับ

เตรียมความพร้อมและเริ่มต้นติดตั้งโปรเจกต์ Node.js

ก่อนจะเริ่มเขียนโค้ด เราต้องเตรียมบ้านให้พร้อมก่อน ขั้นตอนแรกคือการสร้างโฟลเดอร์โปรเจกต์และติดตั้ง Node.js ลงไปในเครื่อง สิ่งแรกที่ต้องทำคือการสร้างไฟล์ package.json (ไฟล์ที่เก็บข้อมูลรายละเอียดโปรเจกต์และรายการโปรแกรมเสริมที่เราต้องใช้) เพื่อให้โปรเจกต์ของเรารู้จักกับเครื่องมือต่างๆ ที่เราจะดึงมาใช้งาน

ให้ลองเปิด Terminal (หน้าจอพิมพ์คำสั่งสั่งงานคอมพิวเตอร์) แล้วพิมพ์คำสั่งตามนี้เพื่อเริ่มโปรเจกต์กันเลยครับ

# สร้างโฟลเดอร์และเข้าไปข้างใน
mkdir my-backend-app
cd my-backend-app

# สร้างไฟล์ package.json แบบอัตโนมัติ
npm init -y

คำสั่ง mkdir คือการสร้างโฟลเดอร์ใหม่ ส่วน cd คือการเปลี่ยนเข้าไปในโฟลเดอร์นั้น และ npm init -y คือการสร้างไฟล์ package.json เริ่มต้นโดยตอบตกลงทุกอย่างให้เราโดยอัตโนมัติ ผลลัพธ์ที่ได้คือเราจะมีไฟล์ package.json ปรากฏขึ้นมาในโฟลเดอร์ ซึ่งเป็นจุดเริ่มต้นของทุกโปรเจกต์ Node.js ครับ

จุดที่มือใหม่มักพลาดคือการลืมติดตั้ง TypeScript ลงไปในโปรเจกต์ ให้เราใช้คำสั่ง npm install typescript --save-dev เพื่อดึงเอาตัว Compiler (โปรแกรมที่ทำหน้าที่แปลงโค้ดจาก TypeScript ให้เป็น JavaScript ที่คอมพิวเตอร์เข้าใจ) เข้ามาติดตั้งในเครื่องของเราครับ

การตั้งค่า tsconfig.json หัวใจสำคัญของการเขียน TypeScript

เมื่อเราติดตั้ง TypeScript แล้ว เราต้องสร้างไฟล์ tsconfig.json เพื่อบอกให้มันรู้ว่าเราอยากให้โค้ดของเราทำงานอย่างไร ไฟล์นี้จะทำหน้าที่เป็นกติกาในการเขียนโค้ด ถ้าเราตั้งค่าตรงนี้ได้เป๊ะ โค้ดของเราจะสะอาดและลดโอกาสเกิดบั๊กได้มหาศาลเลยทีเดียวครับ

ลองใช้คำสั่ง npx tsc --init เพื่อสร้างไฟล์นี้ขึ้นมา จากนั้นลองปรับค่าบางอย่างที่สำคัญ เช่น target (รุ่นของ JavaScript ที่เราต้องการให้ผลลัพธ์ออกมาเป็น) หรือ rootDir (โฟลเดอร์ที่เก็บโค้ดต้นฉบับของเรา) เพื่อให้การทำงานสอดคล้องกับมาตรฐานปัจจุบัน

{
  "compilerOptions": {
    "target": "ES2022",
    "moduleResolution": "node",
    "rootDir": "./src",
    "outDir": "./dist",
    "strict": true
  }
}

คำอธิบายคือ target กำหนดให้เป็น ES2022 เพื่อใช้ฟีเจอร์ใหม่ล่าสุด, rootDir บอกว่าให้ไปหาโค้ดในโฟลเดอร์ src, outDir บอกว่าเมื่อแปลงโค้ดเสร็จแล้วให้เอาไปวางที่ dist และ strict คือการเปิดโหมดเข้มงวดที่จะช่วยตรวจสอบความถูกต้องของโค้ดให้เราแบบละเอียดที่สุดครับ

เมื่อรันคำสั่ง npx tsc ผลลัพธ์ที่ได้คือโปรแกรมจะอ่านไฟล์ใน src แล้วแปลงเป็น JavaScript ไปวางไว้ใน dist ให้เราพร้อมใช้งานจริง จุดที่ต้องระวังคืออย่าลืมสร้างโฟลเดอร์ src ก่อนรันคำสั่ง ไม่อย่างนั้นโปรแกรมจะหาไฟล์ต้นฉบับไม่เจอนะครับ

การรันโปรเจกต์ด้วย tsx เพื่อความรวดเร็วในการพัฒนา

ในขั้นตอนการพัฒนา เราคงไม่อยากมานั่งรันคำสั่ง tsc เพื่อแปลงไฟล์ทุกครั้งที่แก้โค้ด มันเสียเวลามากครับ เครื่องมือที่ชื่อว่า tsx (เครื่องมือที่ช่วยรันไฟล์ TypeScript ได้ทันทีโดยไม่ต้องแปลงไฟล์ก่อน) จึงเข้ามาช่วยให้ชีวิตโปรแกรมเมอร์ง่ายขึ้นเยอะ

การติดตั้ง tsx ทำได้ง่ายๆ ผ่านคำสั่ง npm install tsx --save-dev เมื่อติดตั้งเสร็จ เราสามารถรันไฟล์ TypeScript ของเราได้โดยตรงผ่านคำสั่ง npx tsx src/index.ts ซึ่งระบบจะทำการแปลงและรันโค้ดให้เราในเสี้ยววินาที เหมาะมากสำหรับการพัฒนาแอปพลิเคชันแบบรวดเร็ว

ลองสร้างไฟล์ src/index.ts ขึ้นมาแล้วใส่โค้ดง่ายๆ ลงไปเพื่อทดสอบกันครับ

const message: string = "สวัสดี Backend TypeScript!";
console.log(message);

บรรทัดแรกคือการประกาศตัวแปรแบบระบุประเภทข้อมูล (Type) ให้เป็น string (ข้อความ) ส่วนบรรทัดที่สองคือการสั่งพิมพ์ข้อความออกทางจอภาพ เมื่อรันคำสั่ง npx tsx src/index.ts ใน Terminal จะต้องเห็นข้อความ "สวัสดี Backend TypeScript!" แสดงขึ้นมาทันทีครับ

จัดการโครงสร้างโปรเจกต์ให้เป็นระเบียบและน่าทำงาน

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

ลองจัดระเบียบโฟลเดอร์ src ของเราให้มีโฟลเดอร์ย่อย เช่น controllers (ตัวควบคุมการทำงานหลัก) หรือ routes (ตัวกำหนดเส้นทางของข้อมูล) วิธีนี้จะทำให้เวลาเราต้องกลับมาแก้โค้ดหลังจากผ่านไปหนึ่งเดือน เราจะยังจำได้ว่าฟังก์ชันนี้ถูกวางไว้ที่ไหนและทำหน้าที่อะไร

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

สรุปและแนวทางการนำไปใช้งานจริง

การตั้งค่า Backend ด้วย TypeScript อาจดูมีหลายขั้นตอนในตอนแรก แต่ถ้าเราเข้าใจว่าแต่ละส่วนทำหน้าที่อะไร เช่น tsconfig.json คือกฎกติกา และ tsx คือตัวช่วยรันโปรแกรม เราจะเห็นภาพรวมว่าทั้งหมดนี้ทำไปเพื่อช่วยให้เราเขียนโค้ดได้แม่นยำและรวดเร็วขึ้น

เมื่อคุณเริ่มโปรเจกต์ถัดไป ลองนำขั้นตอนเหล่านี้ไปใช้จริง เริ่มจากการตั้งค่าโปรเจกต์ให้สะอาด สร้างไฟล์ tsconfig.json ที่เข้มงวด และใช้เครื่องมืออย่าง tsx เพื่อให้คุณมีเวลาไปโฟกัสกับการออกแบบระบบและการแก้โจทย์ทางธุรกิจจริงๆ แทนที่จะมานั่งเสียเวลากับการตั้งค่าที่ผิดพลาด

จำไว้ว่าโปรแกรมเมอร์ที่เก่งไม่ได้วัดกันที่จำคำสั่งได้ทั้งหมด แต่คือคนที่รู้วิธีจัดการเครื่องมือเพื่อสร้างซอฟต์แวร์ที่มีคุณภาพ ขอให้สนุกกับการเขียนโค้ดและค่อยๆ เรียนรู้ไปทีละก้าวครับ ถ้าติดปัญหาตรงไหน การอ่าน Error Message (ข้อความแจ้งเตือนเมื่อโปรแกรมทำงานพลาด) ให้ละเอียดคือครูที่ดีที่สุดของคุณเสมอ