PracticU

פולימורפיזם ב-TypeScript

בלי כתוביותעם כתוביות
PracticU › קורס TypeScript › פולימורפיזם ב-TypeScript
מילון מושגים:
פולימורפיזם - עיקרון בתכנות מונחה עצמים שבו אובייקטים ממחלקות שונות מגיבים לאותה פעולה כל אחד בדרכו.
TypeScript - שפת תכנות המרחיבה את JavaScript בהוספת טיפוסים, ומתקמפלת ל-JavaScript רגיל.
אובייקט - יחידה בתכנות מונחה עצמים שמאגדת נתונים (תכונות) ופעולות (מתודות). נוצר בדרך כלל ממחלקה המשמשת כתבנית.
מערך - מבנה נתונים שמאחסן אוסף ערכים מאותו סוג ברצף, שאפשר לגשת אליהם לפי מספר מיקום (אינדקס).
מחלקה - תבנית בתכנות מונחה עצמים שמגדירה אילו נתונים ופעולות יהיו לאובייקטים שנוצרים ממנה.
לולאה - מבנה בקרה שחוזר על קטע קוד שוב ושוב כל עוד תנאי מתקיים או עבור כל פריט באוסף.
מתודה - פונקציה המוגדרת בתוך מחלקה ומתארת פעולה שאובייקטים מאותה מחלקה יכולים לבצע.
אופרטור - סימן בקוד שמבצע פעולה על ערכים, כמו חיבור, השוואה או פעולה לוגית.

פולימורפיזם ב-TypeScript
פולימורפיזם, רב-צורתיות, מאפשר להחזיק התייחסות אחת מסוג בסיס שמצביעה על אובייקטים נגזרים שונים. בהרצאה משתמשים בכך על מערך של צורות ורואים איך ניגשים לתכונות של מחלקה ספציפית.
מערך צורות
1. מערך מסוג הבסיס: shapes הוא מערך מסוג Shape, ובלולאה של 20 איטרציות מכניסים אליו צורות.
2. בחירה אקראית: בעזרת Metric.random(1, 2) ו-switch יוצרים עיגול או מלבן, כל אחד עם ערכים אקראיים בין 10 ל-20. טעות העתקה שגרמה להצגת צורה אחת בלבד תוקנה.
3. קריאה אחידה: for...of על המערך קורא ל-shape.display, ומתבצעת המתודה האמיתית של כל אובייקט. מופיעים עיגולים עם רדיוס ומלבנים עם רוחב וגובה.
גישה לתכונות של הנגזרת
4. הבעיה: shape.radius לא ידוע, כי הפריט במערך הוא מסוג Shape.
5. downcast: האופרטור as Circle מאפשר לגשת לרדיוס, אך על מלבן התוצאה היא NaN, כי הערך undefined כפול 2 אינו מספר.
6. instanceof: בדיקה if (shape instanceof Circle) מחשבת את הקוטר רק בעיגולים. בתוך ה-if אפשר לוותר על ה-downcast, כי העורך כבר יודע שהצורה היא Circle.
שימו לב
downcast על אובייקט שאינו מהסוג הנכון עלול לתת תוצאות מוזרות, ולכן עדיף לבדוק עם instanceof.
עכשיו אפשר לאחסן אובייקטים נגזרים במערך בסיס אחד, להפעיל עליהם מתודות ולבדוק את הסוג האמיתי שלהם.
השיעור הבא בקורס: מחלקה Generic ב-TypeScript

פרקי ההרצאה: פולימורפיזם ב-TypeScript

  1. 00:00

    רב-צורתיות ומערך מסוג Shape

  2. 01:03

    יצירת צורות אקראיות בלולאה

  3. 02:06

    בחירת סוג הצורה עם switch

  4. 03:20

    הוספה למערך והצגה עם for of

  5. 04:07

    הרצה ותיקון שגיאת העתקה

  6. 05:06

    הצגת הקוטר רק לעיגול

תמלול ההרצאה: פולימורפיזם ב-TypeScript

