Runtime type checking strategies in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of a simple runtime type guard function

What is the output of this TypeScript code when calling checkType(42)?

Typescript

function isNumber(value: unknown): value is number {
  return typeof value === 'number';
}

function checkType(value: unknown) {
  if (isNumber(value)) {
    return `Number: ${value}`;
  } else {
    return 'Not a number';
  }
}

console.log(checkType(42));

A undefined

B "Not a number"

C TypeError at runtime

D "Number: 42"

💡 Hint

Think about what the type guard function returns for a number.

The function isNumber checks if the value's type is 'number'. Since 42 is a number, the condition is true, so the function returns the string 'Number: 42'.

🧠 Conceptual

intermediate

Understanding the purpose of runtime type checking

Why do developers use runtime type checking in TypeScript even though TypeScript provides static type checking?

A To catch type errors during program execution that static checking cannot detect

B To improve compile time performance

C To replace static type checking completely

D To avoid writing type annotations in code

💡 Hint

Think about what static type checking cannot verify.

Static type checking happens before running the program and cannot verify types of data coming from external sources like user input or APIs. Runtime type checking helps catch these errors during execution.

❓ Predict Output

advanced

Output of a runtime type check with union types

What is the output of this TypeScript code snippet?

Typescript

type Shape = { kind: 'circle'; radius: number } | { kind: 'square'; side: number };

function area(shape: Shape): number {
  switch (shape.kind) {
    case 'circle':
      return Math.PI * shape.radius ** 2;
    case 'square':
      return shape.side ** 2;
  }
}

console.log(area({ kind: 'circle', radius: 3 }));

A 28.274333882308138

B 9

C undefined

D TypeError at runtime

💡 Hint

Recall the formula for the area of a circle.

The shape is a circle with radius 3, so the area is π * 3^2 = 28.274333882308138 approximately.

🔧 Debug

advanced

Identify the runtime error in type checking code

What error does this code produce when run, and why?

Typescript

function isStringArray(value: unknown): value is string[] {
  return Array.isArray(value) && value.every(item => typeof item === 'string');
}

const data: unknown = ['hello', 42];

if (isStringArray(data)) {
  console.log(data.join(', '));
} else {
  console.log('Not a string array');
}

A SyntaxError due to missing colon

B Throws TypeError because join is called on a non-array

C Logs 'Not a string array' because 42 is not a string

D Logs 'hello, 42' incorrectly

💡 Hint

Check what the type guard returns for the array with mixed types.

The type guard returns false because not all items are strings. So the else branch runs and logs 'Not a string array'.

🚀 Application

expert

Determine the number of valid keys after runtime filtering

Given this runtime type check filtering an object, how many keys remain in the filtered object?

Typescript

function filterStringValues(obj: Record<string, unknown>): Record<string, string> {
  const result: Record<string, string> = {};
  for (const key in obj) {
    if (typeof obj[key] === 'string') {
      result[key] = obj[key] as string;
    }
  }
  return result;
}

const input = { a: 'apple', b: 42, c: 'cat', d: true, e: 'elephant' };
const filtered = filterStringValues(input);
console.log(Object.keys(filtered).length);

A 5

B 3

C 4

D 2

💡 Hint

Count how many values in the input object are strings.

Only keys 'a', 'c', and 'e' have string values. So the filtered object has 3 keys.

Practice

1. Which of the following is the best way to check if a variable value is a string at runtime in TypeScript?

easy

A. Use value === String

B. Use value instanceof String

C. Use typeof value === 'string'

D. Use Array.isArray(value)

Solution

1. Step 1: Understand the typeof operator

   The typeof operator returns a string indicating the type of the operand. For strings, it returns 'string'.

2. Step 2: Compare with 'string'

   Checking typeof value === 'string' correctly verifies if value is a string primitive.

3. Final Answer:

   Use typeof value === 'string' -> Option C

4. Quick Check:

   typeof string = 'string' [OK]

Hint: Use typeof for primitives like string or number [OK]

Common Mistakes:

• Using instanceof for string primitives
• Confusing Array.isArray with string check
• Comparing variable directly to String constructor

2. Which syntax correctly checks if a variable data is an array at runtime in TypeScript?

easy

A. Array.isArray(data)

B. data instanceof Array

C. typeof data === 'array'

D. data.constructor === 'Array'

Solution

1. Step 1: Recall the standard array check method

   JavaScript and TypeScript provide Array.isArray() to check if a value is an array.

2. Step 2: Verify the correct usage

   Calling Array.isArray(data) returns true if data is an array, false otherwise.

3. Final Answer:

   Array.isArray(data) -> Option A

4. Quick Check:

   Array.isArray([]) = true [OK]

Hint: Use Array.isArray() to check arrays safely [OK]

Common Mistakes:

• Using typeof with 'array' (invalid)
• Using instanceof which can fail across frames
• Comparing constructor to string instead of function

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

function isNumber(value: unknown): boolean {
  return typeof value === 'number';
}

console.log(isNumber('123'));
console.log(isNumber(123));

medium

A. false true

B. true true

C. true false

D. false false

Solution

1. Step 1: Check typeof for '123'

   For the string '123', typeof '123' returns 'string', so isNumber('123') returns false.

2. Step 2: Check typeof for 123

   For the number 123, typeof 123 returns 'number', so isNumber(123) returns true.

3. Final Answer:

   false true -> Option A

4. Quick Check:

   typeof '123' = string, typeof 123 = number [OK]

Hint: typeof returns 'number' only for number primitives [OK]

Common Mistakes:

• Assuming string '123' is a number
• Confusing typeof results
• Ignoring return boolean values

4. Identify the error in this runtime type check function and fix it:

function isStringArray(value: unknown): boolean {
  return typeof value === 'string' && Array.isArray(value);
}

medium

A. No error, function is correct

B. Use Array.isArray(value) only, remove typeof check

C. Check should be typeof value === 'object' instead of 'string'

D. Check should be typeof value[0] === 'string' inside array

Solution

1. Step 1: Analyze the current condition

   The function checks if value is both a string and an array, which is impossible.

2. Step 2: Correct the logic for string arrays

   We should check if value is an array, then verify its elements are strings, e.g., typeof value[0] === 'string'.

3. Final Answer:

   Check should be typeof value[0] === 'string' inside array -> Option D

4. Quick Check:

   Array with string elements needs element type check [OK]

Hint: Check array type first, then element types inside [OK]

Common Mistakes:

• Checking typeof array itself as 'string'
• Ignoring element type checks
• Assuming array is string without Array.isArray

5. You receive data of unknown type and want to safely check if it is an object with a numeric property id. Which runtime type checking strategy is best?

hard

A. Use Array.isArray(data) and check data.id

B. Check typeof data === 'object' and typeof data.id === 'number'

C. Check typeof data === 'string' and parse data.id

D. Use data instanceof Number to check id

Solution

1. Step 1: Confirm data is an object

   Use typeof data === 'object' to ensure data is an object (and not null).

2. Step 2: Check the property type

   Check typeof data.id === 'number' to confirm the id property is numeric.

3. Final Answer:

   Check typeof data === 'object' and typeof data.id === 'number' -> Option B

4. Quick Check:

   Object with numeric id needs both checks [OK]

Hint: Check object type then property type stepwise [OK]

Common Mistakes:

• Using Array.isArray for objects
• Checking string type for object
• Using instanceof Number for primitives