javascript - האם יש חסרונות בשימוש ב-.tsx במקום ב-.ts כל הזמן ב-TypeScript?

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

האם יש סיבה או מצב מסוים שבגללו לא נשתמש בקבצי .tsx? אם לא, למה צוות TypeScript הוסיף סיומת חדשה לגמרי?

תשובה #1

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

הצהרות טיפוס עם <> לא פועלות מכיוון שזה הסימן עבור תג jsx.

ל-TypeScript יש שתי תחביריות להצהרות טיפוס. שתיהן עושות בדיוק את אותו הדבר אבל אחת ניתנת לשימוש ב-tsx והשנייה לא:

let a: any;
let s = a as string // ok in tsx and ts
let s2 = <string>a // only valid in ts

אני הייתי משתמש ב-as במקום <> גם בקבצי ts למען עקביות. as הוצג למעשה ב-TypeScript מפני ש-<> לא היה ניתן לשימוש ב-tsx.

פונקציות חץ גנריות ללא הגבלה אינן מנותחות כראוי

פונקציית החץ למטה בסדר ב-ts אך גורמת לשגיאה ב-tsx כיוון ש-<T> מתפרש כתחילת תג ב-tsx:

 const fn = <T>(a: T) => a

אתה יכול לעקוף זאת או על ידי הוספת מגבלה או על ידי אי שימוש בפונקציית חץ:

 const fn = <T extends any>(a: T) => a
 const fn = <T,>(a: T) => a // this also works but looks weird IMO
 const fn = function<T>(a: T) { return a;}

הערה

בעוד שאתה יכול להשתמש ב-tsx במקום ב-ts, אני ממליץ נגד זה. מסורת היא דבר חזק, אנשים מקשרים את tsx עם jsx וככל הנראה יתפלאו שאין לך שום תגי jsx, עדיף לשמור על הפתעות למפתחים למינימום.

בעוד שהאי-בהירויות שלמעלה (אף על פי שסביר שלא מדובר ברשימה מלאה) אינן גדולות, הן כנראה שיחקו תפקיד גדול בהחלטה להשתמש בתוסף קובץ ייעודי לסינטקס החדש כדי לשמור על קבצי ts תואמים לאחור.

תשובה #2

זה סוג של קונבנציה להשתמש ב-x בסוף כאשר ה-JavaScript שלך במצב JSX Harmony. כלומר, כאשר זה חוקי:

doSomething(<div>My div</div>);

עם זאת, סיומת הקובץ שלך אינה באמת חשובה, כל עוד המעבדים המקדימים שלך מודעים להחלטתך (browserify או webpack). אני, אישית, משתמש ב-.js לכל קודי ה-JavaScript שלי, גם כאשר הם React. אותו הדבר חל על TypeScript, ts/tsx.

ערוך

עכשיו, אני ממליץ בחום להשתמש ב-JSX עבור JavaScript עם תחביר React וב-TSX עבור TypeScript עם React מכיוון שרוב העורכים/IDE ישתמשו בהרחבה כדי לאפשר או לא לאפשר את תחביר ה-React. זה גם נחשב לביטוי יותר עשיר.