Typescript
פרקי ההרצאה: Typescript
תמלול ההרצאה: Typescript
הטקסט המלא של הדקות הראשונות בהרצאה «Typescript» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
שלום לכולם, אנחנו הולכים עוד מעט להתחבר לשרת ולהביא ממנו את רשימת המוצרים וזה הולך להיות קוד די מסובך להבנה ודי קשה, לפחות למי שמתחיל ולפני כן אני רוצה להקשיח את התנאים, שלא יהיה לי טעויות ולא לעשות שמוצר זה סתם איזשהו קלאס ואני יכול לדחוף לו איזה שדה שבא לי אני יכול פה לעשות בלה בלה שדה ולכתוב שהוא שווה 55
אז אני רוצה שהדבר הזה לא יעבוד כרגע זה כן עובד שימו לב אתר שלי ירוץ ולא אכפת לו שבמוצר מספר 2 יש פתאום איזה שהם שדות אחרים אין שום אחידות ואין שום מסגרת קשיחה הכל קלאס פשוט של אובייקט ותדחוף שם מה שאתה רוצה וזה יכול לגרום הגישה הזאת יכולה לגרום לי לטעויות אני יכול בטעות להכניס שדה לא נכון אני
אני יכול בטעות לכתוב מיים 2 ופרייס 2 בתוך אובייקט, אני יכול לעשות טעויות והמערכת תוכל את הכל, היא תיתן לי לעבוד. יותר מזה, במערך הזה אני יכול גם לדחוף סתם איזשהו אובייקט לא קשור בכלל.
לדוגמה, אני יכול לעשות אובייקט ולכתוב aaa שיעלה 22. מה זה aaa הזה? אף אחד לא יודע. אז מה שקורה זה שמערך הזה מוכן לקבל הכל, האובייקט הזה מוכן לקבל הכל ואני לא מעוניין בגמישות כזאת, אם תהיה לי גמישות כזאת בסופו של יום יהיו לי טעויות אנוש שיהיו בזמן ריצה של האתר אם אני אקשיח את התנאים ואני אעשה את זה רק אובייקט פרודקט מסוים שרק שדות
שלא יוכלו להיכנס פנימה כמו ב-C-Sharp אז אם יהיו לי טעויות הוא יעלה את זה כבר בזמן כתיבת התוכנה כבר בזמן תכנות בזמן design time הוא יעלה על הטעויות שלי למעשה אני רוצה לעשות קלאס כמו ב-C-Sharp רק באנגולר אוקיי אז אני אעשה פה Class Product אני אפילו אקרא לו באותו שם למעשה גם אנגולר וגם Web API
שתיהם סוג של MVC ואני רוצה שיהיה לי ב-MVC שלי תיקייה חדשה שנקראת Model Database אני עושה פה מודל מודל שזה למעשה מסד נתונים בדיוק כמו שזה קיים כאן מודל אתם רואים שזה סוג נתונים למעשה Database אני עושה אייטם חדש TypeScript אני מפעיל על עצמי קשיחות כדי למנוע מעצמי טעויות ואני אקרא לזה פרודקט עם פי גדול
את הקובץ אני אקרא עם פי קטן אבל לקלאס אני אקרא עם פי גדול קלאס פרודקט ופה אני אמלא את כל השדות רק אני רוצה לעשות לו אקספורט אחרת אני לא יכול להשתמש בו בקבצי ג'אווה סקריפט טייפ סקריפט אחרים עכשיו שימו לב אין לו שום קשר לאנגולר זה סתם משהו לעצמי אני עושה בואו נתחיל להעתיק שדות אני רוצה שדה פרודקט איי די שיהיה לי
בתוך הקלאס וזה יהיה מסוג number שימו לב בטייפ סקריפט בניגוד לג'אווה סקריפט אני מכריז על סוג משתנה ברגע שהכרזתי על סוג משתנה הוא גם יודע לעזור לי אני שם נקודה הוא ידע לעזור לי ולתת לי פונקציות נכונות שמתאימות לשדה עוד מעט נראה את זה בקוד נמשיך הלאה נעשה product name אני לוחץ ctrl tab ועובר בין השדות שיהיה מסוג string ברגע שאני עושה
אותו מסוג מסוים הוא הוא יודע לעזור לי ולא לתת לי לעשות טעות כבר בזמן כתיבת הקוד וגם האינטליסנס, העזרה החכמה הזאת עם הנקודה גם יודעת מה להציע לי.
עכשיו, אני לא חייב לעשות את זה. זאת אומרת, נניח מחיר. אני לא חייב להגיד שהמחיר הוא נניח נאמבר. אני יכול לעשות בלי שום דבר, ככה. ואז אני גם מכריז על משתנה, אבל אין לי את העזרה הזאת.
יוניטין סטוק זה כמות במלאי. אני יכול לעשות ככה נאמבר. מה ההבדל? עכשיו פה אני מקשיח את עצמי ואומר שהunits in stock כמות במלאי יכול להיות רק מספר ואז הוא כבר יעזור לי בזמן כתיבת הקוד ולא יתן לי להכניס לשם סטרינג הוא יעשה לי אדום מתחת וגם הוא יצא לי פונקציות שקשורות למספרים אם אני מכריז על משתנה ככה זה הוא לא יודע
מה אני רוצה הוא סתם אומר טוב שיהיה משתנה כל דבר תוכל להכניס בו זה גמישות יתר אני יכול גם לעשות גמישות יתר על ידי נקודתיים any שזה למעשה אותו דבר any זה כאילו לא כתבת פה כלום אתה אומר כל דבר יכול להיכנס פנימה אני לא מעוניין בגמישות כזאת כי אני הולך לעשות טעויות ואני רוצה לעלות על הטעויות בזמן כתיבת הקוד
product ID product name זה נקרא strong type strong type טיפוסים type חזקים מוקשחים יפה בינתיים זה יספיק לי אם אני ארצה עוד שדות אני אוסיף עכשיו אני חוזר חזרה לפרודקט ליסט קומפוננטה לקומפוננטה שלי והולך להשתמש בזה import from אני יוצא לרמה אחת למעלה יוצא עוד רמה אחת
למעלה הולך למודל והולך לפרודקט זה יצאתי לרמת כל הקומפוננטות מתוך הקומפוננטה שלי לכל הקומפוננטות זאת אומרת מרמה של רכיב נוכחי אני פה ברמת רכיב נוכחי קפצתי לרמת כל הקומפוננטות מתיקי הזאת עליתי לתיקי הזאת מתיקי הזאת קפצתי עוד פעם למעלה עליתי לרמת האפ כולו מתוך האפ כולו קפצתי לתוך המודל יופי
קונטרול רווח הוא מייבא לי פרודקט לוקח לו כמה שניות עכשיו שימו לב מה הולך להיות אני הולך להגיד לו ככה שפרודקט אחד זה לא סתם אובייקט מה שאתה רוצה תשים בו הוא מסוג פרודקט אתם רואים הוא מסוג פרודקט ברגע שעשיתי אותו מסוג פרודקט זה אני לא נראה לי שצריך הוא כותב לי תקשיב אתה לא יכול פה לשים מה שאתה רוצה אתם רואים
אין לו את השדה הנכון בגלל זה אנחנו הולכים לפרודקט ואומרים לו שעכשיו זה נקרא product name זה מכין אותי ללהביא נתונים מהשרת כי מהשרת יגיעו נתונים בדיוק עם השמות האלו והקוד שלי יהיה מוכן לקבל אותם ואני אוכל לעשות מיפוי יפה עושה סייב עכשיו אומר לי פרייס לא תקין בוא נראה את הפרייס יוניט פרייס הוא נקרא יופי נראה עכשיו בוא נעשה פה עוד פסיק
והוא משלים לי הוא אומר לי מה יכול להיות עוד באובייקט בוא נעשה לו product ID נקודתיים אחד פסיק שימו לב יש לו השלמה אוטומטית כמה יחידות במלאי עשר אוקיי זאת אומרת שעכשיו יש לו גם השלמה אוטומטית והוא יודע לעזור לי ברגע שהכרזתי לו על מוצר מסוים הוא יודע לתת לי עצות בוא נעשה אותו דבר עם מוצר מספר שתיים ועכשיו יהיה לנו אותו סיפור ושימו לב מה
הוא יכתוב לי הוא יכתוב לי שלא קיים דבר כזה בלה בלה בוא נראה מה קיים קיים או פרודקט איי-די או יוניצין סטוק יפה מאוד בואו נוסיף לו פרודקט איי-די נעשה נניח שזה מוצר מספר אה שימו לב קונטרול רווח משלים לי את מה שצריך נקודתיים שתיים והוא אומר לי שכחת לשים לי יוניצין סטוק נשים לו גם יוניסין סטוק 10 עכשיו אתם בטח
תשאלו אותי תגיד לי אני חייב למלא את כל השדות פה אם אני נניח לא רוצה עכשיו לציין כמה יחידות יש במלאי רוצה לעשות אובייקט שלא ידוע כמה יחידות יש במלאי האם השדה הזה הוא חובה אז זה נראה כאילו שזה השדה הזה חובה והוא כותב שחסר לי המלאי והוא לא מצליח להפוך את האובייקט הזה לפרודקט אני יכול לאלץ אותו אני יכול
להגיד לו תקשיב תיקח את האובייקט הזה ובכוח תעשה לו קאסטינג בכוח תהפוך אותו לפרודקט כמו שעושים קאסטינג המרה ב-C-Sharp ככה גם וב-Java ככה גם אפשר לעשות המרה בטייפ סקריפט ועושים את זה על ידי סוגריים שימו לב כאלו לא סוגריים מעוגלות אלא סוגריים כאלו משולשות לפני שם של האובייקט ואז למעשה אני מאלץ את האובייקט הזה להיות מסוג פרודקט ואז ברגע
שהוא מסוג פרודקט אין בעיה להכניס אותו למשהו שצהרתי עליו שיהיה מסוג פרודקט שימו לב איך עובד המחשב הוא לוקח כל מה שמימין לסימן שווה מטפל בו את התוצאה של הטיפול מכניס לצד שמאל מה בצד ימין כתוב לעשות אובייקט חדש ואחרי