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

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

interface בסגנון מונחה עצמים ב-TypeScript

 

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

interface מחייב כל קוד שמיישם אותו לכתוב מתודות או שדות מסוימים.

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

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

interface Car {
    model: string;
    year: number;
    color?: string; // שדה אופציונלי
}

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

נאמר שהמשתנה subaru מיישם את ה-interface.

let subaru: Car;

subaru = {model: 'DL', year: 1989};

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

subaru= {model: 'DL', year: 1989, color: 'beige'};

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

subaru= {model: 'DL', year: 1989, color: 'beige', driver: 'Moshe'};

הקומפילציה של הקוד תזרוק שגיאה, בגלל שהוספנו שדה שלא קיים ב-interface (driver).

subaru = {model: 'DL'};

קוד זה יגרום לשגיאת קומפילציה כי השדה year החיוני ליישום ה-interface חסר.

כפי ש-interface יכול לחייב אובייקט להכיל שדות מסוימים, הוא יכול לחייב מחלקה ליישם שדות ומתודות מסוימים.

לדוגמה, כל מחלקה שתיישם את ה-interface תהיה חייבת ליישם את השדה speed וגם את המתודה accelerate (שמקבלת פרמטר מסוג מספרי, ומחזירה שום דבר, void).

// Inteface
interface Car {
    speed: number;
    accelerate(by: number): void;
}

// Class to implement the interface
let car: Car = {
     speed: 80,
     accelerate: function(by: number): void{
         this.speed += by;
    }
}

 

מה יקרה כשנקמפל את הקוד ל-JavaScrip

קומפילציה של הקוד ל-JavaScript תגרום להעלמות ה-interface, וזה בגלל שאין ב-JavaScript שום דבר שמקביל ל-interface שמציע TypeScript.

כך יראה הקוד המקומפל:

// האינטרפייס נעלם בקומפילציה
var car = {
    speed: 80,
    accelerate: function (by) {
        this.speed += by;
    }
};

אם כן מה הטעם להשתמש ב-interface?

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

במדריך הבא, נטפל בעוד טכניקה מועילה של TypeScript שהיא השימוש ב-generics.

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

 

 

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

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

 

 

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

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

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

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

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

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

 

 

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

מתי הוקמה המדינה?

 

תמונת המגיב

חזי בתאריך: 09.10.2018

חזק ביותר!

תמונת המגיב

שמחה בתאריך: 28.10.2019

תודה רבה יפה מאד
מה עם הטכניכקה המועילה generics?

תמונת המגיב

מוי בתאריך: 11.02.2020

לא מוצא את הקישור למדריך הבא...

תמונת המגיב

בר בתאריך: 26.10.2020

מדריכים מעולים עד כה, מתי יתפרסם ההמשך על השימוש עם generics?