Type Assertions

Part of the Introduction To TypeScript section of Coddy's JavaScript journey. Lesson 68 of 73.

Sometimes TypeScript doesn't have enough information to determine the exact type of a value, but you as the developer know more about what that value actually is. Type assertions allow you to tell TypeScript "trust me, I know this value is of this specific type."

TypeScript provides two syntaxes for type assertions. The as syntax is the more common approach:

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

You can also use the angle-bracket syntax, though it's less common in modern TypeScript:

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

Challenge

Easy

Create a function that processes data from an external API simulation. You'll work with values of type unknown and use type assertions to safely access their properties.

Create a variable apiResponse of type unknown and assign it the following JSON string:

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

Create a function named processUserData that:

Takes a parameter data of type unknown
Uses a type assertion to treat data as a string
Parses the JSON string using JSON.parse()
Uses another type assertion to treat the parsed result as an object with properties userId (number), username (string), and isActive (boolean)
Returns a formatted string: "User [userId]: [username] (Active: [isActive])"
Has an explicit return type of string

Create additional test data:

Create secondApiResponse of type unknown with the JSON string: {"userId": 15, "username": "bob_admin", "isActive": false}
Create thirdApiResponse of type unknown with the JSON string: {"userId": 99, "username": "charlie_user", "isActive": true}

Test your function and print the following outputs:

Call processUserData with apiResponse and print the result
Call processUserData with secondApiResponse and print the result
Call processUserData with thirdApiResponse and print the result

Try it yourself

// Create the API response variables
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: Create the processUserData function here

// Test the function and print results
console.log(processUserData(apiResponse));
console.log(processUserData(secondApiResponse));
console.log(processUserData(thirdApiResponse));

Test yourself

This lesson includes a short quiz. Start the lesson to answer it and track your progress.

All lessons in Introduction To TypeScript

Practice on your own: Online JavaScript compiler