Τύποι συμβολοσειράς προτύπου πληκτρολογίου ως διακριτικά

Τι είναι το "Narrowing" στο TS;

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

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

type Addition = {
    sum: number;
}

type Subtraction = {
    result: number;
}

function calculate(action: Addition | Subtraction) {
    if ('sum' in action) {
      // Simple example of using properties
      // of an entity to narrow down its
      // actual type.
      //
      // 'action' is at this point of type
      // 'Addition'. Nice!
      const addition = action;
    }
}

Στένωση για τύπους συμβολοσειράς προτύπων

Ξεκινώντας με την έκδοση Typescript 4.5, αυτό το μοτίβο μπορεί επίσης να εφαρμοστεί για κυριολεκτικούς τύπους προτύπων, γνωστές και ως ειδικές χορδές με backticks. Η αντιστοίχιση προτύπων γίνεται πολύ ισχυρή στη γλώσσα.

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

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

type Addition = {
    variant: `${string}-addition`;
    sum: number;
}

type Subtraction = {
    variant: `${string}-subtraction`;
    result: number;
}

function process(action: Addition | Subtraction) {
    if (action.variant === "simple-addition") {
        // Stupid simple example, but you get the idea:
        // We used 'simple-addition', and the pattern 
        // matching by TS understood that '...-addition'
        // can be discriminated to 'Addition'.
        const addition = action;
    }
}

//
// Example that DOES NOT work.
//
// This demo illustrates that the
// discriminante has to be a string,
// else the pattern matching worn't work.

type Addition = {
    variant: `${string}-arithemtic`;
    sum: number;
}

type Subtraction = {
    variant: `${number}-arithemtic`;
    result: number;
}

function process(action: Addition | Subtraction) {
    if (action.variant === "123-arithemtic") {
        // Still 'Addion | Subtraction',
        // as we can only compare against
        // a string '123-arithmetic', which
        // is of course the same for both.
        const addition = action;
    }
}

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