7 nützliche neue TypeScript-Funktionen

1. Optionale Verkettung

Verfügbar ab v3.7

Dies ist ein Problempunkt, wenn Sie versuchen, auf verschachtelte Daten zuzugreifen, und je stärker die Daten verschachtelt sind, desto umständlicher wird der Code.

Im folgenden Beispiel müssen Sie zum Zugriff auf die Adresse Daten.Kunde.Adresse durchlaufen. Da Daten oder Kunde möglicherweise nicht definiert sind, wird im Beispiel häufig der Operator && oder ähnliche Techniken verwendet, um die einzelnen Definitionsebenen zu durchlaufen.

Jetzt können Sie den Operator .? verwenden, um selektiv auf Daten zuzugreifen. Auf diese Weise wird, wenn es ein übergeordnetes Objekt gibt, das noch nicht definiert wurde, „undefined“ überall in der Kette zurückgegeben, anstatt zur Laufzeit abzustürzen.

// Vor v3.7 if (data && data.customer && data.customer.address) {
   const {Adresse} = Daten.Kunde
   const fullAddress = `${address.street}, ${address.city}, ${address.state }${address.zipcode}`
}

// Version 3.7

// Datenzugriff
const Adresse = Daten?.Kunde?.Adresse
const fullAddress = `${Adresse?.Straße}, ${Adresse?.Stadt}, ${Adresse?.Bundesstaat } ${Adresse?.Postleitzahl}`

// Gilt auch für das Array Kunden?.[0]?.['Adresse']

//Überprüfen Sie, ob die Methode definiert ist, und rufen Sie customer.approve?.() auf.

2. Nullwert-Koaleszenz

Verfügbar ab v3.7

Der Null-Koaleszenzoperator ist eine Alternative zu ||, die den Ausdruck auf der rechten Seite zurückgibt, wenn die linke Seite null oder undefiniert ist. Wie unterscheidet sich das von ||? || ist im Wesentlichen der Boolesche ODER-Operator in JavaScript, und wir versuchen, Kurzschlüsse auszunutzen, um den ersten nicht falschen Wert zurückzugeben. Dies kann zu unerwarteten Ergebnissen führen, da die Zahl 0 oder die leere Zeichenfolge als falsch betrachtet werden, wenn sie als gültige Eingabe erforderlich sind. Lassen Sie uns dies anhand eines Beispiels veranschaulichen:

// Bisher akzeptierte passPhrase = data.inputString || 'Unbekannt' // "" (leerer String) nicht
passCode = data.number || '-1111' // 0 wird nicht akzeptiert 
rememberMe = data.rememberFlag || true // wird immer wahr sein!!!


// Jetzt ist passPhrase = data.inputString ?? 'Unbekannt' // ist nur dann unbekannt, wenn inputString nicht definiert ist
passCode = data.number ?? '-1111' // 0 kann übergeben werden rememberMe = data.rememberFlag ?? true // false ist ein gültiger Wert

Auf diese Weise können Sie eindeutig zwischen undefinierten und falschen Werten unterscheiden.

3. Rekursive Typaliase

Verfügbar ab v3.7

Viele Datentypen in der realen Welt sind rekursiv. Wenn Sie beispielsweise versuchen, hierarchische Daten zu verarbeiten, werden Sie feststellen, dass es wiederholte Muster desselben Datentyps gibt. jsON ist ein gutes Beispiel, es ist im Wesentlichen eine Hash-Map, und eine Hash-Map selbst kann eine andere Map oder ein Array von Maps enthalten.

Wenn Sie vor v3.6 einen einfachen jsON-Typ definieren mussten, mussten Sie dies folgendermaßen tun:

Schnittstelle JSONObject { [x: string]: JSONValue; }
Schnittstelle JSONArray erweitert Array<JSONValue> { }
Typ JSONValue = Zeichenfolge | Zahl | Boolesch | JSONObject | JSONArray

Wenn Sie versuchen, die Typen in den Zeilen 1 und 2 wie in Zeile 3 einzubinden, erhalten Sie wahrscheinlich die folgende Fehlermeldung: „Der Typalias JSONValue verweist zirkulär auf sich selbst.“

Dieses Problem wurde in v3.7 effektiv gelöst und kann einfach wie folgt codiert werden:

Typ JSONValue = Zeichenfolge | Zahl | Boolesch | { [x: Zeichenfolge]: JSONValue } | Array<JSONValue>

4. Assertionssignatur

Verfügbar ab v3.7

Sie sollten wissen, dass TypeScript über Typwächter verfügt, die gut mit den Operatoren typeof und instanceOf in JavaScript zusammenarbeiten. Dies ist nützlich, um den Argumenten einer Funktion Vorbedingungen hinzuzufügen, um sie auf bestimmte Typen zu beschränken.

