Τύποι Tuple

Πώς να πληκτρολογήσετε καλύτερα tuples στο Typescript 4.2 και μεταγενέστερες εκδόσεις

Μια πιο προσεκτική ματιά στις πλειάδες Typescript

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

Ένα απλό παράδειγμα δείχνει πώς ορίζονται οι πλειάδες στο Typescript.

// This tuple is defined as a set
// of two numbers.
const scores: [number, number] = [1, 2];

// For comparison, this tuple consists
// of three elements, each of a different
// type. Not that the ordered nature of
// tuples in TS becomes very clear here.
const result: [string, number, boolean] = ["id", 101, false];

// And as a "nice-to-know", you can even
// provide lables for the tuple elements.
// This doesn't have any effect on the typesystem
// itself and only (may) improve documentation.
const output: [id: number, name: string] = [101, "Tom"];

Καλύμματα με προαιρετικά στοιχεία

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

Ένα άλλο παράδειγμα δείχνει τι εννοώ με αυτό.

// Similar to our previous example, but in this
// case the the tuple's last element doesn't have
// to be provided (or can be undefined at runtime).
type Tuple = [id: number, name?: string];

const a: Tuple = [101];
const b: Tuple = [42, "Tom"];

Υπόλοιπα στοιχεία σε πλειάδες Typescript

Με στοιχεία ανάπαυσης, έχετε έναν πολύ ισχυρό τύπο στο χέρι που επισημαίνει όλα τα ακόλουθα στοιχεία στην πλειάδα ενός δεδομένου τύπου. Ας πούμε λοιπόν ότι έχετε μια πλειάδα με δύο στοιχεία και η δεύτερη ορίζεται ως στοιχείο ανάπαυσης, τότε μπορείτε να παρέχετε 2 + n στοιχεία κατά το χρόνο εκτέλεσης σε αυτήν τη μεταβλητή πλειάδας.

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

// This example might be a tuple type
// for a CLI similar to Node.js. The first
// two elements are system-internal.
//
// Starting from the 3rd element, a user can
// provide as much arguments as desired, yet
// we can still cleanly handle it with TS. Nice!
let input: [number, boolean, ...string[]];

// Just to show that we really can provide any
// number of rest elements, including 0.
e = [0, false, "max-cache", "1024", "debug", "false"];
e = [0, false];
e = [0, false, "verbose"];

Κορυφαίο ή μεσαίο στοιχείο ανάπαυσης σε τύπους πλειάδων

Προωθώντας το υπόλοιπο στοιχείο για πλειάδες, μπορείτε να δημιουργήσετε ακόμη πιο εξελιγμένες εφαρμογές από την κυκλοφορία του Typescript 4.2. Και πρέπει να ζητήσω συγνώμη εδώ: μόλις μερικές προτάσεις νωρίς, έγραψα πώς είναι υποχρεωτικό να χρησιμοποιώ ένα στοιχείο ανάπαυσης μόνο ως το τελευταίο. Αυτός ο περιορισμός δεν είναι πλέον αληθινός πλέον από το Typescript 4.2, καθώς μπορείτε τώρα να τοποθετήσετε στοιχεία ανάπαυσης σχεδόν οπουδήποτε σε μια πλειάδα.

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

  • δεν ακολουθείται από προαιρετικό στοιχείο
  • κανένα άλλο στοιχείο ανάπαυσης δεν ακολουθεί το πρώτο

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

// And here comes the fancy part: rest elements
// *not only* at the end of a tuple.
// 
// Note: this example is taken directly from the
// TS documentation. For more details, check out the
// links in the addendum.
let foo: [...string[], number];

foo = [123];
foo = ["hello", 123];
foo = ["hello!", "hello!", "hello!", 123];

let bar: [boolean, ...string[], boolean];

bar = [true, false];
bar = [true, "some text", false];
bar = [true, "some", "separated", "text", false];

// And here's an example that shows how the
// type system would catch your errors:
interface Clown { /*...*/ }
interface Joker { /*...*/ }

let StealersWheel: [...Clown[], "me", ...Joker[]];
//                                    ~~~~~~~~~~ Error!
// A rest element cannot follow another rest element.

let StringsAndMaybeBoolean: [...string[], boolean?];
//                                        ~~~~~~~~ Error!
// An optional element cannot follow a rest element.

Το υπόλοιπο στοιχείο αυτού του άρθρου

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

Προτάσεις

Σχετικά

Προσάρτημα

Γλώσσες