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;

Test yourself

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

Test yourself

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

Test yourself

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

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

Cheat sheet

Type assertions allow you to tell TypeScript the specific type of a value when you know more than TypeScript can infer.

Use the as syntax (most common):

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

Alternative angle-bracket syntax:

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

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.

Type Assertions

Cheat sheet

All lessons in Introduction To TypeScript