Τι είναι ένα αρχείο 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> = ({ όνομα, ηλικία }) => {
   // Λογική συνιστωσών εδώ
   επιστροφή <div>{name} είναι {age} ετών.</div>;
};

JSX (React Syntax Extension)

Το JSX είναι μια επέκταση σύνταξης για JavaScript που προτείνεται από την React. Μοιάζει με XML/HTML και χρησιμοποιείται για να περιγράψει πώς θα πρέπει να μοιάζει το UI.

// Παράδειγμα: JSX σε ένα στοιχείο React
const MyComponent: React.FC<MyComponentProps> = ({ όνομα, ηλικία }) => {
   επιστροφή <div>{name} είναι {age} ετών.</div>;
};

Το αρχείο “.tsx” θα περιέχει συνήθως τον ορισμό ενός στοιχείου React που χρησιμοποιεί λειτουργικά στοιχεία ή στοιχεία κλάσης.

// Παράδειγμα: React ορισμός στοιχείου σε ένα αρχείο ".tsx".
const MyComponent: React.FC = () => {
   επιστροφή <div>Γεια σας, Αντιδράστε!</div>;
};

Θα δείτε συχνά δηλώσεις εισαγωγής στην αρχή του αρχείου, που φέρνουν τις απαραίτητες εξαρτήσεις και λειτουργικές μονάδες.

// Παράδειγμα: Εισαγωγή δηλώσεων σε αρχείο ".tsx".
εισαγωγή Αντίδραση από το 'react';

Πώς να ανοίξετε ένα αρχείο TSX;

Τα αρχεία TSX είναι αρχεία απλού κειμένου ώστε να μπορείτε να τα ανοίξετε σε οποιοδήποτε πρόγραμμα επεξεργασίας κειμένου π.χ. Μπλοκ ΣΗΜΕΙΩΣΕΩΝ. Ωστόσο, αυτά είναι αρχεία κωδικοποίησης και προορίζονται να ανοίξουν από το IDE π.χ. Κωδικός Visual Studio.