טייפסקריפט בריאקט

במאמרים הקודמים בסדרה למדנו על טייפסקריפט בקלאסים והגענו לנקודה שאנו יודעים כבר טייפסקריפט טוב. אבל הלמידה היתה בעיקר עם tsc ועם ג'אווהסקריפט בלבד – אבל רובנו לא נכתוב ג'אווהסקריפט נקי אלא נכתוב בריאקט או ב-Node.js. בפוסט הזה אני מסביר על טייפסקריפט בריאקט.

כמעט כל הפריימוורקים והספריות תומכות בטייפסקריפט ממש מהקופסה. מ-Create React App ועד ל-Next.js. כשמייצרים פרויקט Create React App, פשוט צריך להוסיף template typescript– לפקודת ההרצה והפרויקט מיוצר עם טייפסקריפט. אם תחפשו את tsc בפרויקט, לא תמצאו אותו כיוון שמי שאחראי להמרה היא Babel, תוכנה שמשולבת עם וובפאק ורצה גם בתהליך הבילד אבל גם בתהליך ההרצה המקומית.

אם יש לכם כבר פרויקט ב-Create React App ואתם רוצים להמיר אותו לטייפסקריפט – אפשר בקלות באמצעות כמה פקודות בודדות שמופיעות בדוקומנטציה. ובדיוק כמו ב-Create React App – כך גם בפרויקטים אחרים. צריך לזכור שכל מה שהוא עם סיומת js לא מטופל על ידי Babel ויכול להשאר "כרגיל" עד שתמירו אותו. טייפסקריפט מופעל על קבצי ts ו-tsx בלבד.

אז איך זה נראה? ראשית אם יש לנו סרוויסים או דברים בג'אווהסקריפט רגיל, אין פה שינוי. מדובר בקבצי ts רגילים לכל דבר ועניין. למשל ב-Create React App יש לנו את ReportWebVitals.ts. זו לא קומפוננטה של ריאקט אלא קובץ רגיל של טייפסקריפט. מה שטוב ב-Create React App הוא שכל קובץ של ts כבר מטופל על ידי Babel והתשתית של Create React App ואני לא צריך לשבור את הראש על הגדרות של tsc.

import { ReportHandler } from 'web-vitals';

const reportWebVitals = (onPerfEntry?: ReportHandler) => {
  if (onPerfEntry && onPerfEntry instanceof Function) {
    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
      getCLS(onPerfEntry);
      getFID(onPerfEntry);
      getFCP(onPerfEntry);
      getLCP(onPerfEntry);
      getTTFB(onPerfEntry);
    });
  }
};

export default reportWebVitals;

קומפוננטות שברגיל הן כתובות ב-jsx יהיו עכשיו ב-tsx. בואו ונדגים עם קומפוננטה הכי פשוטה שיש. בגדול זו פונקציה שבה אנו מגדירים את הפלט. מה הפלט של הפונקציה? אם מדובר בפונקציה פשוטה אז זה JSX.Element.

const DisplaySimpleText = ():JSX.Element => {
    return <div>Hello</div>
}

export default DisplaySimpleText;

מה זה האינטרפייס הזה? JSX נתמך מהקופסה בטייפסקריפט ויש באמת הסבר נאה בדוקומנטציה. חשוב לציין שיש אינטרפייס נוסף מסוג React.FC שאני פחות משתמש בו כי הקונצנזוס הוא שהוא הרבה פחות נוח ושימושי.

אם יש לי פונקציה עם תכונות למשל, אני עושה טייפינג לתכונות כך:

type AppProps = {
    text: string;
  };

const DisplaySimpleText = ({text}:AppProps):JSX.Element => {
    return <div>{text}</div>
}

export default DisplaySimpleText;

אם יש לי תכונות כברירת מחדל, זה יראה כך:

type AppProps = {
    text?: string;
  };

const DisplaySimpleText = ({text = 'hello'}:AppProps):JSX.Element => {
    return <div>{text}</div>
}

export default DisplaySimpleText;

בגדול אין פה משהו שמאוד יפתיע אתכם. אחד מהכלים החזקים ביותר שאני משתמש בהם כשאני כותב קומפוננטות ריאקט בטייפסקריפט הוא React TypeScript cheat sheet. אתר עזר שממש מראה עם דוגמאות איך עובדים עם טייפסקריפט שבאמת היה צמוד אלי לא מעט מהפעמים.

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