יצירת מחלקת מודל - Model Class
id, name, price, stock ו-imageName. המידע בשרת המקומי שונה מעט מהמידע המקורי של Northwind (שבו השדות נקראים product ID, product name ו-unit price ואין תמונות), כדי שיהיה קל יותר לפתח.src פותחים תיקייה models ויוצרים בה קובץ product-model.ts. כדאי לסיים את השם ב-model, כדי שלא יתבלבלו עם קומפוננט בשם product.ID והשרת שולח id, המידע ייכנס למשתנה אחר ולא נוכל להגיע אליו.id, price, stock הם number, ו-name ו-imageName הם string. אחר כך מחצינים עם export default.toString שנגדיר במחלקה תיראה קיימת ב-TypeScript, אבל לא תהיה באובייקט בפועל. זה מקור לבאגים.interface: הוא רק דקלרטיבי, לא מאפשר להגדיר בו פונקציות, ומתאר היטב literal object. מורידים את ה-public. במחלקה אפשר להגדיר פונקציות סטטיות, כי הן שייכות למחלקה ולא לאובייקט. בהרצאה בוחרים להשאיר interface, ואם יהיה צורך בהמשך עוברים ל-class.פרקי ההרצאה: יצירת מחלקת מודל - Model Class
תמלול ההרצאה: יצירת מחלקת מודל - Model Class
הטקסט המלא של הדקות הראשונות בהרצאה «יצירת מחלקת מודל - Model Class» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
אז מה הדבר הראשון שאנחנו צריכים לבצע? מה שאנחנו צריכים לעשות זה קודם כל לראות מה המידע שמוחזר לנו מהשרת. בואו עוד פעם ניקח את הכתובת של הפרודקטס, ניגש ונגלוש אל המוצרים ונראה שמוחזר לנו פורמט ג'ייסון.
אנחנו יכולים לראות שיש לנו פה סוגריים מרובעים, זה אומר שזה מערך ומסוסלים בתוכו, זה אומר שזה אובייקט. ולאובייקט יש ID והקוד.
יש לו name, יש לו price, יש לו stock, יש לו image name. הערה קלה, זה דומה למידע האמיתי של חברת Northwind.
יש פה קצת שינוי מהמידע האמיתי. המידע האמיתי נקרא product ID ו-product name ו-unit price ואין לו באמת תמונות. יש לו פה בסרבר המקומי הזה קצת שינויים שהם יהיו יותר קלים לפיתוח, מי שרוצה להשתמש במידע הזה של Northwind.
מה שאנחנו רואים זה כל אובייקט, זה מה שיש לו. ID, Name, Price, Stock ו-Image Name. מה שאנחנו צריכים לעשות זה לבנות משהו שנקרא מחלקת מודל.
מחלקת מודל זה מחלקה שמכילה מידע טהור בלבד. מידע טהור זה אומר רק הנתונים שמגיעים מה-Backend. אנחנו רוצים עכשיו להתחיל להשתמש ברחבי הפרויקט שלנו במידע הזה.
אז הכי קל שיהיה לנו אובייקט שמחזיק את הנתונים האלה, בדיוק אובייקט כזה. אנחנו בטיימסקריפט, הכי קל לבנות קלאס שמתארת את האובייקט הזה, ואז אנחנו יכולים לבנות אובייקטים מהקלאס, לקבל אליהם מידע מהבאק-אנד, להשתמש בו וכדומה.
יש כאלה שאוהבים לבנות את האובייקט הזה על ידי זה גם בסדר גמור. יש יתרון מסוים בבנייה של הדבר הזה עם אינטרפייס, כלומר הגדרת הנתונים באינטרפייס.
אנחנו כבר נראה בדיוק מה ההבדלים, ובואו נצלול לעומק ונתחיל לבנות את המחלקה הזאת. אז אנחנו חוזרים בחזרה לפיתוח, ובואו נסתכל מה יש לנו בתיקיית ה-SRC. יש לנו את ה-assets, יש לנו את הקומפוננטות, יש לנו Services שבנינו, אנחנו רוצים עוד שאחראית עלה מודלים שיש לנו.
אז אני פותח פה תקייה נוספת מודלז. בתוך המודלז אני יוצר קובץ אני קורא לו product model זה תמיד יחיד כי הוא מתאר אובייקט אחד והסוג שלו זה .ts זה קובץ טייפ סקריפט רגיל לגמרי שימו לב רק שכדאי מאוד שהוא יסתיים במילה מודל כי יכול להיות שיהיה לנו דברים אחרים שנקראים
פרודקט לדוגמה קומפוננט שנקרא פרודקט אולי אז אם זה מודל כדאי לסיים את זה במילה מודל ואז חד משמעית זאת מחלקת מודל שיש לנו אז אנחנו בונים כאן קלאס פרודקט מודל ומה שאנחנו רוצים לבצע זה להכניס לקלאס הזאת בדיוק את המידע שמוחזר לנו מצד השרת עכשיו מאוד מאוד חשוב הניימינג שמוחזר מהבאק אנד חייבים להיות בול הניימינג
שלנו, זאת אומרת אם יש לי ID אז אני חייב שהוא יהיה באותו ניימינג אני לא יכול לבנות אותו ID בצורה כזאת לא יודע בא לי שה-i יהיה i גדולה doesn't fly לא יעבוד למה מפני שהשרת הולך להביא לנו ID עם i קטנה אם אנחנו נגדיר ID עם i גדולה או ID עם כל אותיות גדולות בצורה כזאת כמובן פה זה number זה אומר שיהיה לנו משתנה במחלקה שנקראת ID בצורה כזאת,
אבל השרת עדיין יביא ID עם I קטנה ו-D קטנה. אז באובייקט הזה, שהולך כאילו להיווצר לנו, יהיו שני משתנים, ID באותיות גדולות ו-ID באותיות קטנות שבו ישב המידע, אבל אנחנו לא נוכל להגיע אליו, מפני שאנחנו בפרויקט שלנו מכירים ID עם אותיות גדולות.
במילים אחרות, אתם חייבים להגדיר את המשתנים בול לפי מה שהשרת מביא לכם, טוק קיי סנסיטיב, לא לשנות אותם במילימטר. אז הנה יש לנו ID באותיות קטנות, ID בצורה כזאת, ובואו נוסיף public name, זה כמובן סטרינג, בואו נוסיף public price, זה כמובן number,
בואו נוסיף public stock, זה number, היה לנו שם public image name, וזה סטרינג, בואו נסתכל שזה המידע, name, price, stock, image name, שימו לב ל-N הגדולה ול-I הקטנה, זה חייב להיות אותו דבר, בול.
בואו נחצין את זה, export default product model וסיימנו לבנות את מחלקת המודל. אז קודם כל עיקרון מאוד חשוב, אמרנו naming חייבים להיות אותו דבר.
מה בנוגע לאינטרפייס שדיברתי עליו מקודם? יכול להיות מצב שאתם מגדירים קלאס ואם אתם מגדירים קלאס אז אתם יודעים שאפשר להגדיר בו פונקציות. לדוגמה בואו נבנה פונקציה שנקראת