Aserciones de tipo

Parte de la sección Introducción a TypeScript del Journey de JavaScript de Coddy. Lección 68 de 73.

A veces TypeScript no tiene suficiente información para determinar el tipo exacto de un valor, pero tú, como desarrollador, sabes más sobre lo que realmente es ese valor. Las aserciones de tipo te permiten decirle a TypeScript «confía en mí, sé que este valor es de este tipo específico».

TypeScript proporciona dos sintaxis para las aserciones de tipos. La sintaxis as es el enfoque más común:

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

También puedes usar la sintaxis de corchetes angulares, aunque es menos común en TypeScript moderno:

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

Desafío

Fácil

Crea una función que procese datos de una simulación de una API externa. Trabajarás con valores de tipo unknown y usarás aserciones de tipo para acceder de forma segura a sus propiedades.

Crea una variable apiResponse de tipo unknown y asígnale la siguiente cadena JSON:

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

Crea una función llamada processUserData que:

Acepte un parámetro data de tipo unknown
Use una aserción de tipo para tratar data como una string
Analice la cadena JSON usando JSON.parse()
Use otra aserción de tipo para tratar el resultado analizado como un objeto con las propiedades userId (number), username (string) y isActive (boolean)
Devuelva una cadena con formato: "User [userId]: [username] (Active: [isActive])"
Tenga un tipo de retorno explícito de string

Crea datos de prueba adicionales:

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

Prueba tu función e imprime los siguientes resultados:

Llama a processUserData con apiResponse e imprime el resultado
Llama a processUserData con secondApiResponse e imprime el resultado
Llama a processUserData con thirdApiResponse e imprime el resultado

Pruébalo tú mismo

// Crea las variables de respuesta de la 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 la función processUserData aquí

// Prueba la función e imprime los resultados
console.log(processUserData(apiResponse));
console.log(processUserData(secondApiResponse));
console.log(processUserData(thirdApiResponse));