Πότε πρέπει να χρησιμοποιήσω το TypeScript;

Το περασμένο καλοκαίρι έπρεπε να μετατρέψουμε μια τεράστια βάση κώδικα (18.000+ γραμμές κώδικα) από JavaScript σε TypeScript. Έμαθα πολλά για τα πλεονεκτήματα και τις αδυναμίες του καθενός, και όταν έχει νόημα να χρησιμοποιώ το ένα πάνω στο άλλο.

Αυτό το άρθρο είναι πλέον διαθέσιμο στα Ιαπωνικά και στα Κινέζικα.

Όταν έχει νόημα να χρησιμοποιήσετε το TypeScript

Όταν έχετε μια μεγάλη βάση κώδικα

Όταν η βάση κωδικών σας είναι τεράστια και περισσότερα από ένα άτομα εργάζονται στο έργο, ένα σύστημα τύπου μπορεί να σας βοηθήσει να αποφύγετε πολλά κοινά λάθη. Αυτό ισχύει ιδιαίτερα για εφαρμογές μιας σελίδας.

Κάθε φορά που ένας προγραμματιστής θα μπορούσε να εισαγάγει σπάνιες αλλαγές, είναι γενικά καλό να υπάρχει κάποιο είδος μηχανισμού ασφαλείας.

Ο τύπος transpiler αποκαλύπτει τα πιο προφανή λάθη - αν και δεν θα εξαλείψει μαγικά την ανάγκη για εντοπισμό σφαλμάτων.

Εάν η βάση κώδικα δεν είναι τόσο μεγάλη, πιθανότατα δεν έχει νόημα να το κάνετε μεγαλύτερο με την προσθήκη σχολιασμών τύπου. Έχω μετατρέψει 180+ αρχεία από JavaScript σε TypeScript και στις περισσότερες περιπτώσεις πρόσθεσε περίπου το 30% στο συνολικό μέγεθος κώδικα.

Όταν οι προγραμματιστές της ομάδας σας είναι ήδη εξοικειωμένοι με γλώσσες με στατική πληκτρολόγηση

Εάν εσείς ή η πλειοψηφία της ομάδας προέρχεστε από μια έντονα δακτυλογραφημένη γλώσσα όπως C # ή Java και δεν θέλετε να κάνετε all-in σε JavaScript, το TypeScript είναι μια καλή εναλλακτική λύση.

Παρόλο που προτείνω να μάθετε καλά το Javascript, δεν υπάρχει τίποτα που να σας εμποδίζει να χρησιμοποιήσετε το TypeScript χωρίς να γνωρίζετε το JavaScript. Στην πραγματικότητα, το TypeScript δημιουργήθηκε από τον ίδιο τύπο που έφτιαξε το C #, έτσι οι σύνταξη είναι παρόμοιες.

Στην εταιρεία μου, είχαμε μια ομάδα προγραμματιστών C # που κωδικοποιούσαν μια εξελιγμένη εφαρμογή για επιτραπέζιους υπολογιστές σε C # και WPF (η οποία είναι βασικά ένα εργαλείο ανάπτυξης διεπαφής για τον κόσμο της επιφάνειας εργασίας). Τότε τους ζητήθηκε να συμμετάσχουν σε ένα έργο ιστού ως προγραμματιστές πλήρους στοίβας. Έτσι, σε σύντομη σειρά, μπόρεσαν να μάθουν TypeScript για το front end και στη συνέχεια να αξιοποιήσουν τις γνώσεις C # τους για το back end.

Το TypeScript μπορεί να χρησιμεύσει ως αντικατάσταση του Babel

Η παλιά Microsoft χρησιμοποιούσε τυπικά εργαλεία - για παράδειγμα Java - και πρόσθεσε ιδιόκτητα μη τυπικά χαρακτηριστικά σε αυτήν την περίπτωση με αποτέλεσμα το J ++. Τότε θα προσπαθούσαν να αναγκάσουν τους προγραμματιστές να επιλέξουν μεταξύ των δύο.

Το TypeScript είναι ακριβώς η ίδια προσέγγιση - αυτή τη φορά για JavaScript. Παρεμπιπτόντως, αυτό δεν είναι το πρώτο πιρούνι της Microsoft για τη JavaScript. Το 1996, διαμόρφωσαν τη JavaScript για να δημιουργήσουν JScript.

