Τρόπος εγκατάστασης και έναρξης χρήσης του TypeScript

Το TypeScript είναι ένα από τα τρέχοντα καυτά θέματα στην ανάπτυξη ιστού και για καλό λόγο.

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

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

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

Επίσης, αυτό το άρθρο προϋποθέτει ότι έχετε μια βασική κατανόηση του προγραμματισμού JavaScript.

Έτσι, τώρα είμαστε έτοιμοι να ξεκινήσουμε με το TypeScript και να αρχίσουμε να χρησιμοποιούμε τις εκπληκτικές του δυνατότητες.

Ας σκάψουμε!

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

Υπάρχουν δύο βασικοί τρόποι εγκατάστασης του TypeScript. Το πρώτο είναι μέσω του Visual Studio (να μην συγχέεται με το Visual Studio Code) που είναι ένα IDE. Οι εκδόσεις 2015, 2017 και πιστεύω ότι οι εκδόσεις του 2019 έχουν ήδη εγκατεστημένο το TypeScript.

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

Ο δεύτερος τρόπος και ο τρόπος με τον οποίο θα επικεντρωθούμε είναι μέσω του NPM (Node Package Manager).

Εάν δεν έχετε ήδη εγκατεστημένο NPM ή / και κόμβο (λαμβάνετε NPM όταν εγκαθιστάτε τον κόμβο), τώρα είναι η κατάλληλη στιγμή για να το κάνετε, καθώς είναι απαίτηση για τα επόμενα βήματα (και συσχετίζοντας την απαίτηση χρήσης TypeScript).

Μόλις εγκαταστήσετε το Node και το NPM, ανοίξτε το τερματικό σας στον κώδικα VS και εκτελέστε την ακόλουθη εντολή:

npm install -g typescript

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

Αυτό είναι ό, τι χρειάζεστε για να ξεκινήσετε τη σύνταξη TypeScript σε JavaScript.

Τώρα είστε έτοιμοι να αρχίσετε να γράφετε TypeScript!

Έναρξη έργου TypeScript

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

Στο πρόγραμμα επεξεργασίας της επιλογής σας (χρησιμοποιώ VS Code) ας δημιουργήσουμε ένα αρχείο HTML για να είμαστε η οπτική πλευρά του κώδικα μας. Δείτε πώς φαίνεται το βασικό αρχείο HTML:

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

Θα παρατηρήσετε ότι έχω app.jsσυνδέσει στο κεφάλι του index.htmlαρχείου μας .

Πιθανότατα λέτε στον εαυτό σας ότι σκέφτηκα ότι ήταν ένα άρθρο για το TypeScript;

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

Παρακάτω θα δείτε μια απλή δήλωση μεταβλητής και μια δήλωση καταγραφής κονσόλας:

Ως δευτερεύουσα σημείωση, εάν θέλετε να απενεργοποιήσετε ορισμένους κανόνες ES-Lint, μπορείτε να τοποθετήσετε τους κανόνες στην κορυφή σε σχόλια όπως έχω κάνει παραπάνω. Ή εάν θέλετε να απενεργοποιήσετε εντελώς το ES-Lint για αυτό το αρχείο μόνο μπορείτε να το τοποθετήσετε /* eslint-disable */στην κορυφή του αρχείου.

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

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

