מודולים ב-TypeScript
מאמר זה מסביר את המודולים ב-TypeScript.
YouTube Video
מודולים ב-TypeScript
מודולים ב-TypeScript הם תכונה חשובה לשיפור שימוש חוזר בקוד ותחזוקתיות. בדומה ל-JavaScript, TypeScript מבוססת גם על מערכת המודולים של ECMAScript 2015 (ES6), אך תכונה מרכזית היא היכולת לנצל את מערכת הטיפוסים של TypeScript.
מהם מודולים?
מודול הוא שיטה לקיבוץ קוד קשור ביחידה אחת שניתן לייבא ולהשתמש בה מחדש בקבצים אחרים. ב-TypeScript, תחום (scope) נוצר לכל קובץ כדי לכלול את הקוד ולמנוע ממנו להשפיע על קבצים אחרים. שיטה זו מסייעת במניעת התנגשות בקוד ומקלה על תחזוקת הקוד.
מודולים פנימיים ומודולים חיצוניים
- מודולים פנימיים (מרחבי שמות - 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)}`);ההבדל בין מודולים ומרחבים שמורים (Namespaces)
מרחב שמור (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: שיטת הפתרון הסטנדרטית המשמשת בסביבת Node.js שמוצאת מודולים באמצעות חיפוש בתיקיית
node_modules. - פתרון מודולים קלאסי: שיטת הפתרון המובנית של TypeScript שמבצעת חיפוש גמיש יותר, אך אינה בשימוש נפוץ כיום.
בדרך כלל נעשה שימוש בפתרון מודולים של Node, והוא מופעל כברירת מחדל אלא אם צוין אחרת בקובץ התצורה.
דוגמה מעשית
לבסוף, מוצגת דוגמה ליישום ושימוש חוזר בפונקציות חישוביות באמצעות מודולים.
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 בערוץ היוטיוב שלנו. נא לבדוק גם את ערוץ היוטיוב.