Runtime type checking strategies in Typescript - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is runtime type checking in TypeScript?

Runtime type checking means verifying the type of a value while the program is running, not just during compilation. It helps catch errors when data comes from outside sources like user input or APIs.

beginner

Name two common strategies for runtime type checking in TypeScript.

1. Using typeof and instanceof operators.
2. Using custom type guard functions that check object shapes.

intermediate

How does a custom type guard function work?

A custom type guard is a function that returns a boolean and uses the is keyword to tell TypeScript the type of a value if the function returns true. It checks properties or structure at runtime.

beginner

What is a limitation of using typeof for runtime type checking?

typeof only works well for primitive types like string, number, and boolean. It cannot check complex objects or arrays accurately.

intermediate

Why might you use a library like zod or io-ts for runtime type checking?

These libraries provide schemas to define expected data shapes and validate data at runtime easily. They help ensure data matches types and give clear error messages when it doesn't.

Which operator is best for checking if a value is a string at runtime in TypeScript?

A instanceof

B typeof

C is

D as

The typeof operator returns 'string' for string values, making it suitable for checking primitive types like strings.

What does a custom type guard function return to inform TypeScript about a type?

A A boolean with a type predicate using 'is'

B A string describing the type

C An object with type info

D A number representing the type

Custom type guards return a boolean and use a type predicate like value is Type to tell TypeScript the type when true.

Which runtime type checking method can verify the shape of an object?

A instanceof operator

B typeof operator

C Custom type guard functions

D as keyword

Custom type guard functions can check object properties to verify the shape and type at runtime.

Why is instanceof not always reliable for runtime type checking?

A It only works with class instances, not plain objects

B It cannot check primitive types

C It changes the type of the variable

D It only works at compile time

instanceof checks if an object is an instance of a class or constructor function, so it doesn't work well with plain objects or interfaces.

What advantage do libraries like zod provide for runtime type checking?

A They disable runtime checks

B They replace TypeScript's compile-time checks

C They convert types to strings

D They automate validation and provide clear error messages

Libraries like zod help define schemas and validate data easily at runtime, giving clear feedback when data doesn't match expected types.

Explain how you would create a custom type guard function in TypeScript to check if a value is a specific object type.

Think about a function that tests properties and tells TypeScript the type when true.

Describe the differences between using 'typeof', 'instanceof', and custom type guards for runtime type checking.

Consider what each method can and cannot check at runtime.

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