Ο παγκόσμιος ιστός βασικά βασίζεται σε JavaScript, HTML και CSS. Δυστυχώς, το JavaScript δεν διαθέτει πολλές δυνατότητες που θα βοηθούσαν τους προγραμματιστές να το χρησιμοποιούν για εφαρμογές μεγάλης κλίμακας. Εισαγάγετε TypeScript.
Τι είναι το JavaScript;
Το JavaScript ξεκίνησε ως γλώσσα δέσμης ενεργειών για το πρόγραμμα περιήγησης ιστού Netscape Navigator. Ο Brendan Eich έγραψε το πρωτότυπο για μια περίοδο 10 ημερών το 1995. Το όνομα JavaScript είναι ένα νεύμα στη γλώσσα Java της Sun Microsystem, αν και οι δύο γλώσσες είναι αρκετά διαφορετικές και η ομοιότητα στα ονόματα έχει οδηγήσει σε σημαντική σύγχυση με την πάροδο των ετών. Το JavaScript, το οποίο έχει εξελιχθεί σημαντικά, υποστηρίζεται πλέον σε όλα τα σύγχρονα προγράμματα περιήγησης ιστού.
Η εισαγωγή του JavaScript από την πλευρά του πελάτη στο Netscape Navigator ακολουθήθηκε γρήγορα από την εισαγωγή του JavaScript από διακομιστή σε διακομιστές ιστού Netscape Enterprise Server και Microsoft IIS. Περίπου 13 χρόνια αργότερα, ο Ryan Dahl παρουσίασε το Node.js ως περιβάλλον ανοιχτού κώδικα, πολλαπλών πλατφορμών, χρόνου εκτέλεσης JavaScript ανεξάρτητο από οποιοδήποτε πρόγραμμα περιήγησης ή διακομιστή ιστού.
Γλώσσα JavaScript
Το JavaScript είναι μια γλώσσα πολλαπλών παραδειγμάτων. Έχει σύνταξη σγουρών-αγκυλών και ερωτηματικών, όπως η οικογένεια Γ των γλωσσών. Έχει αδύναμη, δυναμική πληκτρολόγηση και ερμηνεύεται ή (πιο συχνά) συντάσσεται ακριβώς στο χρόνο. Σε γενικές γραμμές, το JavaScript είναι μονό νήμα, αν και υπάρχει ένα Web Workers API που κάνει multithreading και υπάρχουν συμβάντα, ασύγχρονες κλήσεις λειτουργίας και επιστροφές κλήσεων.
Το JavaScript υποστηρίζει αντικειμενοστρεφή προγραμματισμό χρησιμοποιώντας πρωτότυπα και όχι την κληρονομική κλάση που χρησιμοποιείται σε C ++, Java και C #, αν και τάξη Η σύνταξη προστέθηκε στο JavaScript ES6 το 2015. Το JavaScript υποστηρίζει επίσης λειτουργικό προγραμματισμό, συμπεριλαμβανομένων κλεισίματος, αναδρομής και λάμδα (ανώνυμες λειτουργίες).
Πριν από το JavaScript ES6, η γλώσσα δεν είχε βελτιστοποίηση ουράς κλήσης. τώρα, αν και πρέπει να ενεργοποιήσετε αυστηρή λειτουργία ("χρήση αυστηρών") για να το ενεργοποιήσετε και η εφαρμογή διαφέρει από πρόγραμμα περιήγησης σε πρόγραμμα περιήγησης. Η αυστηρή λειτουργία αλλάζει επίσης τη σημασιολογία της JavaScript και αλλάζει μερικά κανονικά σιωπηλά σφάλματα για να ρίξει σφάλματα.
Τι συμβαίνει με την ονομασία "ES6"; Το όνομα για την τυποποιημένη γλώσσα JavaScript είναι ECMAScript (ES), σύμφωνα με τον οργανισμό τυποποίησης ECMA International. Το ES6 ονομάζεται επίσης ECMAScript 2015 (ES2015). Το ES2020 είναι επί του παρόντος ένα πρόχειρο πρότυπο.
Ως απλό παράδειγμα για να σας δώσει τη γεύση της γλώσσας JavaScript, ακολουθεί ορισμένος κώδικας για να αποφασίσετε αν είναι μέρα ή βράδυ και να τοποθετήσετε δυναμικά τον κατάλληλο χαιρετισμό σε ένα όνομα στοιχείου ιστού που βρίσκεται στο αντικείμενο εγγράφου του προγράμματος περιήγησης:
var hour = new Date (). getHours ();χαιρετισμός
εάν (ώρα <18) {
χαιρετισμός = "Καλημέρα";
} αλλιώς {
χαιρετισμός = "Καλησπέρα";
}
document.getElementById ("επίδειξη"). innerHTML = χαιρετισμός;
Οικοσύστημα JavaScript
Υπάρχουν πολλά API JavaScript. Ορισμένα παρέχονται από το πρόγραμμα περιήγησης, όπως το έγγραφο API στον κωδικό που φαίνεται παραπάνω και ορισμένα παρέχονται από τρίτους. Ορισμένα API ισχύουν για τη χρήση από την πλευρά του πελάτη, ορισμένα για τη χρήση από την πλευρά του διακομιστή, ορισμένα για τη χρήση της επιφάνειας εργασίας και μερικά για περισσότερα από ένα περιβάλλον.
Τα API προγράμματος περιήγησης περιλαμβάνουν το μοντέλο αντικειμένου εγγράφου (DOM) και το μοντέλο αντικειμένου προγράμματος περιήγησης (BOM), τη γεωγραφική τοποθεσία, τον καμβά (γραφικά), το WebGL (γραφικά με επιτάχυνση GPU), το HTMLMediaElement (ήχος και βίντεο) και το WebRTC (επικοινωνίες σε πραγματικό χρόνο).
Τα API τρίτου μέρους αφθονούν. Ορισμένες είναι διεπαφές σε πλήρεις εφαρμογές, όπως οι Χάρτες Google. Άλλοι είναι βοηθητικά προγράμματα που διευκολύνουν τον προγραμματισμό HTML5 και CSS JavaScript, όπως το jQuery. Ορισμένα, όπως το Express, είναι πλαίσια εφαρμογής για συγκεκριμένους σκοπούς. για Express, σκοπός είναι η δημιουργία διακομιστών εφαρμογών ιστού και κινητών στο Node.js. Ορισμένα άλλα πλαίσια έχουν κατασκευαστεί πάνω από το Express. Το 2016, συζήτησα 22 πλαίσια JavaScript σε μια προσπάθεια να κατανοήσω τι γινόταν κάτι ζωολογικό κήπο. Πολλά από αυτά τα πλαίσια εξακολουθούν να υπάρχουν με τη μία ή την άλλη μορφή, αλλά πολλά έχουν περάσει από την άκρη.
Υπάρχουν Πολλά περισσότερες ενότητες JavaScript, πάνω από 300.000. Για να το αντιμετωπίσουμε, χρησιμοποιούμε διαχειριστές πακέτων, όπως το npm, ο προεπιλεγμένος διαχειριστής πακέτων για το Node.js.
Μια εναλλακτική λύση για το npm είναι το Νήμα, το οποίο προήλθε από το Facebook, και ισχυρίζεται το πλεονέκτημα των ντετερμινιστικών εγκαταστάσεων. Παρόμοια εργαλεία περιλαμβάνουν το Bower (από το Twitter), το οποίο διαχειρίζεται στοιχεία front-end και όχι Node modules. Ender, που ονομάζεται μικρή αδελφή του npm. και jspm, το οποίο χρησιμοποιεί μονάδες ES (το νεότερο πρότυπο ECMA για ενότητες), αντί για μονάδες CommonJS, το παλαιότερο de-facto πρότυπο που υποστηρίζεται από npm.
Το Webpack ομαδοποιεί τις ενότητες JavaScript σε στατικά στοιχεία του προγράμματος περιήγησης. Το Browserify επιτρέπει στους προγραμματιστές να γράφουν λειτουργικές μονάδες τύπου Node.js που συλλέγονται για χρήση στο πρόγραμμα περιήγησης. Το Grunt είναι ένα πρόγραμμα εκτέλεσης εργασιών JavaScript προσανατολισμένο σε αρχεία και το gulp είναι ένα σύστημα δημιουργίας ροής και ένας δρομέας εργασιών JavaScript. Η επιλογή ανάμεσα στο γρύλισμα και στον κόλπο δεν είναι αποφασιστική. Έχω εγκαταστήσει και χρησιμοποιώ όποιο από αυτά δημιουργήθηκε για ένα συγκεκριμένο έργο.
Για να κάνουμε τον κώδικα JavaScript πιο αξιόπιστος ελλείψει συλλογής, χρησιμοποιούμε linters. Ο όρος προέρχεται από το εργαλείο χνούδι C-language, το οποίο ήταν ένα τυπικό βοηθητικό πρόγραμμα Unix. Τα JavaScript linters περιλαμβάνουν JSLint, JSHint και ESLint. Μπορείτε να αυτοματοποιήσετε τα τρέχοντα χνούδια μετά από αλλαγές κώδικα χρησιμοποιώντας ένα πρόγραμμα εκτέλεσης εργασιών ή το IDE σας. Και πάλι, η επιλογή μεταξύ των χειμώνων δεν είναι ξεκάθαρη και χρησιμοποιώ όποιο από αυτά δημιουργήθηκε για ένα συγκεκριμένο έργο.
Μιλώντας για συντάκτες και IDE, έχω ελέγξει 6 IDE JavaScript και 10 επεξεργαστές JavaScript, πιο πρόσφατα το 2019. Οι κορυφαίες επιλογές μου ήταν το Υψηλό Κείμενο (πολύ γρήγορος επεξεργαστής), το Visual Studio Code (διαμορφώσιμο πρόγραμμα επεξεργασίας / IDE) και το WebStorm (IDE).
Τα Transpilers σάς επιτρέπουν να μεταφράζετε κάποιες άλλες γλώσσες, όπως CoffeeScript ή TypeScript σε JavaScript, και να μεταφράζετε τη σύγχρονη JavaScript (όπως ο κώδικας ES2015) σε μια βασική JavaScript που εκτελείται σε (σχεδόν) οποιοδήποτε πρόγραμμα περιήγησης. (Όλα τα στοιχήματα είναι απενεργοποιημένα για πρώιμες εκδόσεις του Internet Explorer.) Το πιο κοινό transpiler για τη σύγχρονη JavaScript είναι το Babel.
Τι είναι το TypeScript;
Το TypeScript είναι ένα τυποποιημένο υπερσύνολο JavaScript που μεταγλωττίζεται σε απλή JavaScript (ES3 ή υψηλότερη · είναι διαμορφώσιμη). Ο μεταγλωττιστής γραμμής εντολών TypeScript ανοιχτού κώδικα μπορεί να εγκατασταθεί ως πακέτο Node.js. Η υποστήριξη TypeScript συνοδεύεται από Visual Studio 2017 και Visual Studio 2019, Visual Studio Code και WebStorm και μπορεί να προστεθεί σε Sublime Text, Atom, Eclipse, Emacs και Vim. Ο μεταγλωττιστής TypeScript / transpiler tsc είναι γραμμένος σε TypeScript.
Το TypeScript προσθέτει προαιρετικούς τύπους, τάξεις και λειτουργικές μονάδες στο JavaScript και υποστηρίζει εργαλεία για εφαρμογές JavaScript μεγάλης κλίμακας για οποιοδήποτε πρόγραμμα περιήγησης, για οποιοδήποτε κεντρικό υπολογιστή, σε οποιοδήποτε λειτουργικό σύστημα. Ανάμεσα σε πολλές άλλες νίκες για το TypeScript, το δημοφιλές πλαίσιο Angular έχει ανανεωθεί στο TypeScript.
Οι τύποι επιτρέπουν στους προγραμματιστές JavaScript να χρησιμοποιούν εξαιρετικά παραγωγικά εργαλεία και πρακτικές ανάπτυξης, όπως στατικό έλεγχο και επαναπροσδιορισμό κώδικα κατά την ανάπτυξη εφαρμογών JavaScript.
Οι τύποι είναι προαιρετικοί και η συμπερίληψη τύπου επιτρέπει ορισμένους σχολιασμούς τύπων να κάνουν μεγάλη διαφορά στη στατική επαλήθευση του κωδικού σας. Οι τύποι σάς επιτρέπουν να ορίσετε διεπαφές μεταξύ στοιχείων λογισμικού και να αποκτήσετε πληροφορίες σχετικά με τη συμπεριφορά των υπαρχουσών βιβλιοθηκών JavaScript.
Το TypeScript προσφέρει υποστήριξη για τις πιο πρόσφατες και εξελισσόμενες δυνατότητες JavaScript, συμπεριλαμβανομένων εκείνων από το ECMAScript 2015 και μελλοντικές προτάσεις, όπως λειτουργίες ασύγχυσης και διακοσμητές, για να βοηθήσουν στην κατασκευή ισχυρών στοιχείων.
Γλώσσα TypeScript
Η γλώσσα TypeScript δέχεται τη JavaScript ως έγκυρη, αλλά προσφέρει τις πρόσθετες επιλογές σχολιασμών τύπου, ελέγχου τύπου κατά τη στιγμή της μεταγλώττισης, των τάξεων και των ενοτήτων. Όλα αυτά είναι εξαιρετικά χρήσιμα όταν προσπαθείτε να παράγετε ισχυρό λογισμικό. Η απλή JavaScript δημιουργεί σφάλματα μόνο κατά το χρόνο εκτέλεσης και, στη συνέχεια, μόνο εάν το πρόγραμμά σας τυχαίνει να φτάσει σε μια διαδρομή με σφάλματα.
Το πρόγραμμα εκτύπωσης TypeScript σε 5 λεπτά καθιστά τα οφέλη σαφή. Το σημείο εκκίνησης είναι καθαρή JavaScript με επέκταση .ts:
συνάδελφο (άτομο) { επιστρέψτε "Γεια σας" + άτομο;
}
αφήστε το χρήστη = "Jane User";
document.body.textContent = greeter (χρήστης);
Εάν το μεταγλωττίσετε με το tsc, θα παράγει ένα ίδιο αρχείο με επέκταση .js.
Το σεμινάριο σας έχει αλλάξει αυτόν τον κώδικα με σταδιακό τρόπο, προσθέτοντας έναν τύπο σχολιασμού άτομο: χορδή στον ορισμό της συνάρτησης, τη μεταγλώττιση, τον έλεγχο τύπου ελέγχου από τον μεταγλωττιστή, προσθέτοντας μια διεπαφή για ένα πρόσωπο πληκτρολογήστε και τέλος προσθέτοντας μια τάξη για Μαθητης σχολειου. Ο τελικός κωδικός είναι:
μαθητής τάξης { fullName: string;
Κατασκευαστής (public firstName: string, public middle
δημόσια επώνυμο: συμβολοσειρά) {
this.fullName = firstName + "" + middleInitial + "" + lastName;
}
}
Πρόσωπο διεπαφής {
firstName: string;
επώνυμο: string;
}
συνάδελφο (άτομο: Πρόσωπο) {
επιστρέψτε "Γεια," + person.firstName + "" + person.lastName;
}
let user = new Student ("Jane", "M.", "Χρήστης");
document.body.textContent = greeter (χρήστης);
Όταν το μεταγλωττίσετε και κοιτάξετε το εκπεμπόμενο JavaScript, θα δείτε ότι οι τάξεις στο TypeScript είναι απλά μια συντομογραφία για την ίδια κληρονομιά που βασίζεται σε πρωτότυπα που χρησιμοποιείται στο απλό JavaScript ES3. Σημειώστε ότι οι ιδιότητες person.firstName και person.lastName δημιουργούνται αυτόματα από τον μεταγλωττιστή όταν βλέπει τους δημόσιο χαρακτηριστικά στο Μαθητης σχολειου κατασκευαστής τάξης, και μεταφέρθηκε επίσης στο Πρόσωπο διεπαφή. Ένα από τα ωραιότερα οφέλη των σχολιασμών τύπου στο TypeScript είναι ότι αναγνωρίζονται από τα εργαλεία, όπως το Visual Studio Code:
Εάν υπάρχουν σφάλματα στον κώδικα καθώς επεξεργάζεστε στον κώδικα VS, θα δείτε τα μηνύματα σφάλματος στην καρτέλα Προβλήματα, για παράδειγμα τα ακόλουθα εάν διαγράψετε το τέλος της γραμμής με την παρουσία του Μαθητης σχολειου:
Ο οδηγός μετεγκατάστασης από JavaScript αναλύει λεπτομερώς τον τρόπο αναβάθμισης ενός υπάρχοντος έργου JavaScript. Παραλείποντας τα βήματα εγκατάστασης, η ουσία της μεθόδου είναι να μετονομάσετε τα αρχεία .js σε .ts ένα κάθε φορά. (Εάν το αρχείο σας χρησιμοποιεί JSX, μια επέκταση που χρησιμοποιείται από το React, θα πρέπει να το μετονομάσετε σε .tsx και όχι .ts.) Στη συνέχεια, σφίξτε τον έλεγχο σφαλμάτων και διορθώστε τα σφάλματα.
Μεταξύ άλλων, θα πρέπει να αλλάξετε τη λειτουργική μονάδα απαιτώ() ή καθορίζω() δηλώσεις σε δηλώσεις εισαγωγής TypeScript και προσθέστε αρχεία δήλωσης για τυχόν λειτουργικές μονάδες βιβλιοθήκης που χρησιμοποιείτε. Θα πρέπει επίσης να ξαναγράψετε τις εξαγωγές της μονάδας σας χρησιμοποιώντας το TypeScript εξαγωγή δήλωση. Το TypeScript υποστηρίζει μονάδες CommonJS, όπως το Node.js.
Εάν λάβετε σφάλματα σχετικά με τον λανθασμένο αριθμό ορισμάτων, μπορείτε να γράψετε υπογραφές υπερφόρτωσης συνάρτησης TypeScript. Αυτό είναι ένα σημαντικό χαρακτηριστικό που δεν διαθέτει JavaScript. Τέλος, θα πρέπει να προσθέσετε τύπους στις δικές σας λειτουργίες και, όπου απαιτείται, να χρησιμοποιήσετε διεπαφές ή τάξεις.
Συνήθως δεν χρειάζεται να γράψετε τα δικά σας αρχεία δήλωσης για βιβλιοθήκες JavaScript δημόσιου τομέα. Το DefinitelyTyped είναι ένα αποθετήριο αρχείων δήλωσης, όλα προσβάσιμα με τη χρήση npm. Μπορείτε να βρείτε τις δηλώσεις χρησιμοποιώντας τη σελίδα TypeSearch.
Μόλις μετατρέψετε όλα τα αρχεία JavaScript σε TypeScript, βελτιώσετε τους τύπους και εξαλείψετε τα σφάλματα, θα έχετε μια πολύ πιο ισχυρή βάση κώδικα. Αντί να διορθώνετε συνεχώς τα σφάλματα χρόνου εκτέλεσης που αναφέρθηκαν από υπεύθυνους δοκιμών ή χρήστες, θα μπορείτε να εντοπίσετε τα πιο συνηθισμένα σφάλματα στατικά.
Αξίζει να παρακολουθήσετε τον Anders Hejlsberg να συζητάει για το TypeScript. Όπως θα ακούσετε από αυτόν, το TypeScript είναι JavaScript που κλιμακώνεται.
