Typescript εναντίον Javascript – Κατανόηση της διαφοράς

Μία από τις συχνές ερωτήσεις που λαμβάνω είναι, ποια είναι η διαφορά μεταξύ JavaScript και Typescript;

Ας ανακαλύψουμε…

Από τη στιγμή που ξεκινήσατε την κωδικοποίηση, η JavaScript (JS) θα ήταν μέρος όλων των έργων σας στο front-end. Εάν είστε λίγο εξοικειωμένοι με το JS, σκεφτείτε το TypeScript ως JS καθώς και ορισμένες πρόσθετες δυνατότητες που κάνουν την εφαρμογή σας πιο καθαρή και δακτυλογραφημένη. Το typeScript αναπτύχθηκε ως έργο ανοιχτού κώδικα από τη Microsoft για να καταστήσει την ανάπτυξη JS πιο αποτελεσματική και να εντοπίσει τα σφάλματα μεταγλώττισης από νωρίς.

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

Τι είναι η JavaScript;

Η JavaScript χρησιμοποιείται για δέσμες ενεργειών από την πλευρά του πελάτη. Μπορείτε να δημιουργήσετε ένα σενάριο σε μια σελίδα HTML ή να δημιουργήσετε ένα αρχείο με επέκταση .js και να το συμπεριλάβετε στο αρχείο HTML σας. Ένα συνηθισμένο πραγματικό παράδειγμα όπου μπορείτε να δείτε JavaScript είναι η επικύρωση της σελίδας σύνδεσης, όπου εμφανίζεται ένα σφάλμα όταν το όνομα χρήστη/κωδικός πρόσβασης είναι λανθασμένο.

Ας γράψουμε έναν απλό κώδικα JS και ας τον εκτελέσουμε στο πρόγραμμα περιήγησης:

Δημιουργήστε ένα αρχείο example.html και προσθέστε τον ακόλουθο κώδικα:

<script>

feeling = 'happy';

feeling = 23;

</script>

Αυτός ο απλός κώδικας δηλώνει μια μεταβλητή και της εκχωρεί μια τιμή happy (string). Μπορούμε να αντιστοιχίσουμε μια τιμή διαφορετικού τύπου (αριθμός) στην ίδια μεταβλητή. Η JavaScript δεν θα παραπονεθεί γι’ αυτό και μπορούμε να εκτελέσουμε τον κώδικα σε οποιοδήποτε πρόγραμμα περιήγησης χωρίς προβλήματα. Τώρα, ας πάρουμε την αξία της αίσθησης από τον χρήστη:

  14 πρακτικές δοκιμές Azure που θα σας βοηθήσουν να περάσετε τις πραγματικές εξετάσεις

Το HTML μας θα μοιάζει με αυτό:

<input type = "textbox" id = "howyoufeel">

και το σενάριο θα είναι:

feeling = document.getElementById("howyoufeel").value;

Εάν δεν βάλουμε ρητούς ελέγχους στο σενάριο, η JS θα αποδεχτεί οποιαδήποτε τιμή από τον χρήστη και θα τη μεταβιβάσει. Έτσι, μπορείτε να βάλετε οτιδήποτε όπως 234, @.#$%, κ.λπ. στη μεταβλητή αίσθησης.

Χαρακτηριστικά της JavaScript

Από τα παραπάνω, μπορούμε να παρατηρήσουμε τα ακόλουθα χαρακτηριστικά της JavaScript:

  • Γλώσσα σεναρίου με αδύναμη πληκτρολόγηση
  • Χρησιμοποιείται για δέσμες ενεργειών από την πλευρά του πελάτη και του διακομιστή (με node.js).
  • Ευέλικτο και δυναμικό
  • Υποστηρίζεται από όλα τα μεγάλα προγράμματα περιήγησης
  • Ελαφρύ και ερμηνευμένο

Εάν ενδιαφέρεστε να κατέχετε τη JavaScript, ελέγξτε αυτό Μάθημα Udemy.

Τι είναι το TypeScript;

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

Το TypeScript πληκτρολογείται έντονα και έχει έναν μεταγλωττιστή που παραπονιέται εάν δεν ορίσετε τον τύπο μιας μεταβλητής.

