TSX (TypeScript XML — React)

TSX รวมระบบชนิดข้อมูลสถิตของ TypeScript เข้ากับไวยากรณ์ JSX สำหรับคอมโพเนนต์ React เป็นนามสกุลไฟล์มาตรฐานสำหรับคอมโพเนนต์ React ที่มีชนิดข้อมูลอย่างเข้มงวด

ประเภท MIME

text/tsx

ประเภท

ข้อความ

การบีบอัด

ไม่สูญเสียคุณภาพ

ข้อดี

• + Type-safe React components with prop validation at compile time
• + Excellent IDE autocomplete for props and event handlers
• + Catches common React bugs before runtime

ข้อเสีย

• − Requires TypeScript compiler configuration
• − Generic component syntax can conflict with JSX angle brackets
• − More boilerplate than plain JSX for simple components

เมื่อใดควรใช้ .TSX

ใช้ TSX สำหรับคอมโพเนนต์ React ทั้งหมดในโปรเจกต์ TypeScript — ให้ความปลอดภัยของชนิดข้อมูลสำหรับ props, state, context และ hooks

รายละเอียดทางเทคนิค

ไฟล์ TSX ถูกประมวลผลโดยคอมไพเลอร์ TypeScript ซึ่งตรวจสอบชนิดข้อมูลและแปลง JSX เป็น JavaScript การใช้ Generics ต้องใช้เครื่องหมายจุลภาคต่อท้าย () เพื่อแยกจากแท็ก JSX

ประวัติ

TSX เกิดขึ้นจากการรวม TypeScript กับ JSX เมื่อ React และ TypeScript ได้รับความนิยมร่วมกัน ภายในปี 2020 TSX กลายเป็นค่าเริ่มต้นสำหรับโปรเจกต์ React ใหม่

แปลงจาก .TSX

.tsx → .css .tsx → .html .tsx → .js .tsx → .json .tsx → .jsx .tsx → .ts

แปลงเป็น .TSX

.css → .tsx .html → .tsx .js → .tsx .json → .tsx .jsx → .tsx .ts → .tsx

รูปแบบที่เกี่ยวข้อง

.c .cpp .css .csv .go .java .js .json .jsx .less