Asserções de Tipo

Parte da seção Introdução ao TypeScript do Journey de JavaScript da Coddy. Lição 68 de 73.

Às vezes, o TypeScript não tem informações suficientes para determinar o tipo exato de um valor, mas você, como desenvolvedor, sabe mais sobre o que esse valor realmente é. As asserções de tipo permitem dizer ao TypeScript: "confie em mim, eu sei que esse valor é desse tipo específico."

TypeScript fornece duas sintaxes para asserções de tipo. A sintaxe as é a abordagem mais comum:

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

Você também pode usar a sintaxe com colchetes angulares, embora ela seja menos comum no TypeScript moderno:

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

Desafio

Fácil

Crie uma função que processe dados de uma simulação de API externa. Você trabalhará com valores do tipo unknown e usará asserções de tipo para acessar suas propriedades com segurança.

Crie uma variável apiResponse do tipo unknown e atribua a ela a seguinte string JSON:

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

Crie uma função chamada processUserData que:

Aceite um parâmetro data do tipo unknown
Use uma asserção de tipo para tratar data como uma string
Analise a string JSON usando JSON.parse()
Use outra asserção de tipo para tratar o resultado analisado como um objeto com as propriedades userId (number), username (string) e isActive (boolean)
Retorne uma string formatada: "User [userId]: [username] (Active: [isActive])"
Tenha um tipo de retorno explícito string

Crie dados de teste adicionais:

Crie secondApiResponse do tipo unknown com a string JSON: {"userId": 15, "username": "bob_admin", "isActive": false}
Crie thirdApiResponse do tipo unknown com a string JSON: {"userId": 99, "username": "charlie_user", "isActive": true}

Teste sua função e imprima as seguintes saídas:

Chame processUserData com apiResponse e imprima o resultado
Chame processUserData com secondApiResponse e imprima o resultado
Chame processUserData com thirdApiResponse e imprima o resultado

Experimente você mesmo

// Criar as variáveis de resposta da 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: Criar a função processUserData aqui

// Testar a função e imprimir os resultados
console.log(processUserData(apiResponse));
console.log(processUserData(secondApiResponse));
console.log(processUserData(thirdApiResponse));