บทนำสู่โมดูลและเนมสเปซ

โมดูลและเนมสเปซใน TypeScript ช่วยจัดระเบียบและวางโครงสร้างโค้ด โดยเฉพาะในโครงการขนาดใหญ่

แม้ว่าทั้งสองอย่างจะมีเป้าหมายคล้ายกัน แต่มีวิธีใช้งานแตกต่างกัน และบทเรียนนี้จะแนะนำความแตกต่างและการใช้งานของทั้งสองอย่าง

โมดูลคืออะไร

โมดูลคือไฟล์หรือส่วนของโค้ดที่ส่งออกความสามารถ เช่น ตัวแปร ฟังก์ชัน หรือคลาส เพื่อนำกลับมาใช้ในส่วนอื่นของแอปพลิเคชัน

TypeScript ใช้โมดูล ES สำหรับความสามารถในการนำเข้าและส่งออก ซึ่งปัจจุบันเป็นมาตรฐานใน JavaScript

การส่งออกและนำเข้าในโมดูล

คุณสามารถส่งออกโค้ดจากโมดูลโดยใช้ export และนำเข้าโดยใช้ import:

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

นำเข้าในไฟล์อื่น:

// app.ts
import { add } from './math';
console.log(add(2, 3));

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

// app.ts
import { add } from './math';
console.log(add(2, 3));

การส่งออกแบบค่าเริ่มต้น

TypeScript ยังอนุญาตให้ส่งออกแบบค่าเริ่มต้น ซึ่งช่วยให้คุณส่งออกค่าเดียวจากโมดูลได้:

// math.ts
export default function add(a: number, b: number): number {
  return a + b;
}

นำเข้าโดยไม่ใช้วงเล็บปีกกา:

// app.ts
import add from './math';
console.log(add(2, 3));

// math.ts
export default function add(a: number, b: number): number {
  return a + b;
}

// app.ts
import add from './math';
console.log(add(2, 3));

เนมสเปซคืออะไร

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

เนมสเปซกำหนดโดยใช้คีย์เวิร์ด namespace

การสร้างและใช้เนมสเปซ

ตัวอย่างเนมสเปซมีดังนี้:

namespace MathUtils {
  export function add(a: number, b: number): number {
    return a + b;
  }
}

คุณสามารถใช้ได้ดังนี้:

console.log(MathUtils.add(2, 3));

namespace MathUtils {
  export function add(a: number, b: number): number {
    return a + b;
  }
}

console.log(MathUtils.add(2, 3));

โมดูลกับเนมสเปซ

ความแตกต่างสำคัญระหว่างโมดูลกับเนมสเปซมีดังนี้:

• โมดูลอิงตามไฟล์และรองรับไวยากรณ์โมดูล ES
• เนมสเปซเหมาะสำหรับจัดระเบียบโค้ดในไฟล์เดียว แต่ถือว่าล้าสมัยสำหรับแอปพลิเคชันสมัยใหม่

แนวปฏิบัติที่ดี

เมื่อทำงานกับ TypeScript:

• ใช้โมดูลสำหรับโครงการใหม่ เนื่องจากสอดคล้องกับมาตรฐาน JavaScript สมัยใหม่
• พิจารณาใช้เนมสเปซเฉพาะกับโครงการเดิมหรือโครงการขนาดเล็ก
• จัดระเบียบโค้ดและรักษาความสอดคล้องกันอยู่เสมอ

ขอแสดงความยินดี

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