Τώρα, userNameείναι ένας αριθμός :(

Και εδώ είναι η κονσόλα του προγράμματος περιήγησης που δείχνει τις αλλαγές σε userNameαυτό που πιθανότατα δεν θα θέλαμε να συμβούν αν πρόκειται για εφαρμογή παραγωγής:

Τι γίνεται αν το επιστραφέν userNameμεταφερθεί στη συνέχεια σε άλλη συνάρτηση ή χρησιμοποιηθεί ως κομμάτι ενός μεγαλύτερου παζλ δεδομένων;

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

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

Θα app.tsονομάσω το δικό μου για να παραμείνω συνεπής με τις συμβάσεις ονομασίας και θα βάλω τον ίδιο κωδικό από το αρχείο JavaScript στο νέο αρχείο TypeScript.

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

Θα παρατηρήσετε επίσης ότι έχω κάτω από μια γραμμή σφάλματος userNameκατά την εκχώρηση της αξίας της.

Σύνταξη TypeScript με το CLI

Για να δούμε πώς φαίνεται στην κονσόλα μας, πρέπει να το μεταγλωττίσουμε σε JavaScript. Το κάνουμε αυτό τρέχοντας tsc app.tsστην κονσόλα κώδικα VS (μπορείτε επίσης να εκτελέσετε την ίδια εντολή σε οποιοδήποτε τερματικό εφόσον βρίσκεστε στον σωστό κατάλογο).

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

Εδώ app.jsπροήλθε αυτό το αρχείο από αυτό που ανέφερα νωρίτερα στο άρθρο.

Για να συντάξετε πολλά αρχεία ταυτόχρονα, απλώς δώστε αυτά τα ονόματα στην εντολή σας, το ένα μετά το άλλο: tsc app.ts header.component.ts

Είναι επίσης δυνατό να μεταγλωττίσετε πολλά αρχεία TypeScript σε ένα αρχείο JavaScript προσθέτοντας τη --outσημαία:

tsc *.ts --out index.js

Υπάρχει επίσης μια εντολή ρολογιού που θα μεταγλωττίζει εκ νέου το TypeScript αυτόματα κάθε φορά που εντοπίζεται μια αλλαγή Αυτό σας εμποδίζει να εκτελείτε την ίδια εντολή ξανά και ξανά:

tsc *.ts --out app.js --watch

Εδώ είναι η έξοδος από αυτήν την tsc app.tsπαραπάνω εντολή:

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

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

Χρήση ρητώς δηλωτικών συστοιχιών και αντικειμένων

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

Θα περιμένω μια συγκεκριμένη μορφή για τις πληροφορίες που είναι αποθηκευμένες, ώστε να είναι συνεπής σε όλους τους συνδέσμους.

Δείτε πώς μπορώ να ορίσω έναν "σύνθετο" πίνακα στο TypeScript:

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

Λέμε στο TypeScript ότι περιμένουμε ότι αυτός ο πίνακας περιέχει ένα αντικείμενο ή αντικείμενα με αυτά τα ονόματα και τύπους ιδιοτήτων. Περιμένουμε μια nameπου είναι μια συμβολοσειρά, μια linkπου είναι μια συμβολοσειρά και μια altπου είναι επίσης μια συμβολοσειρά.

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

Εδώ προσπαθήσαμε να προσθέσουμε μια νέα καταχώριση που ήταν κενή και λάβαμε το ακόλουθο σφάλμα:

Type '{}' is missing the following properties from type '{ name: string; link: string; alt: string; }' : name, link, alt ts(2739)

Λαμβάνουμε παρόμοια σφάλματα εάν προσπαθήσουμε να προσθέσουμε άλλη καταχώριση με λάθος τύπο πληροφοριών:

{ name: 'Jonathan', link: 15, alt: false }  ❌

{ name: ['Jon','Marley'], link: `//link123.net`, alt: null }  ❌

this.navLinks[0].img = '../../assets/img'

this.navLinks[0].name = 'Barnaby'✔️

Παίρνετε όμως την ιδέα. Μόλις καθορίσουμε τη μορφή, το TypeScript θα μας κρατήσει σε αυτήν τη μορφή και θα μας ενημερώσει εάν / όταν παρεκκλίνουμε από αυτήν με σφάλμα.

Επίσης, εδώ είναι μερικοί τρόποι για να ορίσετε έναν πίνακα:

const arr1: Array = ['Dave', 35, true]; // θα μας επιτρέψει να έχουμε οποιοδήποτε αριθμό στοιχείων με οποιοδήποτε τύπο

const people: [string,string,string] = ['John', 'Sammy', 'Stephanie'];// θα εμφανίσει ένα σφάλμα εάν εμφανιστούν περισσότερες από 3 συμβολοσειρές ή οποιαδήποτε στοιχεία μη συμβολοσειρών στον πίνακα

const people: Array = ['Jimmy', 'Theresa', 'Stanley'];// θα μας επιτρέψει να έχουμε έναν αριθμό μόνο στοιχείων συμβολοσειράς στον πίνακα μας

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

const person: {name:string, address: string, age: number} = {name: 'Willy', address: '123 Sunshine Ln', age: 35}

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

Είναι σημαντικό να σημειωθεί ότι σε αντικείμενα, η σειρά στην οποία ορίζουμε τις ιδιότητές μας δεν πρέπει να ταιριάζει με τη σειρά της μορφής:

Λειτουργίες, παράμετροι και επιχειρήματα

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

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

Κατά τη χρήση του TypeScript δεν θα είναι επειδή δεν λάβατε / στείλετε τον σωστό τύπο δεδομένων ή χρησιμοποιήσατε τον σωστό αριθμό παραμέτρων / ορίσματα.

Εδώ είναι ένα εξαιρετικό παράδειγμα:

Στη λειτουργία μας αναμένουμε να λάβουμε 3 ορίσματα όταν calculatorεκτελείται. Ωστόσο, εάν λάβουμε λάθος αριθμό ορισμάτων (πάρα πολύ λίγα ή πάρα πολλά), το TypeScript θα μας δώσει ένα ωραίο σφάλμα:

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

calculator('12', '11', 'add) ;

Τώρα μπορεί να λέτε στον εαυτό σας «Λοιπόν τι; Όλα αυτά είναι καλά και καλά, αλλά δεν φαίνεται ότι είναι τεράστια συμφωνία. " Αλλά φανταστείτε ότι η εφαρμογή σας είναι δεκάδες και δεκάδες αρχεία με πολλά επίπεδα αφαιρέσεων.

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

Αυτό είναι όλο

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

Μπορείτε να βρείτε αυτό το άρθρο και άλλους αρέσει στο blog μου. Θα ήθελα πολύ να σταματήσεις!

Ενώ βρίσκεστε εκεί, γιατί να μην εγγραφείτε στο Newsletter μου  - μπορείτε να το κάνετε στην επάνω δεξιά γωνία της κύριας σελίδας ιστολογίου. Υπόσχομαι ότι δεν θα ανεβάσω ποτέ τα εισερχόμενά σας και τα στοιχεία σας δεν θα κοινοποιηθούν σε κανέναν / ιστότοπο. Μου αρέσει να στέλνω περιστασιακά ενδιαφέροντες πόρους που βρίσκω, άρθρα σχετικά με την ανάπτυξη ιστού και μια λίστα με τις νεότερες δημοσιεύσεις μου.

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

Έχετε μια φοβερή μέρα, φίλο και χαρούμενη κωδικοποίηση!