Το Dynamic Duo για Web Dev

Η TypeScript ανοίγει το δρόμο της ως μία από τις πιο δημοφιλείς γλώσσες προγραμματισμού για σύγχρονους οργανισμούς.

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

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

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

TypeScript με Node.js: Οφέλη

  • Προαιρετική στατική πληκτρολόγηση: Η JavaScript πληκτρολογείται δυναμικά, που σημαίνει ότι ο τύπος δεδομένων μιας μεταβλητής καθορίζεται κατά το χρόνο εκτέλεσης και όχι κατά τη διάρκεια του χρόνου μεταγλώττισης. Από την άλλη πλευρά, το TypeScript προσφέρει προαιρετική στατική πληκτρολόγηση, που σημαίνει ότι μόλις δηλώσετε μια μεταβλητή, δεν θα αλλάξει τον τύπο της και θα λάβει μόνο ορισμένες τιμές.
  • Προβλεψιμότητα: Όταν ασχολείστε με το TypeScript, υπάρχει διαβεβαίωση ότι όλα όσα ορίζετε θα παραμείνουν ίδια. Για παράδειγμα, εάν δηλώσετε μια συγκεκριμένη μεταβλητή ως Boolean, δεν μπορεί ποτέ να αλλάξει σε μια συμβολοσειρά στην πορεία. Ως προγραμματιστής, είστε βέβαιοι ότι οι λειτουργίες σας θα παραμείνουν οι ίδιες.
  • Εύκολος εντοπισμός σφαλμάτων έγκαιρα: Το TypeScript εντοπίζει νωρίς τα περισσότερα σφάλματα τύπου, επομένως η πιθανότητα μετάβασης στην παραγωγή είναι χαμηλή. Αυτό μειώνει τον χρόνο που ξοδεύουν οι μηχανικοί δοκιμάζοντας τον κώδικα σε μεταγενέστερα στάδια.
  • Υποστηρίζεται στα περισσότερα IDE: Το TypeScript λειτουργεί με τα περισσότερα ολοκληρωμένα περιβάλλοντα ανάπτυξης (IDE). Τα περισσότερα από αυτά τα IDE παρέχουν συμπλήρωση κώδικα και επισήμανση σύνταξης. Αυτό το άρθρο θα χρησιμοποιήσει τον κώδικα του Visual Studio, ένα άλλο προϊόν της Microsoft.
  • Εύκολη αναμόρφωση κώδικα: Μπορείτε να ενημερώσετε ή να αναδιαμορφώσετε την εφαρμογή TypeScript χωρίς να αλλάξετε τη συμπεριφορά της. Η παρουσία εργαλείων πλοήγησης και το IDE που κατανοεί τον κώδικά σας καθιστά εύκολη την αναπαράσταση της βάσης κωδικών χωρίς κόπο.
  • Χρησιμοποιεί υπάρχοντα πακέτα: Δεν χρειάζεται να δημιουργήσετε τα πάντα από την αρχή. μπορείτε να χρησιμοποιήσετε υπάρχοντα πακέτα NPM με TypeScript. Αυτή η γλώσσα έχει επίσης μια ισχυρή κοινότητα που διατηρεί και δημιουργεί ορισμούς τύπων για δημοφιλή πακέτα.
  Ειδήσεις Google Συμβουλές SEO για την ενίσχυση της προβολής του ιστότοπου

Πώς να χρησιμοποιήσετε το TypeScript με το Node.js

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

Προαπαιτούμενα

  • Node.js: Το Node είναι ένα περιβάλλον χρόνου εκτέλεσης πολλαπλών πλατφορμών που επιτρέπει την εκτέλεση κώδικα JavaScript εκτός περιβάλλοντος προγράμματος περιήγησης. Μπορείτε να ελέγξετε εάν ο κόμβος είναι εγκατεστημένος στον υπολογιστή σας χρησιμοποιώντας αυτήν την εντολή.

κόμβος -v

Διαφορετικά, μπορείτε να κάνετε λήψη του Node.js από τον επίσημο ιστότοπο. Εκτελέστε ξανά την παραπάνω εντολή μετά την εγκατάσταση για να ελέγξετε αν έχει ρυθμιστεί σωστά.

  • A Node Package Manager: Μπορείτε να χρησιμοποιήσετε NPM ή Yarn. Το πρώτο εγκαθίσταται από προεπιλογή κατά την εγκατάσταση του Node.js. Θα χρησιμοποιήσουμε το NPM ως διαχειριστή πακέτων σε αυτό το άρθρο. Χρησιμοποιήστε αυτήν την εντολή για να ελέγξετε την τρέχουσα έκδοσή της.

npm -v

Εγκατάσταση TypeScript με το Node.js

Βήμα 1: Ρυθμίστε έναν φάκελο έργου

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

mkdir γραφομηχανή-κόμβος

cd γραφομηχανή-κόμβος

Βήμα 2: Αρχικοποιήστε το έργο

Χρησιμοποιήστε το npm για να αρχικοποιήσετε το έργο σας χρησιμοποιώντας αυτήν την εντολή.

npm init -y

