Type Assertions

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

Manchmal hat TypeScript nicht genügend Informationen, um den exakten Typ eines Werts zu bestimmen, aber du als Entwickler weißt mehr darüber, was dieser Wert tatsächlich ist. Mit Typassertionen kannst du TypeScript sagen: „Vertrau mir, ich weiß, dass dieser Wert von diesem spezifischen Typ ist.“

TypeScript bietet zwei Syntaxen für Typassertionen. Die as-Syntax ist der häufigere Ansatz:

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

Du kannst auch die Syntax mit spitzen Klammern verwenden, obwohl sie im modernen TypeScript weniger verbreitet ist:

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

Aufgabe

Einfach

Erstelle eine Funktion, die Daten aus einer Simulation einer externen API verarbeitet. Du arbeitest mit Werten vom Typ unknown und verwendest Typzusicherungen, um sicher auf deren Eigenschaften zuzugreifen.

Erstelle eine Variable apiResponse vom Typ unknown und weise ihr den folgenden JSON-String zu:

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

Erstelle eine Funktion namens processUserData, die:

Einen Parameter data vom Typ unknown entgegennimmt
Eine Typzusicherung verwendet, um data als string zu behandeln
Den JSON-String mithilfe von JSON.parse() analysiert
Eine weitere Typzusicherung verwendet, um das analysierte 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

Erstelle zusätzliche Testdaten:

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

Teste deine Funktion und gib die folgenden Ausgaben aus:

Rufe processUserData mit apiResponse auf und gib das Ergebnis aus
Rufe processUserData mit secondApiResponse auf und gib das Ergebnis aus
Rufe processUserData mit thirdApiResponse auf und gib das Ergebnis aus

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 die processUserData-Funktion hier

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