יבוא ויצוא Module ב-TypeScript
test.ts מוגדרים משתנים a ו-b, פונקציות f1 ו-f2 ומחלקה Tester. כל מה שבו נגיש רק בתוכו.export חושפת את b, את f2 ואת Tester מחוץ לקובץ.import עם סוגריים מסולסלים, שם החברים, ואחריהם הנתיב לקובץ ./test.js באותה תיקייה. אחר כך אפשר להציג את b, לקרוא ל-f2 וליצור new Tester.f2 יכולה לקרוא ל-f1 ולהשתמש ב-a. מבחוץ אי אפשר לגשת ל-a, כי אין לו export.Tester2, ואז מייבאים אותו בלי סוגריים מסולסלים. חברים שיוצאו בלי default חייבים להיכתב בתוך סוגריים. אפשר לכתוב export default ישירות בהגדרת המחלקה או אחריה.Cat בקובץ cat.ts כותבים export default, ואז import Cat from הקובץ. התבנית הזו נפוצה ב-React, באנגולר וב-Node.js..js או .ts בנתיב. הרצאה מציינת שב-React ובאנגולר זה לא נדרש.פרקי ההרצאה: יבוא ויצוא Module ב-TypeScript
תמלול ההרצאה: יבוא ויצוא Module ב-TypeScript
הטקסט המלא של הדקות הראשונות בהרצאה «יבוא ויצוא Module ב-TypeScript» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
בגרסת JavaScript אקמה סקריפט 6 הוסיפו קונספט של מודולים זה היה ב-2015 בואו נראה איך אפשר לעבוד עם מודולים בטייפ סקריפט דבר ראשון אנחנו הגדרנו שאנחנו אקמה סקריפט 5 כבר אנחנו לא יכולים לעבוד עם מודולים אז או שאנחנו מעבירים לאקמה סקריפט 6 בכדי לעבוד עם מודולים או שמשאירים אקמה סקריפט 5 ואפשר להגדיר
מודול ולתת לו אחד מסדרת אפשרויות לדמות מודול כמו כל מיני ספריות common js או amd או להגדיר כאן אקמאסקריפט 6 אבל זה פחות הגיוני כי אם האתר שלנו הוא אקמאסקריפט 5 אז קשה לי לדעת מה הם יעשו בשביל לתמוך במודול אז נשאיר את זה כרגע בצורה כזאת, אני מקווה שזה יעבוד כמו שצריך, נסגור את זה ובואו נייצר לעצמנו מחלקה סתם
בשביל לבדוק מה זה אומר מודול נקרא לה test.ts והרעיון זה שכל קובץ טייפסקריפט או ג'אווה סקריפט במקרה שלנו זה הולך להיות טייפסקריפט נחשב מודול נפרד וסגור ואנחנו יכולים לכתוב בו מה שאנחנו רוצים אנחנו יכולים לבנות בו משתנים בואו נבנה פה משתנה a ונבנה פה משתנה b ונבנה פה פונקציה F1 שנעשה בה איזשהו אלרט F1 ונבנה כאן את F2
ונגדיר ב-F2 שהיא פשוט מציגה אלרט של F2 וכל מה שאנחנו מגדירים בתוך המודול נגיש אך ורק למודול עצמו אנחנו לא הולכים לחשוף אותו עם סקריפט כאן ואז כל מה שכתוב בו נגיש רק בתוך המודול מה שאנחנו רוצים לחשוף החוצה בואו נחשוף רגע את b אנחנו חושפים את זה על ידי אקספורט אקספורט חושף משהו מחוץ לקובץ בואו ניגש לפה ל-f2 ונחשוף
את f2 על ידי אקספורט ובואו נבנה איזה שהיא פלאס אולי נקרא לה טסטר ונחשוף את טסטר על ידי אקספורט בצורה כזאת עכשיו עכשיו אנחנו רוצים להשתמש עם כל מה שחשפנו החוצה מחוץ לקובץ.
בואו נשים אותו רגע פה בצד. אז כאן מגיעה הפקודה ההפוכה שנקראת אימפורט. אימפורט אומרת לנו קודם כל מאיפה אתם רוצים שאני אביא את הנתונים. אני רוצה להביא אותם מתוך קובץ JavaScript שנמצא באותה תיקייה שלי, כי אני הולך להיות קובץ JavaScript שנמצא פה ב-JS.
אז נקודה, זאת התיקייה הנוכחית, והקובץ יהיה test.js הוא הולך להיות קובץ באותו המקום שלי. עכשיו, מה אני בדיוק רוצה לשלוף החוצה מהקובץ הזה?
אז כל מה שחשפנו באקספורט אנחנו יכולים להגדיר כאן בתוך סוגריים מסובסדיים והוא אומר לי, תשמע, מה שחשפת זה את המשתנה b וחשפת פה פונקציה שנקראת f2 וחשפת החוצה מחלקה שנקראת טסטר.
אוקיי, עכשיו ברגע שעשית להם אימפורט אתה יכול לבוא לפה ולהשתמש בהם. אז בואו נשתמש באלרט, נגיד לו שאני רוצה להציג את b, b זה כמובן משתנה, אני רואה אותו פה, הוא הציג לי פה 200, ואני רוצה לקרוא לפונקציה f2, f2 זאת פונקציה אז אני קורא לה בצורה כזאת, ואני רוצה לגשת וליצור אובייקט מהמחלקה טסטר,
בואו נגדיר פה איזה public display, נעשה alert I'm tester בצורה כזאת וניצור פה אובייקט מ-const tester שווה new tester ונקרא ל-tester.display אז בואו נראה רגע מה אנחנו צריכים לעשות בשביל שהוא יריץ את זה, יש לנו פה עדיין שגיאה, בואו נראה רגע מה השגיאה, הוא אומר לי cannot use import statement outside
Inside of a module, אוקיי, הוא מתחיל לראות שאני משתמש באימפורט ואקספורט, אבל הוא אומר, תשמע, זה עדיין לא באמת מודול. למה? כי בשביל לעבוד עם מודולים אנחנו צריכים להגדיר פעם אחת כאן במיין שהמיין הוא גם כן מודול וצריך להתייחס אליו בתור מודול.
זה מתבצע על ידי type = module.