Arbeiten mit Union-Typen
Teil des Abschnitts Einführung in TypeScript der JavaScript-Journey von Coddy. Lektion 32 von 73.
Wenn Sie mit Union-Typen arbeiten, erzwingt TypeScript eine wichtige Sicherheitsregel: Sie können nur auf Eigenschaften und Methoden zugreifen, die in allen Typen der Union vorhanden sind. Dies verhindert Laufzeitfehler, bedeutet aber auch, dass Sie spezielle Techniken benötigen, um auf typspezifische Funktionen zuzugreifen.
Betrachten Sie eine Funktion, die entweder einen String oder ein Array von Strings akzeptiert. Beide Typen verfügen über eine length-Eigenschaft, sodass Sie sicher darauf zugreifen können:
function getLength(input: string | string[]): number {
return input.length; // Sicher - beide Typen haben eine Länge
}Wenn du jedoch versuchst, eine Methode zu verwenden, die nur für einen Typ existiert, zeigt TypeScript einen Fehler an. Um typspezifisch auf Member zuzugreifen, benötigst du einen Typwächter – eine Laufzeitprüfung, die den Typ eingrenzt:
function processInput(input: string | string[]): void {
if (typeof input === "string") {
// TypeScript weiß, dass input hier ein string ist
console.log(input.toUpperCase());
} else {
// TypeScript weiß, dass input hier string[] ist
console.log(input.join(", "));
}
}Der typeof-Operator ist einer der häufigsten Typwächter. Nach der Prüfung grenzt TypeScript den Typ innerhalb jedes Zweigs automatisch ein und gibt dir vollen Zugriff auf typspezifische Eigenschaften und Methoden, während die vollständige Typsicherheit erhalten bleibt.
Aufgabe
EinfachErstelle eine Funktion namens processData, die einen Parameter namens input vom Typ string | string[] akzeptiert und eine number zurückgibt. Die Funktion soll eine Typprüfung verwenden, um den Eingabetyp zu bestimmen, und sich wie folgt verhalten:
- Wenn die Eingabe ein
stringist, gib ihre Länge zurück - Wenn die Eingabe ein
string[]ist, gib die Gesamtzahl der Zeichen in allen Strings des Arrays zurück
Erstelle eine weitere Funktion namens formatMessage, die einen Parameter namens content vom Typ number | boolean akzeptiert und einen string zurückgibt. Die Funktion soll eine Typprüfung verwenden, um den Eingabetyp zu bestimmen, und sich wie folgt verhalten:
- Wenn die Eingabe eine
numberist, gib"Value: [number]"zurück - Wenn die Eingabe ein
booleanist, gib"Status: [boolean]"zurück
Die folgenden Eingaben werden bereitgestellt:
- Erste Eingabe: ein String, der entweder ein einzelnes Wort oder ein JSON-Array aus Strings wie
["apple", "banana", "cherry"]darstellt - Zweite Eingabe: ein String, der entweder eine Zahl oder einen booleschen Wert (
"true"oder"false") darstellt
Verarbeite die Eingaben wie folgt:
- Für die erste Eingabe: Wenn sie mit
"["beginnt, parse sie als JSON-Array aus Strings; andernfalls behandle sie als einzelnen String - Für die zweite Eingabe: Wenn sie
"true"oder"false"ist, wandle sie in einen booleschen Wert um; andernfalls wandle sie in eine Zahl um
Rufe processData mit der verarbeiteten ersten Eingabe auf und gib das Ergebnis aus. Rufe anschließend formatMessage mit der verarbeiteten zweiten Eingabe auf und gib das Ergebnis aus.
Probier es selbst
import * as fs from "fs";
// Eingaben lesen
const stdinBuffer: Buffer = fs.readFileSync(0);
const inputs: string[] = stdinBuffer.toString().trim().split('\n');
const firstInput = inputs[0];
const secondInput = inputs[1];
// TODO: Schreiben Sie Ihren Code hier
// Erstellen Sie die Funktion processData mit Type Guard
// Erstellen Sie die Funktion formatMessage mit Type Guard
// Verarbeiten Sie die Eingaben gemäß den Anforderungen
// Rufen Sie die Funktionen auf und geben Sie die Ergebnisse ausDiese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.
Alle Lektionen in Einführung in TypeScript
1Erste Schritte mit TS
Was ist TypeScript?Warum TypeScript verwenden?Dein erster TypeScript-CodeKompilierungsprozess & FehlerZusammenfassung: Einführung in TS4Arbeiten mit Funktionen
Typisierung von Parametern & RückgabewertenTypisierung von Arrow-FunktionenDer Rückgabetyp 'void'Optionale Parameter mit '?'Standard-ParameterwerteTypisierung von Rest-ParameternDefinieren von FunktionstypenZusammenfassung: Typisierte Funktionen erstellen2Basis-Typen
Basis-Typen: str, num, booleanDer 'any'-Typ: Der NotausgangDer 'unknown'-TypArbeiten mit 'null' & 'undef'Typinferenz in der PraxisExplizite Typ-AnnotationenZusammenfassung: Übung zu Basis-Typen5Typen: Aliase, Unions & Intersections
Typ-Aliase für primitive DatentypenUnion-Typen ('|')Arbeiten mit Union-TypenLiteral-TypenIntersection-Typen ('&')Kombinieren von Typ-AliasenZusammenfassung: Fortgeschrittene Typ-Kombinationen3Datenstruktur: Arrays & Tupel
Typisierte Arrays'readonly'-Modifikator für ArraysWas ist ein Tupel?Deklarieren von und Zugriff auf TupelDestrukturierung von TupelnReadonly-TupelMehrdimensionale typisierte ArraysSpread-Operator mit ArraysZusammenfassung: Arrays und TupelÜbe selbstständig: TypeScript-Playground