Schreiben wir einen Code, der alle oben genannten Punkte nutzt, indem wir Typwächter hinzufügen, um sicherzustellen, dass die gegebene Eingabe ein Datum ist, und das Jahr daraus extrahieren:

Funktion isDate(Eingabe: unbekannt) : behauptet, die Eingabe sei Datum { 
  wenn (Eingabeinstanz von Datum) 
    zurückkehren; 
  anders 
    throw new Error('Eingabe muss ein Datum sein!'); 
} 

Funktion getYear(Eingabe: unbekannt) : Zahl { 
  istDatum(Eingabe); 
  return input.getFullYear() // TypeScripts weiß, dass die Eingabe ein Datum ist 
} 


console.log(getYear(neues Datum('2019-01-01'))); 
console.log(getYear('2019-01-01'));

Der obige Code sieht gut aus, aber TypeScript beschwert sich immer noch, dass getFullYear für einen unbekannten Typ nicht verfügbar ist.

Ab Version 3.7 fügt TypeScript ein neues Schlüsselwort namens „asserts“ hinzu, das es dem Compiler ermöglicht, den richtigen Typ aus der Assertion zu erkennen. Für Assertionsfunktionen sollten Sie asserts <param> als <type> anstelle des Rückgabetyps hinzufügen.

Wenn die Behauptung erfolgreich ist, geht TypeScript daher davon aus, dass der Parameter vom zuvor definierten Typ ist. Der geänderte Code lautet wie folgt:

Funktion isDate(Eingabe: unbekannt) : behauptet, die Eingabe sei Datum { 
  wenn (Eingabeinstanz von Datum) 
    zurückkehren; 
  anders 
    throw new Error('Eingabe muss ein Datum sein!'); 
} 

Funktion getYear(Eingabe: unbekannt) : Zahl { 
  istDatum(Eingabe); 
  return input.getFullYear() // TypeScripts weiß, dass die Eingabe ein Datum ist 
} 


console.log(getYear(neues Datum('2019-01-01'))); 
console.log(getYear('2019-01-01'));

5. Geben Sie besseres Feedback für Versprechen

Verbesserungen seit 3.6

Es ist ein häufiger Fehler, Promise direkt im Code zu verwenden und zu vergessen, await oder then zu verwenden, wie unten gezeigt:

Schnittstelle Kunde {
    Name: Zeichenfolge
    Telefon: Zeichenfolge
}

Deklarieren Sie die Funktion getCustomerData(id: string): Promise<Customer>;
Deklarieren Sie die Funktion payCustomer(customer: Customer): void;

asynchrone Funktion f() {
    const Kunde = getCustomerData('c1')
    zahleKunden(Kunde)
}

Bisher kannte TypeScript Promises nicht und zeigte eine Fehlermeldung an, die nichts damit zu tun hatte, etwa diese:

Ab Version 3.6 ist der Compiler intelligent genug, um Versprechen vorzuschlagen, die Sie erfüllen sollten. Beachten Sie, wie der neueste Compiler denselben Fehler behandelt:

Lassen Sie uns kurz einige der Funktionen besprechen, ohne zu sehr ins Detail zu gehen:

6. Unicode-Bezeichner

Verfügbar seit v3.6

const hallo = "Welt"

Der obige Code lässt sich möglicherweise nicht mit früheren Versionen von TypeScript kompilieren, Sie können jetzt jedoch Bezeichner aus einem größeren Satz von Unicodes definieren.

7. Inkrementelle Kompilierung

Verfügbar seit v3.4

Wenn Sie TypeScript bei einem großen Projekt verwenden, kann es lange dauern, bis der Compiler auf Änderungen reagiert, die Sie an Dateien in diesem Projekt vornehmen. Es gibt jetzt ein neues Flag --incremental, das Sie der Befehlszeile von tsc (Typescript-Compiler) hinzufügen können, um geänderte Dateien inkrementell zu kompilieren.

TypeScript erreicht dies, indem es Informationen über Ihr Projekt seit der letzten Kompilierung in einem lokalen Cache-Verzeichnis innerhalb Ihrer Codebasis speichert. Denken Sie bei React-Codebasen immer daran, Webpack oder Parcel richtig zu konfigurieren, um die Vorteile der inkrementellen Kompilierung in Ihrer Build-Pipeline zu nutzen.

Oben finden Sie Einzelheiten zu 7 nützlichen neuen TypeScript-Funktionen. Weitere Informationen zu neuen TypeScript-Funktionen finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!