Η παραπάνω εντολή θα δημιουργήσει ένα αρχείο package.json. Η σημαία -y στην εντολή λέει στο npm να περιλαμβάνει προεπιλογές. Το αρχείο που δημιουργείται θα έχει παρόμοια έξοδο.

{

  "name": "typescript-node",

  "version": "1.0.0",

  "description": "",

  "main": "index.js",

  "scripts": {

    "test": "echo "Error: no test specified" && exit 1"

  },

  "keywords": [],

  "author": "",

  "license": "ISC"

}

Διαμόρφωση TypeScript με το Node.js

Βήμα 1: Εγκαταστήστε τον μεταγλωττιστή TypeScript

Τώρα μπορείτε να εγκαταστήσετε τον μεταγλωττιστή TypeScript στο έργο σας. Εκτελέστε αυτήν την εντολή.

npm install –save-dev typescript

Η έξοδος στη γραμμή εντολών σας θα είναι κάτι παρόμοιο με αυτό.

added 1 package, and audited 2 packages in 26s

found 0 vulnerabilities

Σημείωση: Η παραπάνω προσέγγιση εγκαθιστά το TypeScript τοπικά στο φάκελο του έργου στον οποίο εργάζεστε. Μπορείτε να εγκαταστήσετε το TypeScript παγκοσμίως στο σύστημά σας, ώστε να μην χρειάζεται να το εγκαθιστάτε κάθε φορά που εργάζεστε σε ένα έργο. Χρησιμοποιήστε αυτήν την εντολή για να εγκαταστήσετε το TypeScript παγκοσμίως.

npm install -g typescript

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

tsc -v

Βήμα 2: Προσθέστε τύπους Ambient Node.js για TypeScript

  Πώς να μετρήσετε τα επίπεδα οξυγόνου στο αίμα σας με το Apple Watch σας

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

npm εγκατάσταση @types/node –save-dev

Βήμα 3: Δημιουργήστε ένα αρχείο tsconfig.json

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

npx tsc --init --rootDir src --outDir build 

--esModuleInterop --resolveJsonModule --lib es6 

--module commonjs --allowJs true --noImplicitAny true

Αυτό θα βγει στο τερματικό.

Θα δημιουργηθεί το αρχείο tsconfig.json, το οποίο περιέχει ορισμένες προεπιλογές και σχόλια.

αρχείο tsconfig.json

Αυτό είναι αυτό που έχουμε διαμορφώσει:

  • Το rootDir είναι όπου το TypeScript θα αναζητήσει τον κώδικά μας. Το έχουμε κατευθύνει στο φάκελο /src όπου θα γράψουμε τον κώδικα μας.
  • Ο φάκελος outDir ορίζει πού τοποθετείται ο μεταγλωττισμένος κώδικας. Αυτός ο κώδικας έχει ρυθμιστεί ώστε να αποθηκεύεται στο build/folder.

Χρήση TypeScript με το Node.js

Βήμα 1: Δημιουργήστε φάκελο src και αρχείο index.ts

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

mkdir src

αγγίξτε src/index.ts

Βήμα 2: Προσθήκη κώδικα στο αρχείο TypeScript (index.ts)

Μπορείτε να ξεκινήσετε με κάτι απλό όπως?

console.log('Hello world!')

Βήμα 3: Μεταγλώττιση κώδικα TypeScript σε κώδικα JavaScript

Εκτελέστε αυτήν την εντολή.

npx tsc

Μπορείτε να ελέγξετε το φάκελο κατασκευής (build/index.js) και θα δείτε ότι έχει δημιουργηθεί ένα index.js με αυτήν την έξοδο.

Το TypeScript έχει μεταγλωττιστεί σε κώδικα JavaScript.

Βήμα 4: Εκτελέστε τον μεταγλωττισμένο κώδικα JavaScript

Να θυμάστε ότι ο κώδικας TypeScript δεν μπορεί να εκτελεστεί σε προγράμματα περιήγησης. Θα εκτελέσουμε έτσι τον κώδικα στο index.js στο φάκελο build. Εκτελέστε αυτήν την εντολή.

node build/index.js

Αυτή θα είναι η έξοδος.

Βήμα 5: Διαμορφώστε το TypeScript για αυτόματη μεταγλώττιση σε κώδικα JavaScript

Η μεταγλώττιση του κώδικα TypeScript με μη αυτόματο τρόπο κάθε φορά που αλλάζετε τα αρχεία TypeScript μπορεί να χάσει χρόνο. Μπορείτε να εγκαταστήσετε το ts-node (εκτελεί απευθείας τον κώδικα TypeScript χωρίς να περιμένει να μεταγλωττιστεί) και το nodemon (ελέγχει τον κώδικά σας για αλλαγές και επανεκκινεί αυτόματα τον διακομιστή).

  Μετατροπή βίντεο για προβολή πολλαπλών πλατφορμών: Wondershare Video Converter [Review]

Εκτελέστε αυτήν την εντολή.

npm install --save-dev ts-node nodemon

Στη συνέχεια, μπορείτε να μεταβείτε στο αρχείο package.json και να προσθέσετε αυτό το σενάριο.