Αν και είναι μια λιγότερο συνηθισμένη περίπτωση χρήσης, είναι τεχνικά δυνατό να μεταθέσουμε τον κώδικα ES6 σε ES5 χρησιμοποιώντας το Transpiler TypeScript. Αυτό είναι εφικτό επειδή το ES6 είναι ουσιαστικά ένα υποσύνολο του TypeScript και το TransScript του TypeScript δημιουργεί κώδικα ES5.

Το transpiler του Typescript παράγει αρκετά αναγνώσιμο κώδικα Javascript (EcmaScript 5) ως έξοδος. Αυτός ήταν ένας από τους λόγους για τους οποίους η ομάδα Angular 2 επέλεξε το TypeScript έναντι της γλώσσας Dart της Google.

Επίσης, το TypeScript έχει μερικές εντυπωσιακές δυνατότητες που δεν είναι στο ES6, όπως τα enums και τη δυνατότητα αρχικοποίησης των μεταβλητών μελών σε έναν κατασκευαστή. Δεν είμαι οπαδός της κληρονομιάς, αλλά θεωρώ χρήσιμο να έχω δημόσιες, ιδιωτικές, προστατευμένες και αφηρημένες λέξεις-κλειδιά σε τάξεις. Το TypeScript τα έχει και το ES6 δεν το έχει.

Οι προγραμματιστές C # μας πίστευαν ότι ήταν εξαιρετικά εκπληκτικό να μπορούμε να γράψουμε μια λειτουργία λάμδα ως το σώμα μιας μεθόδου - η οποία εξάλειψε τους πονοκεφάλους που σχετίζονται με αυτήν τη λέξη-κλειδί.

Όταν μια βιβλιοθήκη ή πλαίσιο προτείνει TypeScript

Εάν χρησιμοποιείτε το Angular 2 ή άλλη βιβλιοθήκη που συνιστά TypeScript, αναζητήστε το. Ρίξτε μια ματιά στα λόγια αυτών των προγραμματιστών μετά τη χρήση του Angular 2 για έξι μήνες.

Απλώς γνωρίζετε ότι - παρόλο που το TypeScript μπορεί να χρησιμοποιήσει όλες τις βιβλιοθήκες JavaScript εκτός λειτουργίας - εάν θέλετε καλά συντακτικά σφάλματα, θα πρέπει να προσθέσετε τους ορισμούς τύπων για αυτές τις βιβλιοθήκες εξωτερικά. Ευτυχώς τα ωραία παιδιά στο DefinitelyTyped έχουν δημιουργήσει ένα repo με γνώμονα την κοινότητα με εργαλεία για να κάνουν ακριβώς αυτό. Αλλά αυτό εξακολουθεί να είναι ένα ακόμη βήμα όταν ρυθμίζετε το έργο σας

(Σε μια δευτερεύουσα σημείωση: για όλους εσάς τους θαυμαστές του JSX, δείτε το TSX.)

Όταν αισθάνεστε πραγματικά την ανάγκη για ταχύτητα

Αυτό μπορεί να σας προκαλέσει σοκ, αλλά ο κώδικας TypeScript μπορεί σε ορισμένες περιπτώσεις να αποδίδει καλύτερα από το JavaScript. ΑΣΕ με να εξηγήσω.

Στον κώδικα JavaScript, είχαμε πολλούς ελέγχους τύπου. Ήταν μια εφαρμογή MedTech, οπότε ακόμη και ένα μικρό σφάλμα θα μπορούσε να είναι κυριολεκτικά θανατηφόρο εάν δεν αντιμετωπιστεί σωστά. Έτσι, πολλές συναρτήσεις είχαν δηλώσεις όπως:

if(typeof name !== ‘string) throw ‘Name should be string’

Με το TypeScript, θα μπορούσαμε να εξαλείψουμε πολλούς από αυτούς τους ελέγχους τύπου μαζί.

Αυτό έδειξε ιδιαίτερα την επίδρασή του σε τμήματα του κώδικα όπου προηγουμένως είχαμε ένα πρόβλημα συμφόρησης, επειδή καταφέραμε να παραλείψουμε πολλούς περιττούς ελέγχους τύπου χρόνου εκτέλεσης.

Λοιπόν, πότε είστε καλύτερα χωρίς πληκτρολόγηση;

Όταν δεν μπορείτε να πληρώσετε επιπλέον φόρο μεταφοράς

