โมดูลใน TypeScript

บทความนี้อธิบายเกี่ยวกับโมดูลใน TypeScript

YouTube Video

โมดูลใน TypeScript

โมดูลใน TypeScript เป็นคุณสมบัติสำคัญที่ช่วยเพิ่มการนำโค้ดกลับมาใช้ซ้ำและความสะดวกในการดูแลรักษา เช่นเดียวกับ JavaScript, TypeScript ยังอิงระบบโมดูลตาม ECMAScript 2015 (ES6) แต่คุณสมบัติสำคัญคือความสามารถในการใช้ระบบไทป์ของ TypeScript

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

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

โมดูลภายในและโมดูลภายนอก

• โมดูลภายใน (Namespaces): วิธีการกำหนดโมดูลที่ใช้ใน TypeScript 1.5 และก่อนหน้า แต่ปัจจุบันไม่แนะนำให้ใช้ ตอนนี้ถือเป็น 'namespace'
• โมดูลภายนอก: มาตรฐานปัจจุบันที่อิงระบบโมดูลของ ES6 ส่วนนี้อธิบายเกี่ยวกับโมดูลภายนอกเป็นหลัก

วิธีการส่งออกโมดูล

เมื่อสร้างโมดูล การส่งออกเป็นสิ่งจำเป็นเพื่อให้สามารถเข้าถึงจากภายนอกได้ ใน TypeScript คุณสามารถส่งออกค่าต่างๆ ฟังก์ชัน คลาส เป็นต้น โดยใช้คำสำคัญ export โดยหลักมีสองประเภทของการส่งออก

การส่งออกแบบตั้งชื่อ (Named Exports)

ใช้สำหรับส่งออกหลายตัว ทำให้ฝั่งที่นำเข้าสามารถเลือกและใช้เฉพาะสิ่งที่ต้องการได้

 1// mathUtils.ts
 2export const pi: number = 3.14159;
 3
 4export function add(x: number, y: number): number {
 5    return x + y;
 6}
 7
 8export function subtract(x: number, y: number): number {
 9    return x - y;
10}

การส่งออกเริ่มต้น (Default Exports)

ใช้เมื่อคุณต้องการให้ทั้งโมดูลมีการส่งออกเริ่มต้นตัวเดียว การส่งออกเริ่มต้นจะถูกส่งออกโดยไม่มีชื่อ ทำให้ฝั่งที่นำเข้าสามารถเรียกใช้ด้วยชื่อใดก็ได้

 1// calculator.ts
 2export default class Calculator {
 3    add(x: number, y: number): number {
 4        return x + y;
 5    }
 6
 7    subtract(x: number, y: number): number {
 8        return x - y;
 9    }
10}

วิธีนำเข้าโมดูล

การใช้งานโมดูล คุณสามารถนำค่า ฟังก์ชัน คลาส ฯลฯ จากในโมดูลโดยใช้คำสั่ง import

การนำเข้าแบบกำหนดชื่อ

เมื่อคุณนำเข้าธาตุเฉพาะจากการส่งออกแบบกำหนดชื่อ ให้ใช้วงเล็บปีกกา {}

1// main.ts
2import { pi, add, subtract } from './mathUtils';
3
4console.log(`Value of pi: ${pi}`);
5console.log(`Addition: ${add(10, 5)}`);
6console.log(`Subtraction: ${subtract(10, 5)}`);

การนำเข้าแบบค่าเริ่มต้น

เมื่อนำเข้าการส่งออกแบบค่าเริ่มต้น คุณสามารถกำหนดชื่อใดๆ สำหรับรับข้อมูลได้

1// main.ts
2import Calculator from './calculator';
3
4const calculator = new Calculator();
5console.log(`Addition: ${calculator.add(10, 5)}`);
6console.log(`Subtraction: ${calculator.subtract(10, 5)}`);

การตั้งชื่อแทนนำเข้า

เพื่อหลีกเลี่ยงชื่อซ้ำหรือเพื่อลดความยาวของชื่อ คุณสามารถใช้นามแฝงสำหรับการนำเข้าได้

1// main.ts
2import { add as addition, subtract as subtraction } from './mathUtils';
3
4console.log(`Addition: ${addition(10, 5)}`);
5console.log(`Subtraction: ${subtraction(10, 5)}`);

ความแตกต่างระหว่างโมดูลและเนมสเปซ

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

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

 1// Example of a namespace
 2namespace Geometry {
 3    export function calculateArea(radius: number): number {
 4        return Math.PI * radius * radius;
 5    }
 6}
 7
 8// Can be used directly without importing the module (not recommended)
 9const area: number = Geometry.calculateArea(5);
10console.log(`Area: ${area}`);

การแก้ไขโมดูลใน TypeScript

ใน TypeScript มีวิธีการแก้ไขโมดูลอยู่สองแบบ

• Node Module Resolution: วิธีการแก้ไขมาตรฐานที่ใช้ในสภาพแวดล้อม Node.js ซึ่งจะค้นหาโมดูลในโฟลเดอร์ node_modules
• Classic Module Resolution: วิธีการแก้ไขของ TypeScript เองที่มีการค้นหาที่ยืดหยุ่นกว่า แต่มักไม่ค่อยใช้งานในปัจจุบัน

โดยทั่วไป Node module resolution จะถูกใช้งานและเปิดใช้งานโดยค่าเริ่มต้น เว้นแต่จะระบุไว้เป็นอย่างอื่นในไฟล์การตั้งค่า

ตัวอย่างที่ใช้งานได้จริง

สุดท้าย เราจะแสดงตัวอย่างการใช้งานและนำฟังก์ชันคำนวณกลับมาใช้อีกครั้งด้วยการใช้โมดูล

mathUtils.ts

 1export const pi: number = 3.14159;
 2
 3export function multiply(x: number, y: number): number {
 4    return x * y;
 5}
 6
 7export function divide(x: number, y: number): number {
 8    if (y === 0) {
 9        throw new Error("Cannot divide by zero");
10    }
11    return x / y;
12}

calculator.ts

 1import { multiply, divide } from './mathUtils';
 2
 3export default class Calculator {
 4    multiplyNumbers(x: number, y: number): number {
 5        return multiply(x, y);
 6    }
 7
 8    divideNumbers(x: number, y: number): number {
 9        return divide(x, y);
10    }
11}

main.ts

1import Calculator from './calculator';
2
3const calculator = new Calculator();
4
5const result1: number = calculator.multiplyNumbers(10, 5);
6console.log(`Multiplication: ${result1}`);
7
8const result2: number = calculator.divideNumbers(10, 2);
9console.log(`Division: ${result2}`);

สรุป

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

คุณสามารถติดตามบทความข้างต้นโดยใช้ Visual Studio Code บนช่อง YouTube ของเรา กรุณาตรวจสอบช่อง YouTube ด้วย

YouTube Video