PracticU

סוגי משתנים ב-TypeScript

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

סוגי משתנים ב-TypeScript
בהרצאה מכירים את הדרכים להגדיר משתנים ב-TypeScript ואת היתרון המרכזי של השפה על פני JavaScript: טיפוס נתונים שנבדק כבר בזמן הכתיבה.
איך מגדירים טיפוס למשתנה
1. הגדרה עם טיפוס: כותבים למשתנה טיפוס, למשל age: number, ומכניסים אליו מספר. ניסיון להכניס מחרוזת, כמו age = "hello", מציג שגיאה גם בעורך וגם בחלון ה-Problems, עם ההודעה שמחרוזת אינה ניתנת להשמה לטיפוס number.
2. הגדרה ואתחול בשורה אחת: אפשר לכתוב let age: number = 20. ההתנהגות זהה, והשגיאה מופיעה כשמנסים לשנות לערך מטיפוס אחר.
3. הסקת טיפוס אוטומטית: אם כותבים רק let age = 20 בלי טיפוס, TypeScript מבינה שהמשתנה הוא מסוג number וגם אז לא מאשרת השמה של מחרוזת. בגרסאות מוקדמות של השפה זה לא היה כך.
4. הטיפוס any: משתנה מסוג any מקבל כל ערך, כמו ב-JavaScript. משתנה שהוגדר בלי טיפוס ובלי אתחול מתנהג בדיוק כך, ולכן אין בו שגיאות.
5. Union Types: אפשר להגדיר משתנה כ-number | string, והוא יקבל רק את הטיפוסים האלה. השמה של true (בוליאני) תיכשל, אלא אם מוסיפים גם boolean לרשימה. בפועל משתמשים בכך לעיתים רחוקות, בדרך כלל עם שני טיפוסים לכל היותר.
שימו לב
- בעורך שבו הדגים המרצה השגיאה מופיעה ב-Problems, כי הוא עבד עם הקומפיילר ב-watch mode (tsc -w) ועם Live Server. בעבודה עם React או Angular ההודעות יופיעו בסביבת הפיתוח.
- כמעט תמיד כדאי להימנע מ-any ומהשארת משתנה בלי טיפוס, כי כך חוזרים בפועל ל-JavaScript ומאבדים את הסיבה לעבוד עם TypeScript. המטרה היא Strongly Typed: רק הטיפוס שהוגדר נכנס למשתנה.
אחרי ההרצאה אפשר להגדיר משתנה עם טיפוס מפורש, להסתמך על הסקת הטיפוס, ולהחליט מתי Union Type מתאים.
השיעור הבא בקורס: סוגי אובייקטים ב-TypeScript

פרקי ההרצאה: סוגי משתנים ב-TypeScript

  1. 00:00

    הגדרת משתנה מטיפוס number והרצה

  2. 01:17

    שגיאה בהשמת טיפוס שגוי

  3. 02:33

    הגדרה ואתחול באותה שורה

  4. 03:14

    הסקת טיפוס מאתחול מיידי

  5. 04:11

    הטיפוס any

תמלול ההרצאה: סוגי משתנים ב-TypeScript

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

  1. 00:02

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

  2. 00:17

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

  3. 00:31

    עכשיו אני בא ואני יכול להכניס מספר בואו ננסה רגע בואו ננסה להדפיס אותו קודם כל דוקיומנט רייט ו-age באמת נדפיס אותו עם interpolation נראה לי יותר פשוט כי אני מיד רוצה לרדת שורה אחריו ויש לי פה את ה-age בואו רגע נריץ open with live server וכמובן שכחתי

  4. 01:00

    להריץ את הקומפיילר rtsc-wgo והנה יש לנו פה את ה-h הכל בסדר עכשיו מה שמעניין אותי לעשות זה מה קורה אם אני בא ל-h ואני אומר h שווה הלואו בעצם שימו לב מה המערכת נותנת לי נותנת לי שגיאה על הדבר הזה היא אומרת לי לא יש לך פה שגיאה ואני יכול לראות אותה גם כאן יש לי פה error h שווה הלואו אתם רואים את השגיאה פה ב-problems

  5. 01:35

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

  6. 02:04

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

  7. 02:30

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

  8. 02:48

    בואו ננסה להציג אותו ובואו ננסה לשנות אותו h שווה הלו שימו לב כבר אני רואה פה שגיאה ואני רואה פה שגיאה וברגע שכלומר כל מה שעשינו כאן זה איחדנו את שתי השורות האלה יש לנו פה את חול באותה השורה זה בסדר.

  9. 03:11

    וגם כן arrow אז הכל עובד כמו שצריך אבל משהו מעניין נוסף שכדאי לראות זה מה קורה כאשר אנחנו לא מגדירים נקודותיים number אלא פשוט let h שווה 20 האם טייפ סקריפט תדע שהדבר הזה זה number אז למעשה ברגע שהתחלנו אותו מגרסה מסוימת של טייפ סקריפט היא יודעת שהדבר הזה המשתנה הזה הוא מהסוג

  10. 03:47

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

  11. 04:06

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

  12. 04:27

    Any זה אומר, כמו JavaScript, אין לו טיפוס, מותר לך להכניס הכל אליו. בואו נכניס לניקניים 20, ובואו נדפיס אותו קודם כל פה, ואני אומר שהניקניים שלי הוא מה שיש במשתנה ניקניים, וכמובן שהוא יהיה 20.

  13. 04:52

    בואו נסתכל רגע על הדף, ניקניים 20, הכל בסדר,

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

ההרצאה הקודמת: יצירת פרויקט ב-TypeScript

ההרצאה הבאה: סוגי אובייקטים ב-TypeScript

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

  • סוגי משתנים
  • Typescript
  • משתנים
  • משתנים - חלק 1

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

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