Type Assertions

Teil des Abschnitts Einführung in TypeScript der JavaScript-Journey von Coddy — Lektion 68 von 73.

Manchmal verfügt TypeScript nicht über genügend Informationen, um den genauen Typ eines Wertes zu bestimmen, aber Sie als Entwickler wissen mehr darüber, was dieser Wert tatsächlich ist. Type Assertions ermöglichen es Ihnen, TypeScript mitzuteilen: „Vertrau mir, ich weiß, dass dieser Wert von diesem spezifischen Typ ist.“

TypeScript bietet zwei Syntax-Varianten für Typzusicherungen (Type Assertions). Die as-Syntax ist der gängigere Ansatz:

let data: unknown = '{"name": "John", "age": 30}';
let user = data as string;

Sie können auch die Syntax mit spitzen Klammern verwenden, obwohl diese in modernem TypeScript seltener vorkommt:

let data: unknown = '{"name": "John", "age": 30}';
let user = <string>data;

Teste dich selbst

Diese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.

Teste dich selbst

Diese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.

Teste dich selbst

Diese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.

Aufgabe

Einfach

Erstellen Sie eine Funktion, die Daten aus einer externen API-Simulation verarbeitet. Sie arbeiten mit Werten vom Typ unknown und verwenden Typzusicherungen (Type Assertions), um sicher auf deren Eigenschaften zuzugreifen.

Erstellen Sie eine Variable apiResponse vom Typ unknown und weisen Sie ihr den folgenden JSON-String zu:

{"userId": 42, "username": "alice_dev", "isActive": true}

Erstellen Sie eine Funktion namens processUserData, die:

Einen Parameter data vom Typ unknown entgegennimmt
Eine Typzusicherung verwendet, um data als string zu behandeln
Den JSON-String mit JSON.parse() parst
Eine weitere Typzusicherung verwendet, um das geparste Ergebnis als ein Objekt mit den Eigenschaften userId (number), username (string) und isActive (boolean) zu behandeln
Einen formatierten String zurückgibt: "User [userId]: [username] (Active: [isActive])"
Einen expliziten Rückgabetyp string hat

Erstellen Sie zusätzliche Testdaten:

Erstellen Sie secondApiResponse vom Typ unknown mit dem JSON-String: {"userId": 15, "username": "bob_admin", "isActive": false}
Erstellen Sie thirdApiResponse vom Typ unknown mit dem JSON-String: {"userId": 99, "username": "charlie_user", "isActive": true}

Testen Sie Ihre Funktion und geben Sie die folgenden Ausgaben aus:

Rufen Sie processUserData mit apiResponse auf und geben Sie das Ergebnis aus
Rufen Sie processUserData mit secondApiResponse auf und geben Sie das Ergebnis aus
Rufen Sie processUserData mit thirdApiResponse auf und geben Sie das Ergebnis aus

Spickzettel

Type-Assertions ermöglichen es Ihnen, TypeScript den spezifischen Typ eines Wertes mitzuteilen, wenn Sie mehr wissen, als TypeScript ableiten kann.

Verwenden Sie die as-Syntax (am gebräuchlichsten):

let data: unknown = '{"name": "John", "age": 30}';
let user = data as string;

Alternative Syntax mit spitzen Klammern:

let data: unknown = '{"name": "John", "age": 30}';
let user = <string>data;

Probier es selbst

// Erstelle die API-Antwortvariablen
const apiResponse: unknown = '{"userId": 42, "username": "alice_dev", "isActive": true}';
const secondApiResponse: unknown = '{"userId": 15, "username": "bob_admin", "isActive": false}';
const thirdApiResponse: unknown = '{"userId": 99, "username": "charlie_user", "isActive": true}';

// TODO: Erstelle hier die Funktion processUserData

// Teste die Funktion und gib die Ergebnisse aus
console.log(processUserData(apiResponse));
console.log(processUserData(secondApiResponse));
console.log(processUserData(thirdApiResponse));

Teste dich selbst

Diese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.