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

1. היא תשמור עליכם מטעויות טפשיות, ורוב הזמן לא תפריע לעבוד

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

דוגמא טיפוסית לקומפוננטת TypeScript נראית כך:

import React, { useState } from "react";

export default function Person(props: {
    name: string,
    age: number
}) {
    const { name, age } = props;
    const canVote = age >= 18 ? "can" : "can't";

    return (
        <div>
            <p>Hi! my name is {name} and I {canVote} vote</p>
        </div>
    )
}

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

function App() {
    return (
        <>
            <Person age="18" name="bob" />
        </>
    )
}

2. השלמות אוטומטיות יעבדו הרבה יותר טוב

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

ב TypeScript הבעיה הזאת כבר לא קורית: בזכות קבצי ההגדרות שמכסים כל היבט של שפת JavaScript, מאוד קל ל IDE לדעת בדיוק איזה שדות יש או אין לך על האוביקט ומה מותר לעשות איתם. אחרי המעבר ל TypeScript לא נצטרך יותר להתלבט אם לפונקציה שבודקת אם מחרוזת נמצאת בתוך מחרוזת אחרת קוראים includes או contains, או מה החתימה של useRef. הכל כבר קיים בתוך השפה.

3. תוכלו ליהנות מתחביר חדש שעדיין לא הגיע ל JavaScript

אחרי המעבר ל TypeScript תוכלו ליהנות מאופרטור Optional Chaining שיחסוך לכם לבדוק כל פעם אם משהו הוא Null:

let x = foo?.bar.baz();

שזה בדיוק כמו לכתוב:

let x = (foo === null || foo === undefined) ?
    undefined :
    foo.bar.baz();

מאופרטור ה nullish coalescing שמתנהג ממש כמו || אבל בודק null במקום false, כך בשורה הבאה:

let x = foo ?? bar();

אם foo הוא null או undefined ניקח את הערך של bar, אבל אם foo הוא סתם false נשתמש בו. זו גירסא מתוחכמת יותר של || המאפשרת הגדרת ערכי ברירת מחדל למשתנים בוליאנים.

רוצים ללמוד עוד על TypeScript ו React ואיך הן עובדות יחד? ביום חמישי הקרוב אעביר כאן וובינר בנושא עם המון דוגמאות, תבניות נפוצות, בעיות שאתם עשויים להיתקל בהן ודרכי התמודדות. מוזמנים להצטרף בחינם בקישור: https://www.tocode.co.il/workshops/93.