TypeScript Modules

ใน TypeScript, มีหลายวิธีในการจัดการโมดูลเพื่อแบ่งโค้ดออกเป็นหน่วยที่แยกจากกันและจัดการ dependencies ได้อย่างมีประสิทธิภาพ

ESM vs Namespaces

หมวดหมู่	Namespaces	ES6 Modules
การประกาศ	ใช้คำสั่ง namespace	ใช้คำสั่ง export และ import
การเข้าถึง	ใช้ . เพื่อเข้าถึงสมาชิกภายใน namespace	ใช้ import เพื่อเข้าถึงสมาชิก
การแยกโค้ด	แยกโค้ดในไฟล์เดียวหรือหลายไฟล์โดยใช้ /// <reference>	แยกโค้ดในไฟล์ต่างๆ และใช้ import/export
การจัดการชื่อที่ซ้ำกัน	ช่วยป้องกันการชนกันของชื่อใน namespace ที่ต่างกัน	ช่วยป้องกันการชนกันของชื่อในโมดูลต่างๆ
การนำเข้า/ส่งออก	ใช้ /// <reference> เพื่อเชื่อมโยงไฟล์	ใช้ import และ export
การใช้งาน	ใช้ในโปรเจกต์ที่ไม่รองรับโมดูล ES6 หรือโปรเจกต์เก่า	ใช้ในโปรเจกต์ใหม่ๆ และเป็นมาตรฐานใหม่
ความเข้ากันได้ย้อนหลัง	ใช้ในโปรเจกต์ที่ต้องการความเข้ากันได้ย้อนหลัง	ไม่รองรับการเข้ากันได้ย้อนหลัง
การจัดการโค้ดที่ซับซ้อน	อาจทำให้โค้ดยุ่งเหยิงเมื่อต้องการหลาย namespaces	มีระบบการจัดการที่ดีกว่า
การสนับสนุน	สนับสนุนใน TypeScript แต่ไม่เป็นมาตรฐานใหม่	เป็นมาตรฐานใน JavaScript และ TypeScript

ESM (ECMAScript Modules)

ES6 Modules**: ใช้ export และ import สำหรับการจัดกลุ่มโค้ดที่เกี่ยวข้องในไฟล์ต่างๆ มีระบบการจัดการที่ดีขึ้นในการนำเข้าและส่งออกโค้ด และเป็นมาตรฐานใหม่ใน JavaScript และ TypeScript

// math.ts
export function add(x: number, y: number): number {
  return x + y;
}

export const pi = 3.14;

export class Calculator {
  constructor(private value: number) {}
  add(x: number) {
    this.value += x;
    return this.value;
  }
}

// main.ts
import { add, pi, Calculator } from './math';

console.log(add(2, 3)); // Output: 5
console.log(pi); // Output: 3.14

const calc = new Calculator(10);
console.log(calc.add(5)); // Output: 15

Namespace

Namespaces**: ใช้สำหรับการจัดกลุ่มโค้ดที่เกี่ยวข้องในไฟล์เดียวหรือหลายไฟล์ โดยใช้คำสั่ง namespace และสามารถใช้ /// <reference> เพื่อเชื่อมโยงไฟล์ที่มี namespaces อื่นๆ นิยมใช้ในโปรเจกต์ที่ไม่รองรับ ES6 modules หรือในโปรเจกต์เก่า

// myNamespace.ts
namespace MyNamespace {
  export class MyClass {
    constructor(public name: string) {}
    greet() {
      console.log(`Hello, ${this.name}!`);
    }
  }

  export function myFunction() {
    console.log('This is a function inside MyNamespace');
  }
}

// main.ts
const instance = new MyNamespace.MyClass('Alice');
instance.greet(); // Output: Hello, Alice!

MyNamespace.myFunction(); // Output: This is a function inside MyNamespace