TypeScript - חלק ד': איך כותבים Enum

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

TypeScript מאפשר לנו לחייב את המשתמש לבחור רק מתוך הערכים שאנו מאפשרים ב-Enum ובכך לוודא שהוא לא מכניס ערכים שחורגים ממה שאנחנו מצפים לקבל. [עוד]

תגיות:

TypeScript - חלק ג': הגדרת Interface

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

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

מכיוון ש-JavaScript היא שפה דינמית אין בה את האפשרות ל-Interface כמשהו מחייב כמו בשפות אחרות (כמו ב- C Sharp למשל) ולכן ההוספה של Interface ל-TypeScript יכולה לעזור לנו בצורה משמעותית כאשר נרצה להשתמש בכך. [עוד]

תגיות:

TypeScript - חלק ב': איך כותבים Class

TypeScript הופך את כתיבת ה-Class להרבה יותר נוח לכתיבה ובטוח לשימוש בהשוואה ל-JavaScript, מכיוון שהוא מאפשר לנו לכתוב בצורה שיותר מוכרת לנו משפות תכנות אחרות כולל בנאים ומאפיינים ובנוסף הוא מוודא שכל שימוש ב-Class נעשה בצורה נכונה: שסוג המשתנים מתאים למה שהגדרנו ודרשנו מהלקוחות של ה-Class שבנינו, שלא יוצרים Class ללא השדות שהם חובה וכו'. [עוד]

תגיות:

TypeScript - חלק א': הקדמה וסוגי משתנים

TypeScript היא שפה תכנות שפותחה על ידי Microsoft ובעצם היא מספקת לנו דרך חדשה לכתוב JavaScript.   מה רע ב JavaScript? למה אנחנו צריכים TypeScript? הבעיה עם JavaScript היום היא שאפשר לרשום איתו פחות או יותר הכל אך אין שום דבר שיוודא שהכל עובד בצורה תקינה, למשל, אין סוגי משתנים ולכן כיום ב-JavaScript ניתן להעביר לפונקציה איזה סוג של משתנה שנרצה למרות שהפונקציה מצפה לקבל רק מחרוזות או רק מערכים ואם אתם נכנסים לקוד של מישהו אחר זה כמעט בלתי אפשרי להבין מה הפונקצית מצפות לקבל ולכן עלולים לא להבין נכון מה הפונקציה אמורה לעשות. ב-JavaScript גם קל מאד להגיע למצב של קוד ספגטי ובלאגן בקוד שלא מאפשר שימוש חוזר בקוד ויוצר הרבה חוסר סדר, TypeScript עוזר לנו לשמור יותר על הקוד מסודר. שימו לב ש-TypeScript הוא בעצם קוד של JavaScript עם תוספות, מה שאומר שעל מנת לשדרג את הקוד הקיים שלכם אתם יכולים להעתיק את הקוד JavaScript לקובץ TypeScript ולעדכן אותו בחלקים ולא בפעם אחת.  בנוסף היא מקמפלת את קובץ ה-TypeScript, כך שבמידה ויש בעיה בקוד שנכתב נקבל שגיאות כבר בשלב הקומפילציה וכך ניתקל בפחות בבעיות בסביבת ה- production. לאחר קימפול נקבל קובץ JavaScript רגיל.     כלים לכתיבה של TypeScript Visual Studio 2013 החל מ Update 2 או עם התקנה של תוסף. Visual Studio 2015 בא עם קומפיילר של TypeScript אוטומטית. ניתן גם לכתוב באינטרנט באתר של TypeScript בחלק של ה-Playground     הגדרת סוגי משתנים ב- TypeScript בדוגמא הבאה נגדיר משתנה בשם x ונאתחל אותו בנתונים: var x: string; x = 5; //Error x = 'my str'; //OK בשורה הראשונה הגדרנו את המשתנה x ולאחר שמו רשמנו נקודתיים את סוג המשתנה (string). כעת ברגע שנגדיר למשתנה x את הערך 5, שהוא מספר, השורה תסומן באדום בעורך התוכן ונקבל שגיאה כאשר נקמפל את הפרוייקט: Type 'number' is not assignable to type 'string'     הגדרת סוג פרמטר לפונקציה ב- TypeScript בדוגמא הבאה נכתוב פונקציה בשם functionString שמקבלת משתנה בשם p והוא צריך להיות מסוג string. function functionString(p: string) { alert(p); } functionString('my str'); //OK functionString(1); //ERROR   גם פה ניתן לראות שהשוורה הראשונה היא תקינה כי היא מעבירה לפונקציה מחרוזת, אך השורה השניה לא תקינה מכיוון והיא מעבירה לפונקציה מספר ולכן בדוגמא זו נקבל בקימפול הפרוייקט את השגיאה הבאה: Argument of type 'number' is not assignable to parameter of type 'string'.     הגדרת סוג פרמטר מסוג מערך לפונקציה ב- TypeScript בדוגמא הבאה, נגדיר את הפרנטר כמערך של מחרוזות.  function functionArray (arr: string[]) { } functionArray(['tet', 'sdasa']); //OK functionArray([1, 3]); //ERROR functionArray('das'); //ERROR האפשרות הראשונות עוברת בצורה תקינה, אך האפשרות השניה נכשלת מכיוון שזה אינו מערך של מחרוזות אלה של מספרים ונקבל את השגיאה הבאה: Argument of type 'number[]' is not assignable to parameter of type 'string[]'. Type 'number' is not assignable to type 'string'. האפשרות השלישית תיכשל, כי למרות שאנו מעבירים מחרוזת, זה לא מערך ולכן גם במקרה זה נקבל שגיאה: Argument of type 'string' is not assignable to parameter of type 'string[]'. Property 'push' is missing in type 'String'.       הגדרת סוג פרמטר מסוג פונקציה לפונקציה ב- TypeScript ב-JavaScript אפשר להעביר לפונקציה בפרמטר פונקציה אחרת, וגם פה TypeScript מאפשר לנו להגדיר איזה סוג של פונקציה אנחנו מוכנים לקבל כפרמטר. function myFunction(func:(string)=>number){ func("1"); } function ParseToNumber(str:string){ return parseInt(str); } myFunction(ParseToNumber); יש לנו בדוגמא 2 פונקציות, ParseToNumber שמקבלת מחרוזת ומתרגמת אותו למספר, ופונקציה נוספת בשם myFunction שתפקידה הוא להריץ את הפונקציה שהיא מקבלת כפרמטר. לפונקציה myFunction יש פרמטר בשם func, אחריו יש נקודתיים ובסוגריים מוגדר סוג הערך שהוא מקבל (string) ולאחר מכן<= וסוג הערך שהפונקציה מחזירה (number).      

