תחי ישראל - אין לנו ארץ אחרת

תחי ישראל -אין לנו ארץ אחרת

מחלקות ואובייקטים ב-TypeScript

מחבר:
בתאריך:

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

 

מחלקות (class) ואובייקטים

נתחיל מכתיבת מחלקה פשוטה, Car.

class Car {
    sayHello(){
      return "Beep! Beep!";
   }
}

למחלקה Car יש מתודה אחת sayHello.

ניצור אובייקט מהמחלקה, ונקרא למתודה sayHello.

let myCar = new Car();
console.log(myCar.sayHello()); // Beep! Beep!

 

מילת המפתח this

מילת המפתח this מאפשרת לגשת לשדות ולמתודות בתוך האובייקט שבו היא נמצאת.

בדוגמה הבאה, השדה message מכיל את המחרוזת שתחזיר המתודה sayHello, והמתודה יכולה לגשת לשדה באמצעות this.

class Car {
    message: string;

    sayHello(){
      return this.message;
   }
}

// ניצור אובייקט מהמחלקה
let myCar = new Car();

נגדיר את המסר שאנו רוצים שהמתודה תחזיר, ואז נקרא למתודה.

myCar.message = "Howdy-doody!";
console.log(myCar.sayHello()); // Howdy-doody!

ודאי שמתם לב שהגדרנו את הערך של המשתנה message מחוץ למחלקה, וזה מפני שהמשתנה message הוא משתנה ציבורי (public).
במידה ונרצה למנוע גישה ישירה לשדה נצטרך לשנות את ההגדרה שלו לפרטי private או למוגן (protected).

 

משתנים פרטיים וכיצד לגשת אליהם

אנחנו יכולים למנוע את הגישה למשתנים מחוץ למחלקה על ידי הוספת הקידומת private.

class Car {
    private message: string;

    sayHello(){
      return this.message;
   }
}

במידה ונגדיר משתנה כפרטי, לא נוכל לגשת אליו מחוץ למחלקה, והדרך היחידה לגשת אליו היא באמצעות פונקציות ציבוריות מסוג setter ו-getter.

  • פונקציות setter מאפשרות לקוד מחוץ למחלקה לשנות את ערכו של משתנה פרטי.
  • פונקציות getter מאפשרות לקוד מחוץ למחלקה לקבל את ערכו של משתנה פרטי.
class Car {
    private message: string;

    sayHello(){
      return this.message;
   }

   setMessage(text: string){
       this.message = text || "Howdy-doody!";
  }
  
  getMessage(){
    return this.message;
  }
}

let myCar = new Car();

myCar.setMessage ("Beep! Beep!");

console.log(myCar.sayHello()); // Beep! Beep!

console.log(myCar.getMessage()); // Beep! Beep!

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

פונקציית בנאי (constructor)

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

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

class Car {  
  constructor(public model: string, public year: number) {}
}

let sussita = new Car("Carmel", 1979);
console.log(sussita.model, sussita.year);// Carmel, 1979

שימו לב, שמספיק להגדיר את המשתנים year ו-model רק פעם אחת כפרמטרים בפונקציית הבנאי כדי שהם יהפכו לשדות לכל דבר באובייקט (sussita) שיצרנו מהמחלקה.
ומכיוון שהמשתנים מוגדרים כמשתנים ציבוריים (public), ניתן לגשת אליהם ולקבל את ערכם (השורה האחרונה בדוגמה).

 

שדות ומתודות סטטיים

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

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

class Car {  
  static numberOfCars: number = 0;
  
  constructor(public model="", public year=0){
      Car.addOne();
  }
  
  static addOne(){
    Car.numberOfCars++;
  }

}

let sussita = new Car("Carmel", 1979);
let subaru = new Car("Subaru DL", 1989);

console.log(Car.numberOfCars); // 2

 

הורשה ב-TypeScript

ניתן ליצור מחלקה שיורשת ממחלקה אחרת את כל התכונות והמתודות. במצב זה, המחלקה היורשת:

  • מקבלת את כל התכונות והמתודות של המחלקה שאותה היא יורשת.
  • יכולה להוסיף תכונות ומתודות.
  • יכולה לדרוס תכונות ומתודות שהיא ירשה.

נשתמש במילה השמורה extends כדי לציין ירושה.

בדוגמת הקוד להלן, המחלקה SportsCar יורשת את המחלקה Car, וגם המחלקה היורשת דורסת את הקונסטרקטור של המחלקה המקורית.

class SportsCar extends Car {
  // The constructor overrides the parent constructor
  constructor(public model="", public year=0){
    super(model, year); // Derived constructors must contain a super call
    SportsCar.addOne();
  }
}

ניצור אובייקט מהמחלקה:

let Ferrari = new SportsCar("Ferrari", 2017);
console.log(Car.numberOfCars);// אין בעיה להשתמש במתודה מההורה

האם האובייקט שייך למחלקה Car?

console.log(Ferrari instanceof Car);// true

 

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

 

לכל מדריכי ה-TypeScript

 

אהבתם? לא אהבתם? דרגו!

0 הצבעות, ממוצע 0 מתוך 5 כוכבים

 

 

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

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

שימו לב! הסקריפטים במדריכים מיועדים למטרות לימוד בלבד. כשאתם עובדים על הפרויקטים שלכם אתם צריכים להשתמש בספריות וסביבות פיתוח מוכחות, מהירות ובטוחות.

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

השימוש שלך באתר מהווה ראייה להסכמתך עם הכללים והתקנות שנוסחו בהסכם תנאי השימוש.

הוסף תגובה חדשה

 

 

ענה על השאלה הפשוטה הבאה כתנאי להוספת תגובה:

דג למים הוא כמו ציפור ל...?

 

תמונת המגיב

בר בתאריך: 26.10.2020

תודה על המדריך המפורט! TS מאוד מזכיר עקרונות של c# וjava