Modules และการจัดโครงสร้างโปรเจกต์ TypeScript

Overview

เมื่อโปรเจกต์โตขึ้น เราเขียนทุกอย่างในไฟล์เดียวไม่ได้ Modules คือการแยกโค้ดเป็นส่วนย่อยๆ แล้วนำมาประกอบกัน (Import/Export) ช่วยให้โค้ดเป็นระเบียบและดูแลรักษาง่าย

Key Ideas

1. Export Types

• Named Export: ส่งออกหลายตัวได้ เวลา Import ต้องใช้ชื่อเดิม (มี {})
• Default Export: ส่งออกตัวเดียว (พระเอกของไฟล์) เวลา Import ตั้งชื่อใหม่ได้ (ไม่มี {})

✅ Best Practice: แนะนำให้ใช้ Named Export เป็นหลัก เพราะ Refactor ง่ายกว่า และ Auto-import ของ IDE แม่นยำกว่า

2. Barrel Files (index.ts)

เทคนิคการสร้างไฟล์ index.ts ไว้ที่โฟลเดอร์เพื่อ "รวมมิตร" Export จากไฟล์ย่อยๆ ออกไปทีเดียว ทำให้การ Import สะอาดตาขึ้น

Example

// 📁 utils/validation.ts
export const isValidEmail = (email: string) => email.includes("@");
export const isValidPhone = (phone: string) => phone.length === 10;

// 📁 utils/format.ts
export const formatDate = (date: Date) => date.toISOString();

// 📁 utils/index.ts (Barrel File)
export * from "./validation";
export * from "./format";

// 📁 app.ts (Import ทีเดียว)
import { isValidEmail, formatDate } from "./utils"; // ดูสะอาดตา

Pitfalls (สิ่งที่ควรระวัง)

❌ 1. Default Export พร่ำเพรื่อ

Default export ทำให้ชื่อไฟล์กับชื่อตัวแปรที่นำเข้าไม่ตรงกันได้ ซึ่งอาจทำให้สับสน

// file: user.ts -> export default class User ...
import Member from "./user"; // สับสนไหม? User หรือ Member?

❌ 2. Circular Dependencies

Module A เรียก Module B แล้ว Module B กลับมาเรียก Module A วนลูปไม่จบ โปรแกรมจะพังตอน Runtime วิธีแก้: ออกแบบโครงสร้างให้เป็นลำดับชั้น (Layer) ที่ชัดเจน

References

• TypeScript Modules