TypeScript

מה זה TypeScript ולמה

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

הבעיה ש-TypeScript פותרת

// JavaScript: נראה תקין, נשבר רק בזמן ריצה
function getTotal(cart) {
    return cart.items.reduce((sum, item) => sum + item.price, 0);
}

getTotal({ itmes: [] });   // שגיאת כתיב: TypeError כשהמשתמש כבר בדף

// TypeScript: השגיאה מסומנת בעורך, עוד לפני ששמרתם
type Cart = { items: { price: number }[] };

function getTotal(cart: Cart): number {
    return cart.items.reduce((sum, item) => sum + item.price, 0);
}

getTotal({ itmes: [] });
//         ~~~~~ Object literal may only specify known properties.
//               Did you mean to write 'items'?

קצת היסטוריה

היום רוב משרות ה-Frontend וה-Backend ב-JavaScript מצפות לידע ב-TypeScript, וכמעט כל ספרייה פופולרית מגיעה עם הגדרות טיפוסים.

איך זה עובד

דפדפנים ו-Node.js מריצים JavaScript, לא TypeScript. לכן יש שני שלבים נפרדים:

1. בדיקת טיפוסים - המהדר (tsc) בודק שהקוד עקבי, ומדווח על שגיאות.
2. הסרת טיפוסים - כל ההצהרות נמחקות, ונשאר JavaScript רגיל שרץ בכל מקום.

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

מה מקבלים

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

ומה המחיר

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

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

מה צריך לדעת לפני

הקורס מניח שאתם מכירים JavaScript: משתנים, פונקציות, מערכים, אובייקטים ו-async/await. אם לא, התחילו בקורס JavaScript. TypeScript לא מחליפה את JavaScript, היא נבנית עליה.