Asserzioni di tipo

Fa parte della sezione Introduzione a TypeScript del percorso JavaScript di Coddy. Lezione 68 di 73.

A volte TypeScript non dispone di informazioni sufficienti per determinare il tipo esatto di un valore, ma tu, in quanto sviluppatore, sai qualcosa in più su quale sia effettivamente quel valore. Le asserzioni di tipo ti permettono di dire a TypeScript: «fidati, so che questo valore è di questo tipo specifico».

TypeScript fornisce due sintassi per le asserzioni di tipo. La sintassi as è l’approccio più comune:

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

Puoi anche usare la sintassi con parentesi angolari, anche se è meno comune nel TypeScript moderno:

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

Sfida

Facile

Crea una funzione che elabori i dati provenienti da una simulazione di un'API esterna. Lavorerai con valori di tipo unknown e userai asserzioni di tipo per accedere in sicurezza alle loro proprietà.

Crea una variabile apiResponse di tipo unknown e assegnale la seguente stringa JSON:

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

Crea una funzione chiamata processUserData che:

Accetti un parametro data di tipo unknown
Usi un'asserzione di tipo per trattare data come una string
Analizzi la stringa JSON usando JSON.parse()
Usi un'altra asserzione di tipo per trattare il risultato analizzato come un oggetto con le proprietà userId (number), username (string) e isActive (boolean)
Restituisca una stringa formattata: "User [userId]: [username] (Active: [isActive])"
Abbiano un tipo di ritorno esplicito string

Crea altri dati di test:

Crea secondApiResponse di tipo unknown con la stringa JSON: {"userId": 15, "username": "bob_admin", "isActive": false}
Crea thirdApiResponse di tipo unknown con la stringa JSON: {"userId": 99, "username": "charlie_user", "isActive": true}

Verifica la tua funzione e stampa i seguenti risultati:

Chiama processUserData con apiResponse e stampa il risultato
Chiama processUserData con secondApiResponse e stampa il risultato
Chiama processUserData con thirdApiResponse e stampa il risultato

Provalo tu

// Crea le variabili per le risposte dell'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: Crea qui la funzione processUserData

// Testa la funzione e stampa i risultati
console.log(processUserData(apiResponse));
console.log(processUserData(secondApiResponse));
console.log(processUserData(thirdApiResponse));