מהו קובץ TSX?

סיומת הקובץ “.tsx” משויכת בדרך כלל לקבצי TypeScript המכילים קוד React. TypeScript היא ערכת-על של JavaScript שמוסיפה הקלדה סטטית לשפה, ו-React היא ספריית JavaScript לבניית ממשקי משתמש. כאשר עובדים עם React ו-TypeScript ביחד, מפתחים משתמשים לעתים קרובות בסיומת “.tsx” עבור הקבצים שלהם כדי לציין שהם מכילים גם TypeScript וגם JSX (סיומת התחביר של React עבור JavaScript).

דוגמה לקובץ TSX

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

// דוגמה: קוד TypeScript ברכיב React
ממשק MyComponentProps {
   שם: מחרוזת;
   גיל: מספר;
}
const MyComponent: React.FC<MyComponentProps> = ({ שם, גיל }) => {
   // לוגיקה של רכיבים כאן
   return <div>{name} הוא בן {age}.</div>;
};

JSX (הרחבת תחביר תגובה)

JSX היא הרחבת תחביר עבור JavaScript המומלצת על ידי React. זה נראה דומה ל-XML/HTML ומשמש לתיאור איך ממשק המשתמש צריך להיראות.

// דוגמה: JSX ברכיב React
const MyComponent: React.FC<MyComponentProps> = ({ שם, גיל }) => {
   return <div>{name} הוא בן {age}.</div>;
};

הקובץ “.tsx” יכיל בדרך כלל את ההגדרה של רכיב React באמצעות רכיבים פונקציונליים או רכיבי מחלקה.

// דוגמה: הגדרת רכיב תגובה בקובץ ".tsx".
const MyComponent: React.FC = () => {
   החזר <div>שלום, תגיב!</div>;
};

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

// דוגמה: ייבוא הצהרות בקובץ ".tsx".
ייבוא תגובה מ-'react';

איך פותחים קובץ TSX?

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