Runtime type checking strategies in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to check if a variable is a string at runtime.

Typescript

function isString(value: unknown): boolean {
  return typeof value === [1];
}

Drag options to blanks, or click blank then click option'

A"string"

B"number"

C"boolean"

D"object"

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'number' or 'boolean' instead of 'string' in the typeof check.

Forgetting to use quotes around the type string.

Use typeof value === "string" to check if the value is a string at runtime.

2fill in blank

medium

Complete the code to check if a value is an array at runtime.

Typescript

function isArray(value: unknown): boolean {
  return Array.[1](value);
}

Drag options to blanks, or click blank then click option'

AisObject

Bfrom

Cof

DisArray

Attempts:

3 left

💡 Hint

Common Mistakes

Using Array.of or Array.from which create arrays but don't check types.

Using a non-existent method like isObject.

Use Array.isArray(value) to check if the value is an array at runtime.

3fill in blank

hard

Fix the error in the code to check if a value is a number at runtime.

Typescript

function isNumber(value: unknown): boolean {
  return typeof value === [1];
}

Drag options to blanks, or click blank then click option'

Anumber

B'number'

C"number"

DNumber

Attempts:

3 left

💡 Hint

Common Mistakes

Using the bare word number without quotes causes a syntax error.

Using the Number object instead of the string type name.

The typeof operator returns a string, so the type must be in quotes like "number".

4fill in blank

hard

Fill both blanks to create a runtime check for an object that is not null.

Typescript

function isObject(value: unknown): boolean {
  return typeof value === [1] && value !== [2];
}

Drag options to blanks, or click blank then click option'

A"object"

Bnull

C"null"

Dundefined

Attempts:

3 left

💡 Hint

Common Mistakes

Comparing value !== "null" instead of null.

Not checking for null and getting false positives.

Check that typeof value === "object" and that value !== null because null is also of type "object" in JavaScript.

5fill in blank

hard

Fill all three blanks to create a runtime check for a string array.

Typescript

function isStringArray(value: unknown): boolean {
  return Array.[1](value) && value.every(item => typeof item === [2] && item !== [3]);
}

Drag options to blanks, or click blank then click option'

AisArray

B"string"

Cnull

D"object"

Attempts:

3 left

💡 Hint

Common Mistakes

Using typeof item === 'object' instead of 'string'.

Not checking for null values inside the array.

Use Array.isArray(value) to check if it's an array, then check every item is a string and not null.

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