הסבר על Decorators
Cat עם name ו-age, constructor ופונקציית display. יוצרים שלושה אובייקטים וקוראים לתצוגה שלהם עם npm start.decorators.ts מייצאים פונקציה logCreation שמקבלת target מסוג any ומדפיסה שם המחלקה נוצרה, לפי target.name. הפרמטרים תלויים ברכיב שמעליו מניחים אותה, וכאן החתימה מתאימה למחלקות.@logCreation מעל המחלקה Cat. לדברי המרצה המחלקה מקושטת בדקורטור.tsconfig מוסיפים experimentalDecorators: true. בלי זה TypeScript מציגה שגיאה על השימוש בדקורטורים.פרקי ההרצאה: הסבר על Decorators
תמלול ההרצאה: הסבר על Decorators
הטקסט המלא של הדקות הראשונות בהרצאה «הסבר על Decorators» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
אנחנו רוצים לראות משהו נוסף מעניין שקיים כאן בעבודה עם מוביקס והדבר הזה נקרא דקורטורס למעשה דקורטורס זה משהו שבכלל שייך לטייפ סקריפט משהו מאוד מאוד מעניין שהרבה עובדים איתו בטייפ סקריפט בכל מיני מערכות לדוגמה באנגולר עובדים איתו הרבה בריאקט קצת פחות אבל במוביקס אפשר לשלב את זה.
הדבר הראשון שחשוב לנו להבין זה מה זה Decorators. בניתי כאן איזושהי תוכנית קטנה לא קשורה לתוכנית של הנורת'ווינד שלנו, שכל מה שהתפקיד שלה לעשות זה להבהיר לנו מה זה הדבר הזה שנקרא Decorators.
ומה שבניתי פה זה קלאס בשם Cat מייצגת חתול ויש לו name ו-age. הנה קונסטרקטור, הוא מקבל את ה-name וה-age ושם אותם ב-data members. הנה יש לנו פונקציית דיספליי שפשוט מציגה את הפרטים על המסך, אנחנו מחצינים את ה-CAT מחוץ לקובץ.
יש לנו כאן אפ, יש לנו כאן אפשרות להשתמש עם ה-CAT, יצרתי שלושה אובייקטים וקראתי לדיספליי שלהם. כמובן שהפרויקט הזה זה טייפ סקריפט שאפשר להריץ אותו כאן בקונסול, אני רושם npm start והוא רץ לו ומציג לי, הנה שלושת החתולים על המסך.
מה בעצם קרה כאן? יצרנו שלושה אובייקטים והשתמשנו באובייקטים. על התוכנית הזאת אני רוצה להוסיף משהו שנקרא דקורטור. אני בונה קובץ חדש, אני קורא לו decorators, ברבים TS, כי אפשר להוסיף הרבה דקורטורים.
מה זה דקורטור? דקורטור זאת קודם כל פונקציה. אני מחצין function. הפונקציה הזאת זאת פונקציה שאנחנו מגדירים אותה מעל לאיזשהו אלמנט תכנותי.
האלמנט התכנותי זה יכול להיות קלאס, זה יכול להיות משתנה, זה יכול להיות פונקציה, זה יכול להיות המון דברים שמוגדרים בתוך הקלאס.
והפונקציה הזאת שאנחנו בונים מופעלת פעם אחת שהזמן הריצה מייצר לנו את המחלקה הזאת לראשונה. זאת אומרת שאותה פונקציה שאנחנו בונים לא תופעל כל פעם שיוצרים אובייקט מהמחלקה, אלא תופעל כשלדוגמה הקוד עצמו נוצר פעם אחת.
בואו נבנה פונקציה שנקראת logCreation כי אני רוצה לראות בעצם שהרכיב שמעליו אני שם את הפונקציה נוצר לראשונה. פונקציה לא תחזיר כלום, פונקציות דקורטור מקבלות טארגט, הן יכולות לקבל עוד משתנים אבל אנחנו לא רוצים כרגע לחפור יותר מדי בכל מיני פיצ'רים של דקורטורס אלא להבין את הקונספט הכללי שלהם.
אז נגדיר target any, הטארגט זה בעצם מעל מי שמנו את אותו דקורטור ובואו נציג פשוט קלאס שרשר target.name has been created. Good, זה כל מה שהפונקציה הזאת עשתה.
אנחנו רוצים לבוא ל-cat ולשים מעליה את הדקורטור. איך משתמשים עם דקורטור? על ידי סימן השטרודל log creation. זה אומר שאנחנו עכשיו הגדרנו את הדקורטור הזה.
דקורטור זה כאילו מקשט או מעטר משהו כי אנחנו כאילו איתרנו או קישטנו את המחלקה בדקורטור. זה אומר שהפונקציה הזאת אכן תרוץ אבל היא תרוץ פעם אחת בלבד כשהמערכת תיצור לנו את הקלאס.
אפשר לשים דקורטור כמו שאמרנו מעל כל מיני