אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » מדריכים » טייפסקריפט » טייפסקריפט בריאקט

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

רן בר-זיק אוגוסט 14, 2022 7:07 am תגובה אחת

איך משתמשים בטייפסקריפט בעולם האמיתי עם ריאקט?

במאמרים הקודמים בסדרה למדנו על טייפסקריפט בקלאסים והגענו לנקודה שאנו יודעים כבר טייפסקריפט טוב. אבל הלמידה היתה בעיקר עם 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. אתר עזר שממש מראה עם דוגמאות איך עובדים עם טייפסקריפט שבאמת היה צמוד אלי לא מעט מהפעמים.

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

למאמר הקודם בסדרת המדריכים על טייפסקריפטטייפסקריפט: קלאסים
למאמר הבא בסדרת המדריכים על טייפסקריפטמודולים בטייפסקריפט
סדרת המדריכים על טייפסקריפט
Typescript

תגובה אחת

  1. עמית הגב ספטמבר 12, 2022 בשעה 9:33 am

    מה הכלל אצבע שלך לגבי שימוש בטייפ לעומת אינטרפייס?

השארת תגובה

ביטול

ללמוד ג'אווהסקריפט בעברית

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-2000 תומכים - בואו ללמוד עכשיו איך לתכנת.

רשימת הנושאים
  • מדריכים
    • ריאקט
    • טייפסקריפט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

    עקבו אחרי בטוויטר

    בחשבון הטוויטר שלי אני מפרסם עדכונים מהירים על חדשות בתחום התכנות והיזמות, התרעות על מצבי חירום ורכילות בוערת על תחום הווב.
    מה זה טוויטר?
  • facebook like image

    ערוץ הטלגרם של אינטרנט ישראל

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

    הפרויקטים שלי בגיטהאב

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

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

גלילה לראש העמוד