הטקסט המלא של הדקות הראשונות בהרצאה «פולימורפיזם ב-TypeScript» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.

  1. 00:02

    הדבר הבא שאנחנו הולכים לראות באובג'קט אוריינטד זה פולימורפיזם, רב-צורתיות. דבר ראשון, אני אמחק את כל מה שעשיתי פה ב-Main.js ואנחנו רוצים לייצר לעצמנו איזשהו מערך אחד שמכיל את כל הצורות.

  2. 00:23

    אז בפולימורפיזם אנחנו יודעים שאנחנו יכולים להגדיר איזשהו רפרנס בסיס ולהכניס לתוכו כתובת של אובייקט נגזרת. הקונספט הזה נקרא רב צורתיות כי אותו רפרנס יכול כל פעם להצביע על משהו אחר גם אם הרפרנס הוא איזה אחד הוא יחיד או גם אם הוא נמצא בתוך מערך זה נחשב פולימורפיזם אז בואו נייצר

  3. 00:45

    מערך של צורות shapes הסוג שלו יהיה מסוג shape מערך בצורה כזאת ונכניס לתוכו, האמת שאני יכול כבר כאן להכניס לתוכו איזשהו מערך ריק ולהתחיל לרוץ בלולאה i שווה 1, i קטן שווה ל... בוא נניח 20, i פלוס פלוס.

  4. 01:19

    בואו ניגש ונייצר לעצמנו צורות רנדומליות בעלות ערכים רנדומליים ונכניס אותם לאוסף הזה שיצרנו פה כרגע אז איך אנחנו מייצרים צורה רנדומלית בוא נניח יש לי כרגע רק מלבנים ועיגולים אז נעשה משהו פשוט אם f נקודה בוא נשתמש בפונקציה שבנינו מטריק נקודה רנדום 1 ו-2 שווה ל-1, שעדיף לעשות עם סוויץ' כבר נראה לי,

  5. 02:06

    אז נוכל בהמשך נניח להוסיף עוד צורות. קייס יצא לנו 1, אז אנחנו רוצים לייצר לעצמנו איזשהו אובייקט שייפ, נקרא לזה סינגל שייפ, מסוג שייפ, ולגשת לסינגל שייפ שלנו ולהכניס ניו סרקל.

  6. 02:37

    כאן נשתמש במטריק נקודה רנדום ונגיד לו תביא לי בבקשה איזשהו ערך בין 10 ל-20 עבור x בין 10 ל-20 עבור y ובין 10 ל-20 עבור הרדיוס וברק. מבצע את אותו הדבר עבור ריק טנגל.

  7. 03:16

    טנגל צריך לקבל גם וויד וגם הייט, אז נגדיר פה את ההייט בצורה כזאת ואחרי שיש לנו את הסינגל שייפ אנחנו יכולים לגשת לשייפס נקודה פוש ולהכניס סינגל שייפ.

  8. 03:33

    זה בעצם פולימורפיזם בואו רק נרוץ על הכל ונניח נציג את כל הפרטים. נעשה לולאט for each for const shape of shapes, shape.display זה אמור להציג לנו את הצורה על המסך.

  9. 04:01

    בואו רגע נריץ, אני רואה שהוא קצת קשה לו, אז נעצור רגע, נעצור את הקומפיילר, נריץ את הקומפיילר, הינו מקומפל, ונריץ שוב פעם את האינדקס, נראה עכשיו איך הוא עובד, לא מה שרציתי שיקרה,

  10. 04:26

    למה הוא מציג לי רק 1. אז הנה יש לנו פה קודם כל שגיאה של copy-paste, זה אמור להיות 2 ולא 1, כי הפונקציה יכולה להחזיר לי או 1 או 2 כמובן.

  11. 04:43

    הנה יש לנו כרגע 20 צורות שמוצגות לנו על המסך, הצורה יכולה להיות circle, יכולה להיות rectangle בצורה כזאת, אם זה וויד והייט אני רואה שזה ריקטנגל, אם זה רדיוס אני רואה שזה סרקל, הכל עובד פרפקט.

  12. 05:04

    בואו נראה מה קורה אם אני רוצה בנוסף לדיספליי להציג את הרדיוס, לא את הרדיוס, בואו נציג את הקוטר של העיגול, אבל רק אם יש לי קוטר, רק אם יש לי רדיוס כמובן.

  13. 05:24

    אז אם אנחנו באים לכאן אחרי הדיספליי ואומרים אני רוצה להציג דוקומנט right, ה-d המטר, את הקוטר של העיגול והקוטר של העיגול

לקורס המלא: קורס TypeScript אונליין

ההרצאה הקודמת: משתנה סטטי ב-TypeScript

ההרצאה הבאה: מחלקה Generic ב-TypeScript

הרצאות קשורות מקורסים אחרים

  • Typescript
  • פולימורפיזם ב-NodeJS
  • רב-צורתיות פולימורפיזם - Polymorphism

קורסים נוספים במסלול

  • קורס יסודות HTML - בניית אתר אינטרנט פשוט
  • קורס CSS 3 - בדגש על Flex & Grid
  • קורס Javascript כולל JQuery
  • קורס ג'אווה סקריפט מעשי - JavaScript
  • קורס ריאקט - React
  • קורס NodeJS