Λειτουργίες TypeScript 3.7 που πρέπει οπωσδήποτε να χρησιμοποιήσετε

Αν πρέπει να επιλέξω τις πιο χρήσιμες δυνατότητες που είναι νέες στο TypeScript 3.7, αυτές οι δύο βρίσκονται στην κορυφή της λίστας.

Προαιρετική Αλυσίδα

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

"Μη καταγεγραμμένο TypeError: Δεν είναι δυνατή η ανάγνωση της ιδιότητας … της απροσδιόριστης"

Αυτό είναι το ισοδύναμο με το «λάθος δισεκατομμυρίων δολαρίων» — NPE (Εξαιρέσεις Null Pointer) στη χώρα JavaScript. Και είναι πολύ εύκολο να συναντήσετε τέτοιου είδους σφάλματα.

const data = fetchAccountPerformance();
doSomethingWith(data.accounts.performance);

…αλλά το "data.accounts" μπορεί να είναι "απροσδιόριστο". Και η πρόσβαση στην "απόδοση" από το "data.accounts" πιθανότατα θα προκαλέσει το παραπάνω σφάλμα.

Για να αποφύγουμε αυτό το σφάλμα, ίσως χρειαστεί να γράψουμε κάποιον κώδικα προστασίας όπως αυτός:

if (
  data && 
  data.accounts && 
  data.accounts.performance)
{
  doSomethingWith(data.accounts.performance);
}

Ναι, πολύ λόγια.

Τώρα με το TypeScript 3.7, μπορείτε να κάνετε τα εξής:

if (data?.accounts?.performance) {
  doSomethingWith(data.accounts.performance);
}

Πολύ πιο συνοπτικό.

Το "a?.b" ισοδυναμεί με:

(a === null || a === undefined) ?
  undefined : 
  a.b;

Επομένως, το "data?.accounts?.performance" ισοδυναμεί με:

(data === null || data === undefined) ?
  undefined :
  (data.accounts === null || data.accounts === undefined) ? 
    undefined : 
    data.accounts.performance;

Ωστόσο, έχετε υπόψη σας ότι τα "a && b" και "a?.b" δεν είναι απαραίτητα ανταλλάξιμα 1 προς 1. Εδώ είναι ένα παράδειγμα:

const a = "";
console.log(a && a.length); // ""
console.log(a?.length); // 0

Στην περίπτωση του "a && a.length", το a.length δεν θα αξιολογηθεί επειδή το "a" είναι μια κενή συμβολοσειρά, επομένως , ψεύτικο. Στη συνέχεια, ο τελεστής "&&" παρέλειψε οτιδήποτε στη δεξιά πλευρά του και επέστρεψε την ψευδή τιμή - μια κενή συμβολοσειρά.

Ωστόσο, στην περίπτωση του "a?.length", το "a" είναι ψευδές αλλά όχι null ούτε απροσδιόριστο. Επομένως, το ".length" θα εξακολουθεί να αξιολογείται και θα επιστρέφει 0.

Nullish Coalescing

Συχνά χρειάζεται να παρέχουμε μια προεπιλεγμένη τιμή εάν μια τιμή δεν είναι διαθέσιμη.

const name = person.name || "David";

Εάν το person.name είναι ψευδές (π.χ., null, απροσδιόριστο ή “”), το “David” θα να αντιστοιχιστεί στη μεταβλητή όνομα.

Όλα αυτά λειτουργούν καλά, αλλά σε ορισμένες περιπτώσεις τα πράγματα μπορεί να γίνουν δύσκολα:

const amount = position.numberOfShares || 100;

Η πρόθεση είναι να εκχωρήσετε 100 στη μεταβλητή ποσό εάν το position.numberOfShares δεν είναι διαθέσιμο. Τι γίνεται όμως αν ο numberOfShares είναι πραγματικά 0;

Το 0 είναι ψευδές, ο τελεστής "||" θα αξιολογήσει στη συνέχεια τη δεξιά πλευρά και θα επιστρέψει 100. Ακόμα κι αν το 0 είναι μια νόμιμη τιμή, θα παρακάμπτεται από το 100. Δεν είναι αυτό που θέλαμε .

Με το TypeScript 3.7, μπορείτε πλέον να κάνετε τα εξής:

const amount = position.numberOfShares ?? 100;

Το 100 θα χρησιμοποιηθεί μόνο όταν το numberOfShares είναι null ή ακαθορισμένο. Ο παραπάνω κωδικός ισοδυναμεί με:

const amount = 
  (position.numberOfShares === null ||
  position.numberOfShares === undefined) ?
    100 :
    position.numberOfShares;

συμπέρασμα

Το Προαιρετικό Chaining και το Nullish Coalescing είναι δύο χαρακτηριστικά που εισήχθησαν από το TypeScript 3.7. Τα βρήκα πολύ χρήσιμα. Για μια πλήρη λίστα με τις δυνατότητες της έκδοσης 3.7, δείτε αυτό.