Δεν υπάρχουν σχέδια για την υποστήριξη TypeScript εγγενώς στα προγράμματα περιήγησης. Το Chrome έκανε κάποιο πείραμα, αλλά αργότερα ακύρωσε την υποστήριξη. Υποψιάζομαι ότι αυτό έχει να κάνει με τα περιττά έξοδα χρόνου εκτέλεσης.

Εάν κάποιος θέλει τροχούς προπόνησης, μπορεί να τους εγκαταστήσει. Αλλά τα ποδήλατα δεν πρέπει να έρχονται με μόνιμους τροχούς προπόνησης. Αυτό σημαίνει ότι θα πρέπει πάντα να μεταδίδετε τον κωδικό TypeScript πριν τον εκτελέσετε σε πρόγραμμα περιήγησης.

Για το πρότυπο ES6, είναι μια εντελώς διαφορετική ιστορία. Όταν το ES6 υποστηρίζεται από τα περισσότερα προγράμματα περιήγησης, η τρέχουσα μετάδοση ES6 σε ES5 θα είναι περιττή (ενημέρωση: ναι πράγματι!).

Το ES6 είναι η μεγαλύτερη αλλαγή στη γλώσσα JavaScript και πιστεύω ότι οι περισσότεροι προγραμματιστές θα τα καταφέρουν. Όμως, εκείνοι οι γενναίοι λίγοι που θέλουν να δοκιμάσουν την επόμενη έκδοση των πειραματικών δυνατοτήτων του JavaScript ή οι λειτουργίες που δεν έχουν ακόμη εφαρμοστεί σε όλα τα προγράμματα περιήγησης - θα πρέπει να μεταφερθούν έτσι κι αλλιώς

Χωρίς μεταφορά, απλώς τροποποιείτε το αρχείο και ανανεώνετε το πρόγραμμα περιήγησής σας. Αυτό είναι. Δεν απαιτείται παρακολούθηση, μετάδοση κατά παραγγελία ή σύστημα κατασκευής .

Εάν επιλέξετε TypeScript, θα καταλήξετε να κάνετε κάποια επιπλέον λογιστική για τους ορισμούς τύπων για τις βιβλιοθήκες και τα πλαίσια Javascript (χρησιμοποιώντας το DefinitelyTyped ή γράφοντας τους δικούς σας σχολιασμούς τύπου). Αυτό είναι κάτι που δεν θα χρειαστεί να κάνετε για ένα καθαρό έργο JavaScript.

Όταν θέλετε να αποφύγετε περίεργες περιπτώσεις εντοπισμού σφαλμάτων

Οι Sourcemaps διευκολύνουν τον εντοπισμό σφαλμάτων Typescript, αλλά το status quo δεν είναι τέλειο. Υπάρχουν πραγματικά ενοχλητικές και συγκεχυμένες θήκες.

Επίσης, υπάρχουν ορισμένα προβλήματα κατά τον εντοπισμό σφαλμάτων της λέξης-κλειδιού «αυτή» και των ιδιοτήτων που συνδέονται με αυτήν (υπόδειξη: “_this” λειτουργεί στις περισσότερες περιπτώσεις). Αυτό συμβαίνει επειδή οι Sourcemaps αυτήν τη στιγμή δεν έχουν καλή υποστήριξη για μεταβλητές - αν και αυτό μπορεί να αλλάξει στο μέλλον.

Όταν θέλετε να αποφύγετε πιθανές κυρώσεις απόδοσης

Στο έργο μας, είχαμε 9.000+ γραμμές καλής παλιάς ES5 JavaScript που έδωσαν καθαρή ιπποδύναμη σε έναν καμβά 3D WebGL. Το κρατήσαμε έτσι.

Το TypeScript transpiler (ακριβώς όπως το Babel) διαθέτει δυνατότητες που απαιτούν δημιουργία επιπλέον κώδικα (κληρονομικότητα, enum, generics, async / wait), κ.λπ.). Ανεξάρτητα από το πόσο καλό είναι το transpiler, δεν μπορεί να ξεπεράσει τις βελτιστοποιήσεις ενός καλού προγραμματιστή. Αποφασίσαμε λοιπόν να το κρατήσουμε σε απλό ES5 για ευκολία εντοπισμού σφαλμάτων και ανάπτυξης (χωρίς μεταβολή).