Τόσο η JavaScript όσο και η TypeScript συμμορφώνονται με τις προδιαγραφές ECMAScript για μια γλώσσα δέσμης ενεργειών. Το Typescript μπορεί να εκτελέσει όλο τον κώδικα JavaScript και υποστηρίζει όλες τις βιβλιοθήκες του – γι’ αυτό ονομάζεται υπερσύνολο της JavaScript.

Εγκατάσταση TypeScript

Για να εκτελέσουμε τον προηγούμενο κώδικα στο TypeScript, πρέπει να εγκαταστήσουμε τον μεταγλωττιστή TypeScript χρησιμοποιώντας το πακέτο npm (αν έχετε κόμβο js).

npm install -g typescript

ή κατεβάστε το απευθείας από τον επίσημο Σελίδα λήψεων της Microsoft. Μπορείτε επίσης να χρησιμοποιήσετε το Παιδική χαρά TS για να δείτε πώς γίνεται η μεταγλώττιση του κώδικα από ts σε js.

  4 Εργαλεία για την εκτέλεση πειραμάτων δοκιμών SEO A/B

Μόλις γίνει αυτό, μπορείτε να διαμορφώσετε τις ρυθμίσεις του έργου στο tsconfig.json και να χρησιμοποιήσετε οποιοδήποτε IDE ή πρόγραμμα επεξεργασίας κειμένου για να γράψετε κώδικα TypeScript και να τον αποθηκεύσετε ως .ts.

Μπορείτε ακόμα να ξεφύγετε αν δεν ορίσετε τον τύπο της μεταβλητής και το TypeScript μπορεί να συμπεράνει τον τύπο δεδομένων. Ωστόσο, θα λάβετε ένα σφάλμα “αίσθησης” εάν δώσετε οτιδήποτε άλλο εκτός από τον πρώτο τύπο που χρησιμοποιήθηκε (στην περίπτωσή μας, μια συμβολοσειρά) – κατά τη διάρκεια της ίδιας της μεταγλώττισης.

Είναι πάντα προσεγμένο ο κώδικας να έχει έναν σχολιασμό τύπου για λόγους συντήρησης και ευκολίας χρήσης:

var feeling: string = “happy”;

Δεν είναι αυτό!

Το TypeScript παρέχει πολλές άλλες δυνατότητες για να διευκολύνει τη ζωή ενός προγραμματιστή.

Χαρακτηριστικά του TypeScript

Το Typescript έχει ένα πλούσιο σύνολο χαρακτηριστικών και κάθε κυκλοφορία συνοδεύεται από νέες δυνατότητες που κάνουν την ανάπτυξη ευκολότερη από πριν. Για παράδειγμα, με τη νέα έκδοση (4.0), κάποια πρόσθετα χαρακτηριστικά είναι ποικίλοι τύποι πλειάδας, προσαρμοσμένα εργοστάσια JSX, συμπεράσματα ιδιοτήτων κλάσης από κατασκευαστές κ.λπ. Μερικά τυπικά χαρακτηριστικά του TypeScript είναι:

  • Υποστηρίζει αντικειμενοστραφή έννοιες προγραμματισμού όπως διεπαφή, κληρονομικότητα, κλάση. γενόσημα
  • Έγκαιρη ανίχνευση σφαλμάτων
  • Υποστήριξη IDE με έλεγχο σύνταξης και προτάσεις
  • Πιο εύκολο στον εντοπισμό σφαλμάτων καθώς πληκτρολογείται
  • Μετα-μεταγλωττίζει σε JavaScript
  • Χρησιμοποιείται τόσο για εφαρμογές διακομιστή όσο και για εφαρμογές πελάτη
  • Υποστήριξη πολλαπλών πλατφορμών και πολλαπλών προγραμμάτων περιήγησης
  • Υποστηρίζει όλες τις βιβλιοθήκες και τις επεκτάσεις JS

Γιατί χρειαζόμαστε TypeScript; (Πλεονεκτήματα του TypeScript έναντι της JavaScript)

