Το κλειδί για τη σαφήνεια του κώδικα

Το TypeScript enums είναι μια φράση που θα συναντήσετε πολλά όταν ασχολείστε με τη γλώσσα TypeScript.

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

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

Πίνακας περιεχομένων

Τι είναι τα TypeScript Enums;

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

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

Συνοπτικά, οι αριθμοί TypeScript είναι σημαντικοί με τους ακόλουθους τρόπους.

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

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

Διαφορετικοί αριθμοί στο TypeScript

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

Αυτοί είναι οι διαφορετικοί τύποι Enum στο TypeScript.

#1. Αριθμητικά αριθμοί

Πρέπει να χρησιμοποιήσετε τη λέξη-κλειδί ‘enum’ και να την ακολουθήσετε με το όνομα του enum που θέλετε να δημιουργήσετε. Μετά από αυτό, δημιουργείτε αγκύλες κάρυ που θα προσδιορίζουν τα μέλη του enum. Αυτό είναι ένα παράδειγμα αριθμητικού αριθμού.

enum CardinalDirections {
  North = 5,
  East,
  South,
  West,
};

Το παραπάνω αντιπροσωπεύει έναν αριθμό που ονομάζεται CardinalDirections που έχει τέσσερα μέλη. Σε αυτήν την περίπτωση, μπορούν να υπάρχουν μόνο τέσσερις τιμές (Βορράς, Ανατολή, Νότος και Δύση), καθιστώντας το enum μια εξαιρετική επιλογή για τη διατήρηση δεδομένων.

12 καλύτεροι έξυπνοι θερμοστάτες για το γλυκό σπίτι σας🏡

Έχω εκχωρήσει το CardinalDirections.North τιμή 5. Ωστόσο, δεν έχω εκχωρήσει τις άλλες τιμές γιατί το TypeScript θα κάνει τα υπόλοιπα αυτόματα. Για παράδειγμα, η τιμή για το CardinalDirections.East θα είναι 6 καθώς το TypeScript αυξάνει την προηγούμενη τιμή κατά 1.

Το CardinalDirections.West θα είναι 8.

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

enum CardinalDirections {
  North,
  East,
  South,
  West,
};

Το TypeScript θα εκχωρήσει αυτόματα την τιμή North 0. Εάν πληκτρολογήσετε κάτι όπως το CardinalDirections.West, θα λάβετε 3

#2. Αριθμοί συμβολοσειρών

Κάθε μέλος σε μια συμβολοσειρά enum πρέπει να αρχικοποιηθεί με ένα άλλο μέλος enum συμβολοσειράς ή ένα string literal. Αυτό είναι ένα παράδειγμα συμβολοσειράς enum.

enum Direction {
  Up = "UP",
  Down = "DOWN",
  Left = "LEFT",
  Right = "RIGHT",
}

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

enum Direction {
  Up = "UP",
  Down = "DOWN",
  Left = "LEFT",
  Right = "RIGHT",
}
console.log(Direction.Right)

Αυτό είναι που παίρνετε.

“ΣΩΣΤΑ”

#3. Ετερογενείς αριθμοί

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

enum HeterogeneousEnum {
  No = 0,
  Yes = "YES",
}

#4. Σταθερά και υπολογισμένα μέλη του αριθμού

Τα μέλη Enum έχουν τιμές που σχετίζονται με αυτά, οι οποίες μπορεί να είναι «σταθερές» ή «υπολογισμένες».

Αυτό είναι ένα παράδειγμα σταθερού αριθμού.

enum E1 {
  X,
  Y,
  Z,
}

Σε αυτήν την περίπτωση, το πρώτο μέλος του enum δεν έχει αρχικοποιητή και το TypeScript του εκχωρεί τιμή 0.

Μπορείτε επίσης να εξετάσετε αυτό το παράδειγμα.

enum E1 {
  X=1,
  Y,
  Z,
}

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

Οι υπολογισμένοι αριθμοί συνδυάζουν σταθερά και υπολογισμένα μέλη. Ελέγξτε αυτό το παράδειγμα.

enum Color {
  Red = 100,
  Green = (Math.random() * 100),
  Blue = 200
}

Το μέλος Enum “Blue” είναι σταθερό μέλος. Από την άλλη πλευρά, το μέλος enum “Green” είναι ένα enum που υπολογίζεται με τη συνάρτηση Math.random() κατά το χρόνο εκτέλεσης.

#5. Const enums

const enums χρησιμοποιούνται για την ενίσχυση της απόδοσης των αριθμητικών enums. Σε αυτή την περίπτωση, δηλώνουμε το enum ως const.

Γιατί οι άνθρωποι εξακολουθούν να αγοράζουν τηλέφωνα με δυνατότητες το 2020

Σκεφτείτε αυτόν τον κωδικό που δείχνει τις ημέρες της εβδομάδας.

enum Weekday {
  Monday = 1,
  Tuesday,
  Wednesday,
  Thursday,
  Friday
}

Εάν τρέξουμε το console.log(Weekday.Thursday), λαμβάνουμε την απάντησή μας ως 4. Ωστόσο, εάν ελέγξουμε τη JavaScript που δημιουργήθηκε κατά τη στιγμή της μεταγλώττισης, θα λάβουμε αυτό.