Τούτου λεχθέντος, η ποινή απόδοσης είναι πιθανώς αμελητέα σε σύγκριση με τα οφέλη ενός συστήματος τύπου και μια πιο σύγχρονη σύνταξη για τα περισσότερα έργα. Υπάρχουν, όμως, περιπτώσεις στις οποίες έχουν σημασία τα χιλιοστά του δευτερολέπτου και ακόμη και τα μικροδευτερόλεπτα, και σε αυτές τις περιπτώσεις δεν συνιστάται η μεταφορά οποιουδήποτε είδους (ακόμη και με Babel, CoffeeScript, Dart κ.λπ.).

Σημειώστε ότι το Typescript δεν προσθέτει επιπλέον κώδικα για τον έλεγχο τύπου χρόνου εκτέλεσης. Όλος ο έλεγχος τύπων συμβαίνει κατά το χρόνο μεταφοράς και οι σχολιασμοί τύπου αφαιρούνται από τον κώδικα Javascript που δημιουργείται.

Όταν θέλετε να μεγιστοποιήσετε την ευελιξία της ομάδας σας

Είναι πιο γρήγορο να ρυθμίσετε κάτι σε JavaScript. Η έλλειψη ενός τύπου συστήματος επιτρέπει την ευελιξία και την ευκολία αλλαγής του υλικού. Επίσης, διευκολύνει το σπάσιμο των πραγμάτων, οπότε βεβαιωθείτε ότι γνωρίζετε τι κάνετε.

Το JavaScript είναι πιο ευέλικτο. Θυμηθείτε ότι μία από τις κύριες περιπτώσεις χρήσης ενός συστήματος τύπου είναι να δυσκολευτείτε να σπάσετε πράγματα. Εάν το Typescript είναι Windows, το Javascript είναι Linux.

Στο JavaScript Land, δεν έχετε τους τροχούς προπόνησης ενός συστήματος τύπου και ο υπολογιστής υποθέτει ότι γνωρίζετε τι κάνετε, αλλά σας επιτρέπει να οδηγείτε πολύ πιο γρήγορα και να κάνετε ευκολότερους ελιγμούς.

Αυτό είναι ιδιαίτερα σημαντικό να σημειωθεί εάν βρίσκεστε ακόμα στη φάση του πρωτότυπου. Εάν ναι, μην χάνετε χρόνο με το TypeScript. Το JavaScript είναι πολύ πιο ευέλικτο.

Θυμηθείτε ότι το TypeScript είναι ένα υπερσύνολο της JavaScript. Αυτό σημαίνει ότι μπορείτε εύκολα να μετατρέψετε το JavaScript σε TypeScript αργότερα, αν χρειαστεί.

Η προτίμησή μου στο JavaScript VS TypeScript

Δεν υπάρχει καμία καλύτερη γλώσσα συνολικά. Αλλά για κάθε μεμονωμένο έργο, υπάρχει πιθανώς μια αντικειμενικά καλύτερη γλώσσα και βιβλιοθήκη και πλαίσιο και βάση δεδομένων και λειτουργικό σύστημα και… παίρνετε την εικόνα.

Για το έργο μας ήταν λογικό να χρησιμοποιήσετε το TypeScript. Προσπάθησα να επαναπροσδιορίσω κάποια από τα έργα μου στο χόμπι στο TypeScript, αλλά δεν άξιζε την προσπάθεια.