תגיות:

הפונקציה replace ב- Javascript מחליפה רק את המופע הראשון

כאשר ניסיתי לעשות החלפה של טקסט ב-Javascript נתקלתי בתופעה מענייינת, הטקסט המוחלף היה רק המופע הראשון שרציתי להחליף.
במאמר זה אסביר איך לפתור את הבעיה הזאת [עוד]

מערכים ב-JavaScript - פונקציות לעדכון, עריכה ומחיקה

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

תגיות:

מערכים ב JavaScript - יצירה ואתחול של מערך

מדריך על יצירה של מערך ב-JavaScript, איך ליצור מערך בדרכים שונות ומה ההבדלים ביניהם [עוד]

תגיות:

העברת מספר ארגומנטים דינמי לפונקציות Javascript

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

תגיות:

שמירת נתונים בצד הלקוח ב- HTML5

בעבר כאשר היינו רוצים לשמור נתונים בצד של המשתמש היינו משתמשים ב-cookie.

ב-HTML 5 הוסיפו לנו 2 אפשרויות נוספות שמוסיפות לנו כוח נוסף מבחינה תכנותית: localStorage ו- sessionStorage.

במאמר זה אסביר עליהם, על ההבדלים ביניהם, אתן דוגמאות איך משתמשים בהם, על ההבדלים בין כל אחד מהם לשימוש ב-cookie ואיך הם עוזרים לנו. [עוד]

תגיות:

איך מגדירים Class ב- JavaScript

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

ב- JavaScript אין אפשרות לבנות Class בצורה פשוטה ולכן נעשו מספר "מעקפים" על מנת ליישם קלאסים. בפוסט זה אדגים ואסביר את השיטה המועדפת עלי לבניה של Class ב-JavaScript. [עוד]

תגיות: