לאחרונה פרויקט ג׳סט של פייסבוק הודיעו על כוונה לעבור מ Flow ל TypeScript. יחד עם השיכתוב של Vue ל TS ואנגולר שכבר כתובה בזה, אני חושב שיש פה מספיק סימנים כדי להשתכנע ש TypeScript איתנו כדי להישאר.

בשביל להתיידד עם השפה בואו נראה דוגמת קוד קטנה ונדבר על ההבדלים בינה לבין JavaScript רגיל.

1. המשחק - תפוס ת'אדום

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

בשביל שיהיה קצת קוד במימוש חשבתי לחלק את המשחק לשני קבצים, האחד עבור הלוגיקה של המשחק עצמו והשני עבור כל האינטרקציה עם ה DOM. כך הייתי כותב את הלוגיקה של המשחק ב JavaScript:

import _ from 'lodash';

export default class Game {

    constructor(size = 9) {
        this.size = size;
        this.shuffle(); 
    }

    click(idx) {
        if (this.winnerIndex === idx) {
            this.score += 10;
        } else {
            this.score -= 5;
        }
        this.shuffle();
    }

    shuffle() {
        this.winnerIndex = _.random(this.size - 1);
    }
}

המעבר ל TypeScript משנה מעט מאוד את הקוד:

import _ from 'lodash';

export default class Game {
    size: number;
    winnerIndex: number;
    score: number = 0;

    constructor(size: number = 9) {
        this.size = size;
        this.shuffle(); 
    }

    click(idx: number) {
        if (this.winnerIndex === idx) {
            this.score += 10;
        } else {
            this.score -= 5;
        }
        this.shuffle();
    }

    shuffle() {
        this.winnerIndex = _.random(this.size - 1);
    }
}

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

$('.square', $el).on('click', function(ev) {
    ev.preventDefault();
    const idx = ev.target.dataset.index;

    // ERROR - idx should be a number
    g.click(idx);

    repaint($el, g);
});

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

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

ביום חמישי אעביר וובינר על TypeScript בו אדגים על מכונת Windows את התקנת כל הכלים, איך משלבים TS בפרויקט Webpack קיים וכמובן נכתוב מספר תוכניות דוגמא כדי לראות את הטעויות שה IDE מזהה. אני חושב שזאת הזדמנות טובה לעלות על הרכבת. הרשמה לוובינר בקישור:

https://www.tocode.co.il/workshops/63

ואגב את המשחק RedSpotter המלא ב TypeScript אתם יכולים למצוא בגיטהאב שלי בקישור:

https://github.com/ynonp/redspotter-typescript