Προσωπικά μου αρέσουν τα 5 πράγματα για το TypeScript:

  1. Είναι πλήρως συμβατό με το ES6. Είναι πολύ ωραίο να βλέπουμε τη Microsoft να παίζει δίκαια με τα άλλα προγράμματα περιήγησης. Το οικοσύστημα μας μπορεί να επωφεληθεί από έναν ισχυρό αντίπαλο της Google, της Mozilla και της Apple. Η Microsoft ξοδεύει σοβαρή ενέργεια σε αυτό - όπως η σύνταξη κώδικα Visual Studio από το μηδέν χρησιμοποιώντας TypeScript στο Google Chrome, όλων των πλατφορμών.
  2. Το σύστημα τύπου είναι προαιρετικό. Προερχόμενος από φόντο C και Java, βρήκα την έλλειψη συστήματος τύπου σε απελευθέρωση JavaScript. Αλλά μισούσα να χάσω χρόνο όταν αντιμετώπισα ηλίθια σφάλματα κατά τη διάρκεια του χρόνου εκτέλεσης. Το TypeScript μου επιτρέπει να αποφεύγω πολλά κοινά σφάλματα, ώστε να μπορώ να επικεντρώσω τον χρόνο μου στη διόρθωση των πραγματικών δύσκολων. Είναι μια καλή ισορροπία. Μου αρέσει. Είναι το γούστο μου. Χρησιμοποιώ τύπους όποτε μπορώ, γιατί μου δίνει ηρεμία. Αλλά εγώ είμαι. Εάν χρησιμοποιώ TypeScript, δεν θέλω να περιοριστώ στις δυνατότητες ES6.
  3. Ο κώδικας JavaScript που βγαίνει από το TransScript του TypeScript είναι πολύ αναγνώσιμος. Δεν είμαι οπαδός του Sourcemaps, επομένως κάνω το μεγαλύτερο μέρος του εντοπισμού σφαλμάτων μου στο JavaScript που δημιουργήθηκε. Είναι απολύτως φοβερό. Μπορώ να καταλάβω πλήρως γιατί το Angular 2 επέλεξε το TypeScript έναντι του Dart.
  4. Η εμπειρία ανάπτυξης του TypeScript είναι φανταστική. Ο κώδικας VS είναι πολύ έξυπνος όταν ασχολείται με το JavaScript (ορισμένοι μπορεί να υποστηρίζουν ότι είναι το πιο έξυπνο JS IDE). Αλλά το TypeScript ωθεί τα όρια σε ένα εντελώς νέο επίπεδο. Οι λειτουργίες αυτόματης συμπλήρωσης και αναδιαμόρφωσης στον VSCode λειτουργούν με μεγαλύτερη ακρίβεια και δεν οφείλεται στο ότι το IDE είναι εξαιρετικά έξυπνο. Όλα αυτά χάρη στο TypeScript.
  5. Οι σχολιασμοί τύπου είναι σαν τεκμηρίωση βασικού επιπέδου. Δηλώνουν τον τύπο δεδομένων που αναμένει κάθε συνάρτηση, τα αποτελέσματά τους και διάφορες άλλες συμβουλές όπως readonly, publicή privateχαρακτηριστικά. Σύμφωνα με την εμπειρία μου, προσπαθώντας να αναπαράγω έναν κώδικα JavaScript σε TypeScript, συνήθως καταλήγω σε καθαρότερο κώδικα με καλύτερη δομή. Στην πραγματικότητα, η συγγραφή TypeScript βελτίωσε τον τρόπο εγγραφής απλού JavaScript.

Η τυπογραφία δεν είναι η απάντηση για τα πάντα. Μπορείτε ακόμα να γράψετε τρομερό κώδικα σε αυτό.

Οι μίσους TypeScript θα μισούν, είτε λόγω του φόβου της αλλαγής είτε επειδή γνωρίζουν κάποιον που γνωρίζει κάποιον που τον φοβάται. Η ζωή συνεχίζεται και η TypeScript εισάγει νέες δυνατότητες στην κοινότητά της ούτως ή άλλως.

Αλλά όπως το React, το TypeScript είναι μία από αυτές τις σημαντικές τεχνολογίες που ωθούν τα όρια της ανάπτυξης του διαδικτύου μας.

Είτε χρησιμοποιείτε TypeScript είτε όχι, δεν είναι κακό να το δοκιμάσετε για να αναπτύξετε τις δικές σας απόψεις σχετικά με αυτό. Έχει καμπύλη εκμάθησης, αλλά αν γνωρίζετε ήδη JavaScript, θα είναι ομαλή.

Ακολουθεί ένας διαδικτυακός μεταδότης πραγματικού χρόνου με μερικά παραδείγματα που σας επιτρέπουν να συγκρίνετε τον κωδικό TypeScript με τον αντίστοιχο κώδικα JavaScript.

Εδώ είναι ένα γρήγορο σεμινάριο και ένας πολύ καλός οδηγός, αλλά είμαι περισσότερο τύπος γλωσσικής αναφοράς. Αν σας αρέσει το βίντεο, ακολουθεί ένα μάθημα από τον Udemy.

Ο John Papa έχει ένα σύντομο άρθρο σχετικά με το ES5 και το TypeScript.

Υπάρχει μια ενδιαφέρουσα μελέτη που δείχνει όλα τα πράγματα ίσα, ένα σύστημα τύπου μειώνει τα σφάλματα κατά 15%.

Ω, και αν θέλετε να πάτε σε μια αποστολή, διαβάστε γιατί ο προγραμματισμός είναι η καλύτερη δουλειά ποτέ.