Η Microsoft ανέπτυξε και χρησιμοποίησε το TypeScript για δύο χρόνια για τα εσωτερικά της έργα προτού το δημοσιοποιήσει το 2012. Δημιούργησε μια δακτυλογραφημένη JavaScript επειδή ήταν ευκολότερο να δοκιμαστεί ο κώδικας για εταιρικές εφαρμογές ποιότητας παραγωγής. Μπορείτε ακόμα να χρησιμοποιήσετε τις δυνατότητες δυναμικής πληκτρολόγησης αλλά και να πληκτρολογήσετε τις μεταβλητές όταν είναι πραγματικά απαραίτητο.

  Τι είναι ο αριθμός καναλιού ATT ESPN;

Σκεφτείτε τον παρακάτω κώδικα:

var mynum  = //get from user;

addten(number){

return number + 10;

}

Θα περιμέναμε το αποτέλεσμα να είναι πάντα ένας αριθμός. Αλλά, τι γίνεται αν ένας χρήστης δίνει «πρόβατα»; Η έξοδος θα είναι sheep10 – ιδανικά, πρέπει να πούμε στον χρήστη ότι αυτή η λειτουργία δεν είναι δυνατή!

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

Αυτό σημαίνει ότι δεν χρειαζόμαστε JavaScript; (Μειονεκτήματα του TypeScript έναντι της JavaScript)

Μπορείτε να σκεφτείτε το TypeScript ως επέκταση της JavaScript, αλλά σίγουρα όχι ως αντικατάσταση.

Για μικρότερα κομμάτια κώδικα, το TypeScript μπορεί να γίνει επιβάρυνση – η εγκατάσταση, η μεταγλώττιση, η μετα-μεταγλώττιση θα είναι περιττές. Με το JavaScript, μπορείτε απλά να πληκτρολογήσετε το σενάριό σας σε HTML και θα λειτουργούσε. Είναι επίσης πιο εύκολο να διορθώσετε τον κώδικα όταν μπορείτε απλά να ανανεώνετε το πρόγραμμα περιήγησης κάθε φορά που αλλάζετε κάτι.

Σύγκριση κατά πρόσωπο

Τώρα που καταλάβαμε τις δυνατότητες και τα πλεονεκτήματα τόσο του TypeScript όσο και του JavaScript, ας προχωρήσουμε σε περισσότερες συγκρίσεις:

TypeScript
JavaScript
Μια πληκτρολογημένη γλώσσα που εντοπίζει λάθη μεταγλώττισης από νωρίς
Μπορείτε να ανακαλύψετε σφάλματα κατά τη διάρκεια του χρόνου εκτέλεσης
Κατάλληλο για μεγάλα έργα καθώς βελτιώνει τη συντηρησιμότητα και την αναγνωσιμότητα του κώδικα
Καθώς προστίθεται περισσότερος κώδικας, γίνεται δύσκολος ο έλεγχος και ο εντοπισμός σφαλμάτων, επομένως το JS είναι κατάλληλο για μικρά έργα
Υπερσύνολο JS, δηλαδή, χαρακτηριστικά όπως αντικειμενοστραφής, έλεγχος τύπου και άλλα
Μια γλώσσα δέσμης ενεργειών που υποστηρίζει τη δυναμική δημιουργία περιεχομένου Ιστού
Απαιτεί εγκατάσταση μεταγλωττιστή και ρύθμιση παραμέτρων
Δεν χρειάζεται καμία εγκατάσταση. Ο κώδικας JS μπορεί να γραφτεί απευθείας σε ένα πρόγραμμα περιήγησης χρησιμοποιώντας την ετικέτα , το αποθηκεύετε ως HTML – θα δείτε τα αποτελέσματα! Στη συνέχεια, μπορείτε να βασιστείτε σε αυτό για να δημιουργήσετε πιο δυναμικό περιεχόμενο.

Επιπλέον, όταν εργάζεστε σε μια μεγάλης κλίμακας εφαρμογή, η γνώση JavaScript θα σας βοηθήσει να μεταβείτε εύκολα στο TypeScript.

Ωστόσο, από άποψη καριέρας και αμοιβής, ως α Προγραμματιστής TypeScript, θα είστε πιο ευέλικτοι και άνετοι με τα έργα JS και TS – επομένως σίγουρα ένα καλύτερο πλεονέκτημα στην αγορά. Συνήθως, οι προγραμματιστές του TypeScript αμείβονται μεταξύ $110k-$147k, ενώ οι προγραμματιστές JS αμείβονται περίπου $63k-$118k ετησίως.