PracticU

מחלקה אבסטרקטית ב-TypeScript

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

מחלקה אבסטרקטית ב-TypeScript
כשכמה מחלקות חולקות תכונות משותפות, בונים להן מחלקת בסיס. בהרצאה זו בונים עץ הורשה של צורות על המסך, ורואים איך מחלקה אבסטרקטית ופונקציה אבסטרקטית מכריחות מבנה נכון.
עץ הצורות
1. מחלקת בסיס: Shape מחזיקה את x ו-y, מיקום הצורה על המסך. היא משתמשת בקיצור של מאפייני בנאי ומכילה מתודת display.
2. שתי מחלקות יורשות: Circle מוסיפה radius, ו-Rectangle מוסיפה width ו-height. כל אחת קוראת ל-super עם x ו-y ודורסת את display, ומוסיפה את הנתונים שלה.
3. סדר הקבצים: הקבצים נטענים לפי הצורך, ובאינדקס Shape מופיעה לפני המחלקות שיורשות ממנה.
אבסטרקטיות
4. מחלקה אבסטרקטית: Shape נבנתה רק כדי לא לחזור על קוד, ולכן אין סיבה שיוצרים ממנה אובייקט. המילה abstract לפני class גורמת לשגיאה "cannot create an instance of an abstract class" בכל ניסיון כזה.
5. פונקציה אבסטרקטית: abstract getArea(): number מוצהרת ללא מימוש, כי צורה כללית לא יכולה לחשב שטח. כל מחלקה יורשת שאינה אבסטרקטית חייבת לממש אותה.
6. מימוש: בעיגול השטח הוא Math.PI כפול הרדיוס בחזקת 2, באמצעות **. במלבן הוא width כפול height. אפשר להשתמש בבלון התיקון של העורך כדי ליצור את השלד אוטומטית.
7. בדיקה: בקוד הראשי מדפיסים את השטח של כל צורה, ובעיגול משתמשים ב-toFixed כדי להציג שתי ספרות אחרי הנקודה.
שימו לב
אם Rectangle הייתה אבסטרקטית בעצמה, לא הייתה חובה לממש בה את הפונקציה.
עכשיו אפשר להגדיר מחלקת בסיס אבסטרקטית עם פונקציות שיורשים חייבים לממש.
השיעור הבא בקורס: יצירת interface ב-TypeScript

פרקי ההרצאה: מחלקה אבסטרקטית ב-TypeScript

  1. 00:00

    פרויקט שומר מסך של צורות

  2. 00:47

    מחלקת בסיס משותפת לצורות

  3. 01:46

    בניית המחלקה Shape

  4. 03:12

    מחלקת Circle שיורשת מ-Shape

  5. 04:36

    מחלקת Rectangle עם רוחב וגובה

  6. 05:48

    יצירת אובייקטים והרצה

  7. 06:49

    מחלקה ופונקציות אבסטרקטיות

  8. 07:25

    מניעת יצירת אובייקט מ-Shape

תמלול ההרצאה: מחלקה אבסטרקטית ב-TypeScript

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

  1. 00:02

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

  2. 00:36

    כך circle, יש לנו פה מחלקה שמתארת עיגול, אנחנו רוצים לבנות אותה, ויש לנו פה מחלקה שמתארת מלבן, ואנחנו רוצים לבנות אותה. אבל הרבה צורות יש להן דברים משותפים.

  3. 00:52

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

  4. 01:15

    בעץ הורשה החצים הולכים לכיוון מעלה, זה מה שמקובל. אז איך נקרא למחלקה הזאת? אז הגיוני שנקרא לה שייפ, ויש לנו כאן מחלקה שמתארת צורה כללית.

  5. 01:29

    לצורה כללית יש x ו-y, לעיגול יש גם רדיוס ולמלבן יש ויד והייט. זה מה שאנחנו רוצים לבנות בתור עץ הורשה ועל זה נראה את שאר הדברים היותר מורכבים שיש לנו כאן.

  6. 01:51

    אז בואו נייצר לעצמנו פה איזושהי מחלקה וקודם כל יש לנו שייפ נקודת ts פלאס שייפ יש לנו פה בוא נגיד שהכל public x number יש לנו y number יש לנו איזשהו קונסטרקטור, האמת אפשר אפילו להשתמש בטריק של הקונסטרקטור פרופרטי זה יהיה number public x number ויש לנו פה דיספליי זה אפשר להוריד

  7. 02:33

    זה אמור להיות y כמובן דיספליי ופה אנחנו רוצים להציג כמה זה הx דיס נקודה, פה אני צריך דולר, דיס נקודה איקס, נרד שורה, משכפל, כמה ה-y שלנו, ויש לנו פה את המחלקה שמתארת צורה כללית, אנחנו רוצים לגשת ולייצר circle, typeScript,

  8. 03:12

    פלאס circle extends shape, ואנחנו רוצים להוסיף, בואו נעשה public constructor, קונסטרקטור אנחנו רוצים, בוא נעשה את זה כבר בצורה כזאת public radius ויש לנו number, יש לנו כאן קונסטרקטור והקונסטרקטור מקבל את ה-X, מקבל את ה-Y ומקבל את ה...

  9. 03:55

    לא האמת, בואו נבנה public radius number, נראה לי יותר פשוט יהיה. כאן אנחנו רוצים לקרוא לסופר ולשלוח את ה-X ואת ה-Y ולבצע האמת שזה כבר יכניס את הרדיוס למעלה.

  10. 04:13

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

  11. 04:49

    נשנה את השם ריק אנגל, ריק אנגל מקבל XY, מקבל וויד והייט. פיס פה את הוויד, פיס נקודה וויד ואת ה-height, ובוא נניח אפילו כאן נגדיר HR שיהיה לנו קו אחרי ההדפסה וגם כאן hr ואנחנו רוצים לבדוק את הנתונים אז בואו ניגש פה למיין שאני לא אשכח לשכפל את זה ואנחנו רוצים גם shape אנחנו

  12. 05:39

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

  13. 06:09

    אז יש לנו פה my circle שווה new circle, ויש לנו x, y, radius, my circle, display, my rectangle, מיוריקטנגל, יש לנו 11, 22, 33, 44, מייריקטנגל, דיספליי ובונאריץ ואנחנו רואים שהכל עובד כמו

  14. 06:44

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

  15. 07:00

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

  16. 07:14

    ואנחנו רוצים שהמחלקה shape עצמה תהיה מחלקה אבסטרקטית, בכדי שלא ניתן לבנות ממנה אובייקט, זה לא המטרה שלה. כעת כל אחד יכול לבוא וליצור myshape=musehape ולהגיד יש לי צורה מסוימת שיש לה x ו-y ואנחנו יכולים אפילו to display it

  17. 07:39

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

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

ההרצאה הקודמת: הורשה ב-TypeScript

ההרצאה הבאה: יצירת interface ב-TypeScript

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

  • מחלקה אבסטרקטית ב-NodeJS
  • מחלקה אבסטרקטית - Abstract Class
  • Typescript
  • יצירת מחלקה עם כל ההגדרות - Config Class - חלק 1

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

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