Η JavaScript είναι μια γλώσσα προγραμματισμού με αδύναμο πληκτρολόγιο. Εξαιτίας αυτού, είναι πολύ επιεικής και τα σφάλματα προγραμματισμού είναι πιθανό να περάσουν απαρατήρητα κατά την ανάπτυξη. Το TypeScript, μια βιβλιοθήκη ελέγχου τύπου JavaScript, επιλύει αυτό το πρόβλημα επιβάλλοντας τύπους σε τιμές. Αυτό το άρθρο θα σας διδάξει πώς να δημιουργήσετε ένα έργο React με TypeScript.
Δημιουργία έργου React με TypeScript
Η εντολή create-react-app σάς επιτρέπει να δημιουργείτε έργα Typescript χρησιμοποιώντας το --πρότυπο επιλογή.
Προς την δημιουργήστε ένα νέο έργο React με TypeScript, εκτελέστε την ακόλουθη εντολή:
npx δημιουργώ-εφαρμογή react-app-όνομα--πρότυπο γραφομηχανή
Αυτή η εντολή δημιουργεί ένα νέο έργο React και TypeScript από την αρχή. Μπορείτε επίσης να προσθέσετε TypeScript σε μια υπάρχουσα εφαρμογή React.
Για να το κάνετε αυτό, μεταβείτε στο έργο στο οποίο θέλετε να προσθέσετε TypeScript και εκτελέστε τον ακόλουθο κώδικα:
npm install --save typescript @τύποι/node @τύποι/react @τύποι/react-dom @τύποι/jest
Στη συνέχεια, αλλάξτε την επέκταση αρχείου .js με .tsx για αρχεία που θέλετε να μετατρέψετε σε TypeScript. Μόλις το κάνετε αυτό, θα λάβετε το "Το React αναφέρεται σε ένα παγκόσμιο UMD, αλλά το τρέχον αρχείο είναι μια μονάδα." λάθος. Μπορείτε να το λύσετε εισάγοντας το React σε κάθε αρχείο typescript όπως αυτό:
εισαγωγή Αντιδρώ από "αντιδρώ"
Ως πιο απλή λύση, δημιουργήστε ένα tsconfig.json και ορίστε το jsx σε react-jsx.
{
"Επιλογές μεταγλωττιστή": {
"jsx": "react-jsx",
"στόχος": "es6",
"μονάδα μέτρησης": "esnext",
},
}
Μπορείτε να βρείτε όλες τις ρυθμίσεις διαμόρφωσης από το Έγγραφα TypeScript.
Δημιουργία ενός στοιχείου συνάρτησης React στο TypeScript
Ορίζετε ένα στοιχείο συνάρτησης React με τον ίδιο τρόπο όπως μια συνάρτηση JavaScript.
Παρακάτω είναι ένα παράδειγμα ενός στοιχείου συνάρτησης που ονομάζεται Χαιρετισμοί.
εξαγωγήΠροκαθορισμένολειτουργίαΧαιρετίσματα() {
ΕΠΙΣΤΡΟΦΗ (
<div>Γειά σου Κόσμε</div>
)
}
Αυτό το στοιχείο επιστρέφει μια συμβολοσειρά "Hello world" και το TypeScript συμπεραίνει τον τύπο επιστροφής του. Ωστόσο, μπορείτε να σχολιάσετε τον τύπο επιστροφής του:
εξαγωγήΠροκαθορισμένολειτουργίαΧαιρετίσματα(): JSX.Στοιχείο{
ΕΠΙΣΤΡΟΦΗ (
<div>Γειά σου Κόσμε</div>
)
}
Το TypeScript θα εμφανίσει ένα σφάλμα εάν το στοιχείο Greetings επιστρέψει μια τιμή που δεν είναι στοιχείο JSX.
Χρήση React Props με TypeScript
Το React σάς επιτρέπει να δημιουργείτε επαναχρησιμοποιήσιμα στοιχεία μέσω props. Για παράδειγμα, το στοιχείο Greetings μπορεί να λάβει ένα υποστήριγμα ονόματος έτσι ώστε η τιμή επιστροφής να προσαρμόζεται βάσει αυτού.
Παρακάτω είναι το επεξεργασμένο στοιχείο με ένα όνομα ως υποστηρικτικό στοιχείο. Παρατηρήστε τη δήλωση τύπου inline.
λειτουργίαΧαιρετίσματα({name}: {name: string}) {
ΕΠΙΣΤΡΟΦΗ (
<div>Γεια σας {name}</div>
)
}
Εάν περάσετε το όνομα "Jane", το στοιχείο θα επιστρέψει το μήνυμα "Hello Jane".
Αντί να γράψετε τη δήλωση τύπου στη συνάρτηση, μπορείτε να την ορίσετε εξωτερικά ως εξής:
τύπος GreetingsProps = {
όνομα: συμβολοσειρά;
};
Στη συνέχεια, περάστε τον καθορισμένο τύπο στο στοιχείο ως εξής:
λειτουργίαΧαιρετίσματα({name}: GreetingsProps) {
ΕΠΙΣΤΡΟΦΗ (
<div>Γεια σας {name}</div>
)
}
Χρησιμοποιήστε τη λέξη-κλειδί διεπαφής εάν εξάγετε αυτόν τον τύπο και θέλετε να τον επεκτείνετε:
εξαγωγή διεπαφήGreetingsProps{
όνομα: συμβολοσειρά;
};
Σημειώστε τη διαφορά σύνταξης μεταξύ τύπου και διεπαφής — η διεπαφή δεν έχει σύμβολο ίσου.
Μπορείτε να επεκτείνετε μια διεπαφή χρησιμοποιώντας τον ακόλουθο κώδικα:
εισαγωγή { GreetingsProps } από './Χαιρετίσματα'
διεπαφήWelcomePropsεκτείνεταιGreetingsProps{
χρόνος: "σειρά"
}
Στη συνέχεια, μπορείτε να χρησιμοποιήσετε την εκτεταμένη διεπαφή σε άλλο στοιχείο.
λειτουργίακαλως ΗΡΘΑΤΕ({name, time}: WelcomeProps) {
ΕΠΙΣΤΡΟΦΗ (
<div>
Καλό {time}, {name}!
</div>
)
}
Χρησιμοποιήστε το "?" σύμβολο με τη διεπαφή με τα στηρίγματα για να ορίσετε προαιρετικά στηρίγματα. Ακολουθεί ένα παράδειγμα διεπαφής με προαιρετικό υποστήριγμα ονόματος.
διεπαφήGreetingsProps{
όνομα;: συμβολοσειρά;
};
Εάν δεν περάσετε ένα υπόδειγμα ονόματος, το TypeScript δεν θα προκαλέσει κανένα σφάλμα.
Χρήση React State With TypeScript
Σε απλό JavaScript, εσείς ορίζετε το άγκιστρο useState(). ως εξής:
const [customerName, setCustomerName] = useState("");
Σε αυτό το παράδειγμα, το TypeScript μπορεί εύκολα να συμπεράνει τον τύπο του firstName ως συμβολοσειρά επειδή η προεπιλεγμένη τιμή είναι μια συμβολοσειρά.
Ωστόσο, μερικές φορές δεν μπορείτε να αρχικοποιήσετε την κατάσταση σε μια καθορισμένη τιμή. Σε αυτές τις περιπτώσεις, πρέπει να δώσετε έναν τύπο τιμής κατάστασης.
Ακολουθούν μερικά παραδείγματα του τρόπου ορισμού τύπων στο άγκιστρο useState().
const [customerName, setCustomerName] = useState<σειρά>("");
const [ηλικία, setAge] = useState<αριθμός>(0);
συνθ [isSubscribed, setIsSubscribed] = useState<boolean>(ψευδής);
Μπορείτε επίσης να χρησιμοποιήσετε μια διεπαφή στο άγκιστρο useState(). Για παράδειγμα, μπορείτε να ξαναγράψετε το παραπάνω παράδειγμα για να χρησιμοποιήσετε μια διεπαφή που φαίνεται παρακάτω.
διεπαφήICπελάτης{
Όνομα πελάτη: string ;
ηλικία: αριθμός ;
είναι Εγγεγραμμένος: boolean ;
}
Χρησιμοποιήστε την προσαρμοσμένη διεπαφή στο άγκιστρο ως εξής:
const [πελάτης, setCustomer] = useState<ICπελάτης>({
Όνομα πελάτη: "Ιωάννα",
ηλικία: 10,
είναι Εγγεγραμμένος: ψευδής
});
Χρήση συμβάντων με TypeScript
Τα συμβάντα είναι απαραίτητα καθώς επιτρέπουν στους χρήστες να αλληλεπιδρούν με μια ιστοσελίδα. Στο TypeScript, μπορείτε είτε να πληκτρολογήσετε συμβάντα είτε τους χειριστές συμβάντων.
Για να το δείξετε, εξετάστε το ακόλουθο στοιχείο Σύνδεση χρησιμοποιώντας τα συμβάντα onClick() και onChange().
εισαγωγή { useState } από 'αντιδρώ';
εξαγωγήΠροκαθορισμένολειτουργίαΣύνδεση() {
const [email, setEmail] = useState('');συνθ handleChange = (γεγονός) => {
setEmail(Εκδήλωση.στόχος.αξία);
};συνθ handleClick = (γεγονός) => {
console.log('Υποβλήθηκε!');
};
ΕΠΙΣΤΡΟΦΗ (
<div>
<τύπος εισόδου="ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ" value={email} onChange={handleChange} />
<κουμπί onClick={() => handleClick}>υποβάλλουν</button>
</div>
);
}
Αυτός είναι ο τρόπος με τον οποίο θα χειρίζεστε τα συμβάντα σε απλή JavaScript. Ωστόσο, το TypeScript αναμένει από εσάς να ορίσετε τον τύπο παραμέτρου συμβάντος στις συναρτήσεις του προγράμματος χειρισμού συμβάντων. Ευτυχώς, το React παρέχει διάφορους τύπους συμβάντων.
Για παράδειγμα, χρησιμοποιήστε τον τύπο changeEvent για τον χειριστή συμβάντων handleChange().
εισαγωγή { ChangeEvent, useState } από 'αντιδρώ';
const handleChange = (συμβάν: ChangeEvent<HTMLInputElement>) => {
setEmail(Εκδήλωση.στόχος.αξία);
};
Ο τύπος changeEvent χρησιμοποιείται για την αλλαγή των τιμών των στοιχείων εισόδου, επιλογής και περιοχής κειμένου. Είναι ένας γενικός τύπος που σημαίνει ότι πρέπει να περάσετε στο στοιχείο DOM του οποίου η τιμή αλλάζει. Σε αυτό το παράδειγμα, περάσατε το στοιχείο εισόδου.
Το παραπάνω παράδειγμα δείχνει πώς να πληκτρολογήσετε το συμβάν. Ο παρακάτω κώδικας δείχνει πώς μπορείτε να πληκτρολογήσετε το πρόγραμμα χειρισμού συμβάντων.
εισαγωγή { ChangeEventHandler, useState } από 'αντιδρώ';
const handleChange: ChangeEventHandler<HTMLInputElement> = (γεγονός) => {
setEmail(Εκδήλωση.στόχος.αξία);
};
Για το συμβάν handleClick(), χρησιμοποιήστε το MouseEvent().
εισαγωγή { useState, MouseEvent } από 'αντιδρώ';
συνθ handleClick = (γεγονός: MouseEvent) => {
console.log('Υποβλήθηκε!');
};
Και πάλι, μπορείτε να επισυνάψετε τον τύπο στον ίδιο τον χειριστή συμβάντων.
εισαγωγή { useState, MouseEventHandler } από 'αντιδρώ';
συνθ handleClick: MouseEventHandler = (γεγονός) => {
console.log('Υποβλήθηκε!');
};
Για άλλους τύπους συμβάντων, ανατρέξτε στο Φύλλο εξαπάτησης React TypeScript.
Εάν δημιουργείτε μεγάλες φόρμες, είναι καλύτερα χρησιμοποιήστε μια βιβλιοθήκη φορμών όπως το Formik, καθώς είναι κατασκευασμένο με TypeScript.
Γιατί πρέπει να χρησιμοποιήσετε το TypeScript;
Μπορείτε να δώσετε εντολή σε ένα νέο έργο React να χρησιμοποιήσει TypeScript ή να μετατρέψει ένα υπάρχον. Μπορείτε επίσης να χρησιμοποιήσετε το TypeScript με στοιχεία συνάρτησης React, καταστάσεις και συμβάντα React.
Η πληκτρολόγηση των στοιχείων React μπορεί μερικές φορές να μοιάζει σαν να γράφετε περιττό κώδικα λέβητα. Ωστόσο, όσο περισσότερο το χρησιμοποιείτε, τόσο περισσότερο θα εκτιμάτε την ικανότητά του να εντοπίζει σφάλματα πριν αναπτύξετε τον κώδικά σας.
