Asercje typów

Część sekcji Wprowadzenie do TypeScript ścieżki JavaScript w Coddy. Lekcja 68 z 73.

Czasami TypeScript nie ma wystarczających informacji, aby określić dokładny typ wartości, ale Ty jako programista wiesz więcej o tym, czym ta wartość tak naprawdę jest. Asercje typów pozwalają powiedzieć TypeScriptowi: „zaufaj mi, wiem, że ta wartość ma określony typ”.

TypeScript udostępnia dwie składnie asercji typów. Składnia as jest częściej stosowanym podejściem:

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

Możesz też użyć składni z nawiasami ostrymi, choć jest ona mniej popularna we współczesnym TypeScript:

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

Wyzwanie

Łatwy

Utwórz funkcję, która przetwarza dane z symulacji zewnętrznego API. Będziesz pracować z wartościami typu unknown i używać asercji typów, aby bezpiecznie uzyskiwać dostęp do ich właściwości.

Utwórz zmienną apiResponse typu unknown i przypisz jej następujący ciąg JSON:

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

Utwórz funkcję o nazwie processUserData, która:

Przyjmuje parametr data typu unknown
Używa asercji typu, aby potraktować data jako string
Parsuje ciąg JSON za pomocą JSON.parse()
Używa kolejnej asercji typu, aby potraktować sparsowany wynik jako obiekt o właściwościach userId (number), username (string) i isActive (boolean)
Zwraca sformatowany ciąg: "User [userId]: [username] (Active: [isActive])"
Ma jawnie określony typ zwracany string

Utwórz dodatkowe dane testowe:

Utwórz secondApiResponse typu unknown z ciągiem JSON: {"userId": 15, "username": "bob_admin", "isActive": false}
Utwórz thirdApiResponse typu unknown z ciągiem JSON: {"userId": 99, "username": "charlie_user", "isActive": true}

Przetestuj swoją funkcję i wyświetl następujące wyniki:

Wywołaj processUserData z apiResponse i wyświetl wynik
Wywołaj processUserData z secondApiResponse i wyświetl wynik
Wywołaj processUserData z thirdApiResponse i wyświetl wynik

Spróbuj swoich sił

// Utwórz zmienne odpowiedzi API
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: Utwórz tutaj funkcję processUserData

// Przetestuj funkcję i wypisz wyniki
console.log(processUserData(apiResponse));
console.log(processUserData(secondApiResponse));
console.log(processUserData(thirdApiResponse));