"use strict";
var Weekday;
(function (Weekday) {
    Weekday[Weekday["Monday"] = 1] = "Monday";
    Weekday[Weekday["Tuesday"] = 2] = "Tuesday";
    Weekday[Weekday["Wednesday"] = 3] = "Wednesday";
    Weekday[Weekday["Thursday"] = 4] = "Thursday";
    Weekday[Weekday["Friday"] = 5] = "Friday";
})(Weekday || (Weekday = {}));
console.log(Weekday.Thursday);

Μπορούμε να αλλάξουμε αυτόν τον κωδικό και να δηλώσουμε “Weekday” ως σταθερά.

const enum Weekday {
  Monday = 1,
  Tuesday,
  Wednesday,
  Thursday,
  Friday
}

Εάν τρέξουμε αυτόν τον κώδικα console.log(Weekday.Thursday), το JavaScript που θα δημιουργηθεί κατά τη στιγμή της μεταγλώττισης θα είναι:

"use strict";
console.log(4 /* Weekday.Thursday */);

Μπορείτε να δείτε ότι ο κώδικας JavaScript τη στιγμή της μεταγλώττισης είναι βελτιστοποιημένος όταν δηλώνετε το enum σας ως const.

#6. Ambient enums

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

declare enum Color {
  Red,
  Green,
  Blue
}

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

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

enum Direction {
  North="N",
  East="E",
  South="S",
  West="W",
};

Αυτές είναι μερικές περιπτώσεις χρήσης.

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

console.log(Direction.North); // Έξοδοι: ‘N’

Χρήση μελών enum: Μπορείτε να επιλέξετε ένα συγκεκριμένο μέλος enum για να αντιπροσωπεύει μια συγκεκριμένη κατεύθυνση. Για παράδειγμα,

const currentDirection = Direction.East;
console.log(`The current direction is ${currentDirection}`);

Αυτό θα δώσει αυτήν την έξοδο “Η τρέχουσα κατεύθυνση είναι Ε”

Enums έναντι χάρτες αντικειμένων στο TypeScript

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

enum Color {
  Red,
  Green,
  Blue,
}

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

const colors = {
  red: "FF0000",
  green: "00FF00",
  blue: "0000FF",
};

Οι κύριες διαφορές μεταξύ των αριθμών και των χαρτών αντικειμένων στο TypeScript είναι:

Τα enum είναι αυστηρά πληκτρολογημένα, ενώ οι χάρτες αντικειμένων όχι
Τα Enums είναι “Τύπος”, ενώ οι χάρτες αντικειμένων είναι μια δομή δεδομένων
Τα Enums δεν είναι ευέλικτα, ενώ οι χάρτες αντικειμένων είναι ευέλικτοι

Πώς να πληκτρολογείτε πιο γρήγορα email στο Gmail

Βέλτιστες πρακτικές χρήσης Enums στο TypeScript

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

Να γράφετε κεφαλαία τα ονόματα enum: Να γράφετε πάντα με κεφαλαία την πρώτη λέξη όταν ονομάζετε ένα enum. Για παράδειγμα, είναι πάντα σκόπιμο να έχετε έναν αριθμό «Αριθμός» αντί για «αριθμός».
Χρήση αριθμών για σταθερές: Τα Enum χρησιμοποιούνται καλύτερα για τη δήλωση ενός σταθερού συνόλου σχετικών στοιχείων. Για παράδειγμα, μπορεί να υπάρχουν μόνο 7 ημέρες την εβδομάδα. Τα μέλη enum δεν πρέπει ποτέ να αλλάζουν κατά την εκτέλεση.
Αποφύγετε την υπερβολική χρήση των enums: Μπορεί να έχετε μόλις μάθει μια νέα έννοια και να θέλετε να τη χρησιμοποιήσετε σχεδόν παντού στο έργο TypeScript. Ωστόσο, χρησιμοποιείτε πάντα τους αριθμούς TypeScript με μέτρο. Οι αριθμοί TypeScript είναι μια καλή επιλογή όταν θέλετε να διατηρήσετε την αναγνωσιμότητα του κώδικα.
Θεωρήστε τα enums ως enums: Μπορείτε να χρησιμοποιήσετε τα enums TypeScript για διαφορετικούς σκοπούς. Ωστόσο, η καλύτερη επιλογή είναι να τα χρησιμοποιήσετε για να αντιπροσωπεύσετε μόνο αριθμούς και όχι άλλες δομές δεδομένων.
Αποφύγετε τους αυτόματους αριθμούς: Το TypeScript εκχωρεί τιμές στα μέλη του αριθμού αν δεν τα εκχωρήσετε ρητά. Δώστε στα enums σας τιμές και αποφύγετε την απροσδόκητη συμπεριφορά όταν εκτελείτε τον κώδικά σας.
Αριθμοί εγγράφων: Πάντα τεκμηριώνετε ή σχολιάζετε τον κώδικά σας εάν σκοπεύετε να καταναλωθεί από το ευρύ κοινό. Εξηγήστε τι κάνει κάθε enum και γιατί είναι η καλύτερη περίπτωση χρήσης.

Μπορείτε επίσης να εξερευνήσετε κορυφαίες βιβλιοθήκες TypeScript και χρόνο εκτέλεσης για να γνωρίζετε ως προγραμματιστής.

συμπέρασμα

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

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

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