What are TypeScript ES Modules?
ในโลกของการพัฒนาโปรเจกต์ขนาดใหญ่ การจัดการความสัมพันธ์และการพึ่งพาของโค้ดถือเป็นหัวใจสำคัญอย่างยิ่ง ปัญหาหลักที่นักพัฒนามักเจอคือการทำให้ระบบโมดูลาร์ทำงานได้อย่างมีเสถียรภาพและสามารถตรวจสอบข้อผิดพลาดได้ตั้งแต่ขั้นตอนคอมไพล์ ไม่ใช่รอจนถึงเวลา Runtime เทคโนโลยีนี้จึงนำมาซึ่งบทบาทของ TypeScript ES Modules ซึ่งเป็นการผสมผสานพลังแห่ง Type Safety ของ TypeScript เข้ากับมาตรฐาน Modular System ที่ทันสมัยที่สุดสำหรับการเขียน JavaScript คือ ECMAScript Modules
ทำไมต้องใช้รูปแบบ ES Module ใน TS?
ก่อนหน้ายุค ESM โมเดลเช่น CommonJS (require()) เป็นราชาในการแชร์ Dependencies แต่เมื่อเว็บไซต์จำเป็นต้องรองรับทั้ง Browser Native และ Server Side Rendering ได้ด้วย ระบบ Import/Export มาตรฐานก็เข้ามาแทนที่ จุดแข็งหลักของมันไม่ใช่แค่เพียง Syntax ใหม่เท่านั้น หากแต่รวมไปถึงคุณสมบัติ Static Analysis ด้วย เมื่อเรากำหนดว่าไฟล์ A ต้องใช้อะไรจากไฟล์ B, ตัว Compiler จะรู้ขอบเขตทั้งหมด ทำให้เกิดประโยชน์มหาศาล:
- Type Checking Across Boundaries: สามารถมั่นใจได้ว่าค่าหรือ Interface ที่ถูก Export ออกมาจาก module ต้นทางนั้น มีโครงสร้างถูกต้องตามที่เราคาดหวัง
- Tree Shaking Optimization: เครื่องมือ Bundler ต่างๆ เช่น Webpack หรือ Vite ใช้ข้อมูลการ import อย่างชัดเจนเพื่อตัดโค้ดส่วนที่ไม่ใช้งานออกไปได้อย่างแม่นยำ ส่งผลให้ Bundle Size เล็กลงอย่างมาก
องค์ประกอบสำคัญของการจัดการโมดูลใน TypeScript
ESM กำหนดวิธีการประกาศและนำเข้าสิ่งต่างๆ ผ่านคำสั่ง import และ export ซึ่งแบ่งประเภทการส่งออกเป็นสองรูปแบบหลักที่คุณควรทำความเข้าใจ
- Default Exports (มูลค่าเริ่มต้น): เหมาะสำหรับเมื่อ Module นั้นมี