Γιατί θα πρέπει (πιθανώς) να χρησιμοποιήσετε την Typescript
Dominik Grzedzielski
Ανώτερος Software Engineer
Όλοι όσοι χρησιμοποιούν το οικοσύστημα JavaScript γνωρίζουν σήμερα την Typescript. Η Typescript είναι μια από τις πιο αγαπημένες τεχνολογίες* και η χρήση της αυξάνεται συνεχώς (το μερίδιο χρήσης αυξήθηκε από 52% το 2018 σε 78% το 2020)*.
Η τρέχουσα θέση της Typescript δεν προέκυψε από το πουθενά, καθώς η τεχνολογία αυτή είναι σε θέση να βελτιώσει πραγματικά την εμπειρία των προγραμματιστών μας. Η πιο σαφής κωδικοποίηση αυξάνει τον έλεγχο και την προβλεψιμότητα των κωδικός. Σε αυτό το άρθρο, θα προσπαθήσω να σας πείσω να χρησιμοποιήσετε την Typescript.
Συνήθως, όταν αναπτύσσετε μια εφαρμογή σε JavaScript, η ροή σας μπορεί να να μοιάζει με αυτό:
Κάντε μια αλλαγή,
Μεταβείτε στην εφαρμογή και ελέγξτε το τροποποιημένο τμήμα / Εκτέλεση (σχετικών) δοκιμών.
Μάθετε αν όλα είναι εντάξει.
Με την Typescript, μπορείτε πραγματικά να κάνετε την αλλαγή και αν υπάρχει κάποια σφάλμα τύπου στον κώδικά σας, θα το καταλάβετε αμέσως χάρη στο μήνυμα σφάλματος του μεταγλωττιστή ή στην ανατροφοδότηση του IDE σε πραγματικό χρόνο. Φυσικά, ο μεταγλωττιστής Typescript δεν θα επιλύσει κάθε πρόβλημα και δεν θα σας προειδοποιήσει για όλα τα σφάλματα, αλλά η βοήθειά του θα μπορούσε να είναι ανεκτίμητη.
Καλύτερη συμπλήρωση σύνταξης σε IDEs
Είναι πραγματικά απλό. Αν χρησιμοποιείτε καλά IDEs, όπως το WebStorm ή το VSCode, θα πάρετε καλύτερη συμπλήρωση σύνταξης με Typescript. Ίσως να μην ακούγεται σαν τεράστια βελτίωση της εμπειρίας του προγραμματιστή, αλλά τελικά κάθε βελτίωση έχει σημασία, καθώς μπορεί να μας εξοικονομήσει χρόνο και, πάλι, να μας αποτρέψει από ένα τυπογραφικό λάθος ή ένα λάθος. Επίσης, μπορούμε να ορίσουμε τον τύπο ή τη διεπαφή μας μία φορά- καθώς δεν χρειάζεται να θυμόμαστε πάντα τη δομή, μπορούμε να επικεντρωθούμε στη συγγραφή της επιχειρησιακής λογικής.
Λιγότερο επώδυνο refactoring
Φανταστείτε ότι πρέπει να κάνετε refactor για οποιονδήποτε λόγο, για παράδειγμα, έχετε ενταχθεί σε ένα έργο και σας ανατίθεται η προσθήκη ενός νέου χαρακτηριστικού, αλλά αυτό το χαρακτηριστικό συνδέεται με κάποιο τρόπο με παλαιό κώδικα. Η Typescript μπορεί να το κάνει ευκολότερο και λιγότερο επώδυνο, επειδή όταν κάνετε μια αλλαγή και υπάρχει ένα άλλο σημείο όπου πρέπει να κάνετε μια άλλη αλλαγή, ο μεταγλωττιστής θα σας προειδοποιήσει γι' αυτό.
Για παράδειγμα - θα μπορούσε να είναι μια αλλαγμένη υπογραφή συνάρτησης ή ίσως μετά την αλλαγή, μια συνάρτηση θα επιστρέψει κάτι εντελώς διαφορετικό, οπότε και ο επιστρεφόμενος τύπος θα διαφέρει.
Να είστε πιο σίγουροι για τη βάση κώδικα
JavaScript είναι ασθενώς και δυναμικά τυποποιημένη, οπότε όταν αρχικοποιείτε μια μεταβλητή με την τιμή let query = '' αργότερα στον κώδικα, ο προγραμματιστής μπορεί να κάνει κάτι παράλογο κατά λάθος, για παράδειγμα query = true, και θα είναι έγκυρος κώδικας JS.
Σε έναν καλά γραμμένο κώδικα, η ανάθεση μιας boolean τιμής σε μια μεταβλητή που προηγουμένως ήταν μια συμβολοσειρά δεν θα έπρεπε να συμβαίνει. Έτσι, συνήθως, αυτή η ανάθεση με αλλαγή τύπου προκύπτει από λάθος.
Όταν χρησιμοποιούμε την Typescript, δεν μπορούμε να αλλάξουμε τον τύπο της μεταβλητής, οπότε αν κάνουμε τη μεταβλητή let query = '' μεταβλητή, θα είναι string και δεν θα μπορούμε να αλλάξουμε τον τύπο του κατά λάθος.
Αν θέλουμε να αφήσουμε μια μεταβλητή να είναι περισσότερους από έναν τύπους, το κάνουμε πάντα ρητά χρησιμοποιώντας τον τύπο union, για παράδειγμα συμβολοσειρά | αριθμός.
Επομένως, η Typescript κάνει τον κώδικά μας πιο προβλέψιμο και σαφή. Επίσης, η Typescript θα φροντίσει για τη σαφήνεια στην ανάλυση της ροής ελέγχου και αν υπάρχει πιθανότητα να πάει κάτι στραβά, θα σας προειδοποιήσει.
Εδώ στο παράδειγμα στο πρώτο εάν μπλοκ θα λάβουμε σφάλμα:
TS2339: Η ιδιότητα 'battery' δεν υπάρχει στον τύπο 'ClothingProduct'. 2 φορές, για μπαταρία, και ram ιδιότητες.
Στο δεύτερο μπλοκ - else, θα λάβουμε αυτό το σφάλμα για μέγεθος ιδιοκτησία. Φυσικά, είναι μόνο ένα παράδειγμα για να σας δείξουμε πώς σωματεία που υφίστανται διακρίσεις και ανάλυση ροής ελέγχου εργάζονται σε Typescript, οπότε δεν κάνουμε κάτι πολύ περίπλοκο με αυτόν τον κώδικα.
Εύκολη, προοδευτική μετάβαση από το JavaScript
Ο έγκυρος κώδικας JavaScript είναι ταυτόχρονα έγκυρος κώδικας Typescript, ώστε να μπορείτε να μεταφέρετε την κωδικοποιημένη βάση σας βήμα προς βήμα. Συνήθως, η χρήση strict mode στην Typescript είναι καλή πρακτική, αλλά σε αυτή την περίπτωση, πρέπει να ξεκινήσουμε με "strict": false στο tsconfig.json και θα πρέπει επίσης να ορίσουμε 2 ακόμη επιλογές.
"allowJs": true, // θα μας επιτρέψει να χρησιμοποιούμε αρχεία .js και ο τύπος δεν θα ελέγχεται σε αυτά
"skipLibCheck": true // θα παραλείψει τον έλεγχο των τύπων στις βιβλιοθήκες που χρησιμοποιούμε
Με αυτές τις επιλογές, μπορούμε να μεταναστεύσουμε από JS σε TS βήμα προς βήμα - αρχείο προς αρχείο, αλλάζοντας απλώς την επέκταση από .js(x) στο .ts(x) και την προσθήκη τύπων στα αρχεία. Χρησιμοποιώντας αυτή την προσέγγιση, μπορούμε να αποφύγουμε εκατοντάδες ή χιλιάδες τρομακτικά σφάλματα μεταγλώττισης.
Περίληψη
Νομίζω ότι πρέπει να χρησιμοποιήσουμε Δακτυλογραφημένο κείμενο τόσο συχνά όσο πιθανό, επειδή είναι πραγματικά ωφέλιμο μακροπρόθεσμα. Βοηθάει στη συντήρηση των έργων, αυξάνει την εμπειρία των προγραμματιστών και καθιστά την βάση κωδικών μας πιο σαφή και αξιόπιστη.
Ωστόσο, όπως πάντα, υπάρχουν εξαιρέσεις - για παράδειγμα, για μια απλή σελίδα προορισμού όπου το JavaScript χρησιμοποιείται μόνο για την εναλλαγή της κλάσης ή μια άλλη απλή περίπτωση, η Typescript δεν έχει νόημα. Επίσης, πρέπει να θυμόμαστε ότι για να εκμεταλλευτούμε πλήρως την Typescript, πρέπει να μάθουμε να την χρησιμοποιούμε σε επαρκές επίπεδο, και αυτό μπορεί να πάρει κάποιο χρόνο. Νομίζω ότι εξακολουθεί να είναι μια πολύ αποδοτική επένδυση του χρόνου σας.