"scripts": {

   "start": "ts-node ./src/index.ts"

}

Μπορούμε να χρησιμοποιήσουμε ένα νέο μπλοκ κώδικα για σκοπούς επίδειξης.

function sum (num1:number, num2:number, num3:number){

    return num1 + num2 +num3;

}

console.log(sum(10,15,30))

Διαγράψτε το αρχείο index.js (/build/index.js) και εκτελέστε το npm start.

Η έξοδος σας θα είναι παρόμοια με αυτήν.

άθροισμα 3 αριθμών

Διαμόρφωση TypeScript Linting με eslint

Βήμα 1: Εγκαταστήστε το eslint

Το linting μπορεί να είναι χρήσιμο εάν θέλετε να διατηρήσετε τη συνοχή του κώδικα και να εντοπίσετε σφάλματα πριν από το χρόνο εκτέλεσης. Εγκαταστήστε το eslint χρησιμοποιώντας αυτήν την εντολή.

npm install --save-dev eslint

Βήμα 2: Αρχικοποιήστε το eslint

Μπορείτε να αρχικοποιήσετε το eslint χρησιμοποιώντας αυτήν την εντολή.

npx eslint --init

Η διαδικασία προετοιμασίας θα σας οδηγήσει σε πολλά βήματα. Χρησιμοποιήστε το παρακάτω στιγμιότυπο οθόνης για να σας καθοδηγήσει.

Μόλις ολοκληρωθεί η διαδικασία, θα δείτε ένα αρχείο με το όνομα .eslintrc.js με περιεχόμενο παρόμοιο με αυτό.

module.exports = {

  env: {

    browser: true,

    es2021: true

  },

  extends: 'standard-with-typescript',

  overrides: [

  ],

  parserOptions: {

    ecmaVersion: 'latest',

    sourceType: 'module'

  },

  rules: {

  }

}

Βήμα 3: Εκτελέστε το eslint

Εκτελέστε αυτήν την εντολή για να ελέγξετε και να καλύψετε όλα τα αρχεία με την επέκταση .ts.

npx eslint . --ext .ts

Βήμα 4: Ενημερώστε το package.json

Προσθέστε ένα σενάριο lint σε αυτό το αρχείο για αυτόματο λιντάζ.

"scripts": {

    "lint": "eslint . --ext .ts",

  },

TypeScript με Node.js: Βέλτιστες πρακτικές

  • Διατηρήστε το TypeScript ενημερωμένο: Οι προγραμματιστές του TypeScript κυκλοφορούν πάντα νέες εκδόσεις. Βεβαιωθείτε ότι έχετε εγκαταστήσει την πιο πρόσφατη έκδοση στον φάκελο του μηχανήματος/του έργου σας και επωφεληθείτε από τις νέες δυνατότητες και τις διορθώσεις σφαλμάτων.
  • Ενεργοποίηση αυστηρής λειτουργίας: Μπορείτε να εντοπίσετε τα συνηθισμένα σφάλματα προγραμματισμού κατά τη στιγμή της μεταγλώττισης όταν ενεργοποιείτε την αυστηρή λειτουργία στο αρχείο tsconfig.json. Αυτό θα μειώσει τον χρόνο εντοπισμού σφαλμάτων, οδηγώντας σε μεγαλύτερη παραγωγικότητα.
  • Ενεργοποίηση αυστηρών μηδενικών ελέγχων: Μπορείτε να συλλάβετε όλα τα μηδενικά και ακαθόριστα σφάλματα κατά τη στιγμή της μεταγλώττισης, ενεργοποιώντας αυστηρούς μηδενικούς ελέγχους στο αρχείο tsconfig.json.
  • Χρησιμοποιήστε ένα πρόγραμμα επεξεργασίας κώδικα που υποστηρίζει TypeScript: Υπάρχουν πολλά προγράμματα επεξεργασίας κώδικα. Μια καλή πρακτική είναι να επιλέγετε προγράμματα επεξεργασίας κώδικα όπως VS Code, Sublime Text ή Atom που υποστηρίζουν TypeScript μέσω προσθηκών.
  • Χρήση τύπων και διεπαφών: Με τύπους και διεπαφές, μπορείτε να ορίσετε προσαρμοσμένους τύπους που μπορείτε να χρησιμοποιήσετε ξανά σε ολόκληρο το έργο σας. Μια τέτοια προσέγγιση θα κάνει τον κώδικά σας πιο αρθρωτό και εύκολο στη συντήρηση.

Τυλίγοντας

Τώρα έχετε τη βασική δομή μιας εφαρμογής που δημιουργήθηκε με TypeScript στο Node.js. Τώρα μπορείτε να χρησιμοποιήσετε τα κανονικά πακέτα Node.js, αλλά παρόλα αυτά, γράψτε τον κώδικά σας στο TypeScript και απολαύστε όλες τις επιπλέον δυνατότητες που συνοδεύουν το τελευταίο.

Εάν μόλις ξεκινάτε με το TypeScript, βεβαιωθείτε ότι κατανοείτε τις διαφορές μεταξύ TypeScript και JavaScript.