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 (Type assertions) permitem que você diga ao TypeScript "confie em mim, eu sei que este valor é deste tipo específico".

O 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 de colchetes angulares (angle-bracket), embora seja menos comum no TypeScript moderno:

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

Teste seus conhecimentos

Esta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.

Teste seus conhecimentos

Esta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.

Teste seus conhecimentos

Esta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.

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:

Recebe um parâmetro data do tipo unknown
Usa uma asserção de tipo para tratar data como uma string
Analisa a string JSON usando JSON.parse()
Usa outra asserção de tipo para tratar o resultado analisado como um objeto com as propriedades userId (number), username (string) e isActive (boolean)
Retorna uma string formatada: "User [userId]: [username] (Active: [isActive])"
Possui um tipo de retorno explícito de 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 os seguintes resultados:

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

Folha de consulta

Asserções de tipo permitem que você informe ao TypeScript o tipo específico de um valor quando você sabe mais do que o TypeScript consegue inferir.

Use a sintaxe as (mais comum):

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

Sintaxe alternativa de colchetes angulares (angle-bracket):

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

Experimente você mesmo

// Cria 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: Crie a função processUserData aqui

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

Teste seus conhecimentos

Esta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.