Website Icon

מהי TypeScript? יתרונות מרכזיים ודוגמאות מעשיות

Image that shows TypeScript logo.

מה זו TypeScript?

TypeScript היא שפת תכנות שפותחה ומתוחזקת על ידי מיקרוסופט (Microsoft). אתם יכולים לחשוב על TypeScript כאל הגרסה המשופרת של JavaScript, שזה אומר שהיא כוללת את כל התכונות של JavaScript ומוסיפה עוד משלה. במילים אחרות, TypeScript מכילה את JavaScript אבל JavaScript לא מכילה את TypeScript. התוספת העיקרית ש-TypeScript מביאה היא טיפוסים סטטיים (static typing).

מה זה Static Typing?

בעצם, static typing מתייחס לשפות תכנות כמו #TypeScript, C ועוד, שבהן יש לציין את ה-type, כלומר (number, string וכדומה) של משתנים, פרמטרים של פונקציה ועוד. בואו נראה דוגמה ב-TypeScript:

An image illustrating the key differences between JavaScript and TypeScript code.

מה שאנחנו רואים בתמונה למעלה זה השוואה בין קוד JavaScript לבין TypeScript. בחלק העליון, אנחנו מגדירים בעזרת JavaScript משתנה בשם `age` עם הערך המספרי 25, ולכן `age` נחשב למספר. אבל לאחר מכן, אנחנו משנים את ה-type שלו ל-string כשאנחנו מבצעים השוואה לערך "thirty". מה שאנחנו מבינים זה ש-JavaScript מספקת לנו גמישות מסוימת ביכולת לשנות את ה-type, אבל יחד עם זאת גם סכנות וחוסר סדר. כלומר עצם העבודה שאנחנו יכולים לשנות ככה את ה-type של age, פותח דלתות לחוסר עקביות וסדר מה שיגרום כנראה לבאגים.

בחלק התחתון, אנחנו עושים בדיוק את אותו הדבר, כלומר מגדירים הפעם בעזרת TypeScript משתנה `age` עם הערך המספרי 25, אבל תשימו לב שהפעם אני מצהיר כי המשתנה בשם `age` צריך להיות number, ולכן, כשאנחנו מנסים להשוות את `age` לערך אחר שהוא לא number כמו string, מופיעה לנו שגיאה. בעזרת TypeScript, אנחנו שומרים על סדר הקוד שלנו על ידי הצהרת ה-types.

בואו נראה דוגמה נוספת:

An image illustrating the key differences between JavaScript and TypeScript code.

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

אם אני אשאל אתכם מה ה-type של שני הפרמטרים `a` ו-`b`, אתם תוכלו לענות לי?האם הם מ-type של number או string? אנחנו לא יודעים את ה-type שלהם בצורה ישרה. וכאן יכול להיווצר בלבול ובאגים. שימו לב שאנחנו קוראים לפונקציה `add` ומעבירים לה את שני הפרמטרים גם כאל numebr וגם כאל string והתשובות שאנחנו מקבלים מהן שונות, גם ב-type! תשובה אחת מחזירה number, בעוד שתשובה אחרת מחזירה string, וכאן הבלבול! מה הייתה הכוונה של הפונקציה `add`? לחבר בין שני מספרים או טקסט?

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

אבל בחלק התחתון, בעזרת TypeScript, אנחנו ממש יכולים להגדיר את ה-types שיהיו לפרמטרים של הפונקציה `add`. שימו לב שאנחנו מגדירים גם את `a` וגם את `b` כאל number. זה אומר שהפונקציה `add` צריכה לקבל שני פרמטרים שהם מספרים. ושימו לב שבשורה 17 אני מעביר מספרים והכל טוב, אבל בשורה 19 אני מקבל error כי אני מנסה להעביר לפונקציה `add` שני ערכים מסוג string. כלומר בעזרת TypeScript אנחנו יכולים לשמור ולהצהיר על הכוונות שלנו, מה שיגרום לסדר ובטיחות הקוד.

אז למה כדי לנו להשתמש ב-TypeScript?

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

  • שיפור איכות הקוד

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

  • תרגום TypeScript ל-JavaScript

    שפת התכנות TypeScript אינה נתמכת ישירות על ידי דפדפנים או סביבות הרצה כמו Node.js. לכן, TypeScript מציעה compiler שמתרגם את קוד ה-TypeScript ל-JavaScript, מה שמאפשר שימוש בקוד בכל סביבה שתומכת ב-JavaScript.