Type assertions in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this TypeScript code with type assertion?

Consider the following TypeScript code using type assertion. What will be printed to the console?

Typescript

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

A Compilation error

B undefined

C 17

D TypeError at runtime

💡 Hint

Type assertion tells TypeScript to treat a value as a specific type.

The variable someValue is asserted as a string, so accessing .length works and returns 17, the length of "Hello TypeScript!".

❓ Predict Output

intermediate

What error does this TypeScript code raise?

What error will this TypeScript code produce when compiled or run?

Typescript

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

A Runtime error: Cannot read property 'length' of number

B Outputs undefined

C Compilation error: Cannot assert number to string

D Outputs 3

💡 Hint

Type assertion does not change the actual runtime type.

At runtime, value is a number, so accessing .length causes a runtime error.

🧠 Conceptual

advanced

Which option correctly uses type assertion to access a property?

Given an object of unknown type, which option correctly asserts it as a specific type to access its property without error?

A

let obj: unknown = {name: "Alice"};
console.log((obj as {name: string}).name);

B

let obj: unknown = {name: "Alice"};
console.log(obj.name);

C

let obj: unknown = {name: "Alice"};
console.log(<{name: string}>obj.name);

D

let obj: unknown = {name: "Alice"};
console.log(obj as name);

💡 Hint

Type assertion syntax uses 'as' followed by the type in parentheses.

Option A correctly asserts obj as an object with a name property of type string, allowing access to .name.

📝 Syntax

advanced

Which option has correct syntax for type assertion in TypeScript?

Which of the following is the correct syntax for asserting a variable 'x' as type 'number'?

A let y = x <number>;

B let y = x : number;

C let y = <number> x;

D let y = x as number;

💡 Hint

Use 'as' keyword for type assertion in modern TypeScript.

Option D uses the modern and recommended 'as' syntax for type assertion.

🚀 Application

expert

What is the value of 'result' after running this TypeScript code?

Analyze the code below and determine the value of 'result' after execution.

Typescript

interface User {
  id: number;
  name: string;
}

const data: unknown = {id: 42, name: "Bob"};
const user = data as User;
const result = user.id + user.name.length;

A Compilation error

B 45

C TypeError at runtime

D NaN

💡 Hint

Type assertion does not change the actual runtime value.

The object has id 42 and name "Bob" (length 3), so result is 42 + 3 = 45.

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