PracticU

יצירת interface ב-TypeScript

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

יצירת interface ב-TypeScript
ב-JavaScript אין interface, אבל ב-TypeScript יש. ההרצאה מראה איך מגדירים interface ומממשים אותו במחלקה.
השלבים העיקריים
1. הגדרה: בקובץ נפרד מגדירים interface בשם Drawable עם פונקציה draw. בניגוד לשפות אחרות, interface ב-TypeScript יכול להצהיר גם על משתנה, כמו char מסוג string.
2. מימוש: כותבים implements Drawable אחרי extends Shape, ללא פסיק בין השניים. ה-interface לא קיים ב-JavaScript שנוצר, והקומפיילר הוא זה שבודק שהמחלקה מממשת את כל מה שהוגדר.
3. יצירה אוטומטית: הבלון "Implement Interface" ממלא את char ואת draw.
4. מימוש הציור: ב-Rectangle לולאה על הגובה ולולאה פנימית על הרוחב מדפיסות את התו עם רווח, ושורה חדשה בסוף כל שורה. ההרצאה מתעלמת מ-x ומ-y. עם רוחב 50 וגובה 10 מתקבל מלבן סביר.
5. ערך אופציונלי: char? ב-interface אומר שאין חובה לממש אותו. ובכל זאת המחלקה צריכה להגדיר ערך כדי שהקוד יעבוד, ובדוגמה הוגדר #. גם פונקציה יכולה להיות אופציונלית, ואילו draw נשאר חובה.
שימו לב
אם מוותרים על מימוש של חבר חובה מה-interface, מתקבלת שגיאה בקומפילציה.
עכשיו אפשר להגדיר interface עם פונקציות ומשתנים, לממש אותו במחלקה ולסמן חלק מהחברים כאופציונליים.
השיעור הבא בקורס: משתנה סטטי ב-TypeScript

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

  1. 00:00

    Interface ופונקציית draw ב-TypeScript

  2. 00:52

    הצהרה על משתנים ב-Interface

  3. 01:31

    מימוש עם Implements במלבן

  4. 02:07

    מימוש char ו-draw במחלקה

  5. 02:45

    ציור מלבן בכוכביות בלולאות

תמלול ההרצאה: יצירת interface ב-TypeScript

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

  1. 00:02

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

  2. 00:16

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

  3. 00:34

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

  4. 01:19

    בואו נניח שזה בעצם ה-interface שלנו. ובואו ניקח את ה-interface הזה ונממש אותו רק במחלקה של הרקטנגל סתם בשביל הכיף. אז יש לנו פה extends shape פסיק, אפילו לא פסיק, בלי פסיק, Implements Drawable ושימו לב שאנחנו לא צריכים להגדיר את האינטרפייס כאן מפני שבג'אווה סקריפ נייטיב

  5. 01:45

    אין דבר כזה אינטרפייס, זה משהו שרק הקומפיילר בודק ואומר תקשיב אם אתה מימשת פה את האינטרפייס אתה צריך לכתוב ולממש את התוכן שלו, בוא נלך לבלון Implement Interface Drawable והוא זורק לי את שני החבר'ה האלה, הוא אומר לי אתה צריך שיהיה לך משתנה שנקראת char, האינטרפייס לא מגדיר את המשתנה, הוא רק

  6. 02:10

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

  7. 02:36

    זה היה get area, ובואו נניח שפה אני מבצע ציור. אז איך אנחנו בעצם מציירים מלבן? אז בואו נצייר אותו רגע, פה אני גם אגדיר public שיהיה יותר מסודר.

  8. 02:51

    איך נצייר מלבן? בואו נגיד שהצ'אר שלו זה כוכבית כרגע, ואנחנו רוצים לרוץ קודם כל על הגובה. בואו נצייר אותו בכוכביות כזה, נרוץ i שווה 1, i קטן שווה this.height i++ בואו נצייר את השורות, j מתחיל מ-1, j קטן שווה this.width ו-j++ בוא תעשה לי דוקיומנט רייט של this.char ועם איזשהו רווח

  9. 03:40

    ובוא תראה פה שורה דוקומנט רייט בר אני כרגע מתעלם מהx והy אני פשוט מצייר צורה בלי קשר לx וy אלא רק with the height דוקומנט רייט בוא נעשה פה אפילו איזה קו ויש לנו עכשיו מימוש של draw שהגיע מהאינטרפייס הזה כולל המשתנה שנמצא פה.

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

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

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

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

  • Typescript
  • הבדל בין Interface ל-Abstract Class

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

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