Type assertions in Typescript - Mini Project: Build & Apply

Understanding Type Assertions in TypeScript

📖 Scenario: Imagine you are working on a web app that receives user data as a general type. You want to tell TypeScript exactly what type this data is so you can use it safely.

🎯 Goal: You will learn how to use type assertions in TypeScript to tell the compiler the exact type of a variable. This helps you work with data more confidently.

📋 What You'll Learn

Create a variable with a general type

Add a type assertion to specify the exact type

Access a property of the asserted type

Print the property value

💡 Why This Matters

🌍 Real World

Type assertions help when working with data from unknown sources like APIs or user input, allowing you to tell TypeScript what type to expect.

💼 Career

Many jobs require working with TypeScript and handling data safely. Knowing type assertions helps prevent errors and improves code quality.

1

Create a variable with type any

Create a variable called userData with type any and assign it the object { name: 'Alice', age: 30 }.

Typescript

# Create a variable called userData with type any and assign the object { name: 'Alice', age: 30 }
# Your code here

Hint

Use let userData: any = { name: 'Alice', age: 30 };

2

Add a type assertion to userData

Create a variable called user and assign it userData with a type assertion to { name: string; age: number } using the as syntax.

Typescript

let userData: any = { name: 'Alice', age: 30 };
# Create a variable user with type assertion from userData
# Your code here

Hint

Use let user = userData as { name: string; age: number };

3

Access a property of the asserted type

Use a const variable called userName to store the name property from user.

Typescript

let userData: any = { name: 'Alice', age: 30 };
let user = userData as { name: string; age: number };
# Create a const userName and assign user.name
# Your code here

Hint

Use const userName = user.name; to get the name property.

4

Print the userName

Write a console.log statement to print the value of userName.

Typescript

let userData: any = { name: 'Alice', age: 30 };
let user = userData as { name: string; age: number };
const userName = user.name;
# Print userName using console.log
# Your code here

Hint

Use console.log(userName); to show the name.

Practice

1. What is the main purpose of type assertions in TypeScript?

easy

A. To automatically convert types during execution

B. To change the runtime type of a variable

C. To tell TypeScript to treat a value as a specific type

D. To declare a new variable type permanently

Solution

1. Step 1: Understand what type assertions do

   Type assertions tell TypeScript to treat a value as a specific type without changing the actual value.

2. Step 2: Differentiate from runtime behavior

   Type assertions do not change the runtime type or convert values; they only affect compile-time checking.

3. Final Answer:

   To tell TypeScript to treat a value as a specific type -> Option C

4. Quick Check:

   Type assertions = tell TypeScript type [OK]

Hint: Type assertions only affect compile-time type checking [OK]

Common Mistakes:

• Thinking type assertions change runtime values
• Confusing type assertions with type declarations
• Assuming type assertions convert data automatically

2. Which of the following is the preferred syntax for a type assertion in TypeScript?

easy

A. let value = <string>someVar;

B. let value = someVar as string;

C. let value = someVar:string;

D. let value = someVar -> string;

Solution

1. Step 1: Identify valid type assertion syntax

   TypeScript supports two syntaxes: the angle-bracket <string>someVar and the 'as' syntax someVar as string.

2. Step 2: Consider modern best practice

   The 'as' syntax is preferred especially in .tsx files to avoid conflicts with JSX syntax.

3. Final Answer:

   let value = someVar as string; -> Option B

4. Quick Check:

   Use 'as Type' for assertions [OK]

Hint: Use 'as Type' syntax for clear, modern assertions [OK]

Common Mistakes:

• Using colon ':' instead of 'as' for assertions
• Using invalid arrow '->' syntax
• Confusing type annotations with assertions

3. What will be the output of the following TypeScript code?

let someValue: unknown = "Hello World";
let strLength: number = (someValue as string).length;
console.log(strLength);

medium

A. 11

B. Type error at compile time

C. undefined

D. Runtime error

Solution

1. Step 1: Understand the type assertion usage

   The variable someValue is of type unknown, so TypeScript cannot access .length directly. Using 'as string' tells TypeScript to treat it as a string.

2. Step 2: Calculate the length property

   The string "Hello World" has 11 characters, so (someValue as string).length is 11, which is logged.

3. Final Answer:

   11 -> Option A

4. Quick Check:

   Type assertion allows .length access = 11 [OK]

Hint: Assert unknown as string to access string properties [OK]

Common Mistakes:

• Expecting a compile error without assertion
• Confusing runtime errors with type errors
• Assuming length is undefined for unknown type

4. Identify the error in this TypeScript code snippet:

let someValue: any = 123;
let strLength: number = (someValue as string).length;
console.log(strLength);

medium

A. No error, outputs 3

B. Compile-time error due to invalid assertion

C. TypeScript warning but runs fine

D. Runtime error because number has no length property

Solution

1. Step 1: Analyze the type assertion and runtime value

   The variable someValue is assigned a number 123, but asserted as string. TypeScript allows this assertion because of 'any' type.

2. Step 2: Understand runtime behavior

   At runtime, 123 is a number and does not have a length property, so accessing .length causes a runtime error.

3. Final Answer:

   Runtime error because number has no length property -> Option D

4. Quick Check:

   Type assertion doesn't change runtime type = runtime error [OK]

Hint: Type assertions don't fix runtime type mismatches [OK]

Common Mistakes:

• Assuming type assertion converts the value
• Expecting compile-time error for any to string assertion
• Ignoring runtime errors from wrong assumptions

5. Given the following code, which option correctly uses type assertions to safely extract the length of a value that might be a string or number?

function getLength(value: string | number) {
  // Your code here
}

console.log(getLength("hello")); // 5
console.log(getLength(12345));   // 5

hard

A. return value.toString().length;

B. return (value as string).length;

C. return (value as number).length;

D. return (value as string | number).length;

Solution

1. Step 1: Understand the input types and goal

   The function receives a value that can be string or number. We want to get the length of the string or the number's digit count.

2. Step 2: Evaluate each option's correctness

   return (value as string).length; asserts value as string, but if value is number, accessing .length causes runtime error. return value.toString().length; converts value to string first, then gets length safely. return (value as number).length; asserts as number, but numbers have no .length property, causing runtime error. return (value as string | number).length; asserts union type and tries to access .length, which is invalid.

3. Final Answer:

   return value.toString().length; -> Option A

4. Quick Check:

   Convert to string first, then get length [OK]

Hint: Convert to string before length for mixed types [OK]

Common Mistakes:

• Assuming type assertion changes runtime type
• Accessing .length on number without conversion
• Using invalid union type assertions