Type predicates in practice in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of type predicate function usage

What is the output of this TypeScript code when run with console.log(filterStrings([1, 'hello', true, 'world']))?

Typescript

function isString(value: unknown): value is string {
  return typeof value === 'string';
}

function filterStrings(arr: unknown[]): string[] {
  return arr.filter(isString);
}

console.log(filterStrings([1, 'hello', true, 'world']));

A TypeError at runtime

B [1, "hello", true, "world"]

C ["1", "hello", "true", "world"]

D ["hello", "world"]

💡 Hint

Think about what the type predicate function isString returns for each element.

The isString function checks if a value is a string. The filterStrings function uses it to keep only strings from the array. So the output is an array of strings: ["hello", "world"].

🧠 Conceptual

intermediate

Understanding type predicate return type

Which of the following correctly declares a type predicate function that checks if a value is a number?

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

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

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

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

💡 Hint

Type predicates use the syntax paramName is Type as the return type.

Option B correctly uses value is number as the return type, which tells TypeScript this function narrows the type to number. Option B returns boolean but does not narrow type. Option B uses Number (the object type) instead of number (the primitive). Option B returns a union type which is incorrect for a type predicate.

🔧 Debug

advanced

Why does this type predicate not narrow correctly?

Consider this code snippet:

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

const data: unknown = ['a', 'b', 3];

if (isArrayOfStrings(data)) {
  console.log(data.map(s => s.toUpperCase()));
} else {
  console.log('Not an array of strings');
}

What will happen when this code runs?

A It prints 'Not an array of strings' because data contains a number.

B It prints ['A', 'B', '3'] converting all elements to uppercase.

C It throws a runtime error because data is not a string array.

D It prints ['A', 'B'] ignoring the number 3.

💡 Hint

Check what value.every returns when one element is not a string.

The function isArrayOfStrings returns false because value.every(elem => typeof elem === 'string') is false due to the number 3. So the else branch runs and prints 'Not an array of strings'.

📝 Syntax

advanced

Identify the syntax error in this type predicate function

Which option contains a syntax error in the type predicate declaration?

Typescript

function isBoolean(value: unknown): value is boolean {
  return typeof value === 'boolean';
}

A function isBoolean(value: unknown): value is boolean { return typeof value === 'boolean'; }

B function isBoolean(value: unknown): value is boolean { return typeof value === 'boolean' }

C function isBoolean(value unknown): value is boolean { return typeof value === 'boolean'; }

D function isBoolean(value: unknown): value is boolean { return typeof value === 'bool'; }

💡 Hint

Check the function parameter syntax carefully.

Option C is missing a colon between parameter name and type (value unknown instead of value: unknown), causing a syntax error. Option C uses 'bool' which is a logic error but not syntax error. Option C is missing a semicolon but that's allowed in TypeScript. Option C is correct.

🚀 Application

expert

Using type predicates to narrow union types in complex objects

Given these types and function, what is the output of processItem({ type: 'circle', radius: 5 })?

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

function isCircle(shape: Shape): shape is Circle {
  return shape.type === 'circle';
}

function processItem(item: Shape) {
  if (isCircle(item)) {
    return `Circle area: ${Math.PI * item.radius ** 2}`;
  } else {
    return `Square area: ${item.side ** 2}`;
  }
}

console.log(processItem({ type: 'circle', radius: 5 }));

A Circle area: 78.53981633974483

B Square area: 25

C TypeError at runtime

D Circle area: NaN

💡 Hint

Check how the type predicate narrows the union type to access radius safely.

The isCircle function narrows the type to Circle when shape.type === 'circle'. So inside the if block, item.radius is valid. The area is π * 5² = 78.53981633974483.

Practice

1.

What is the main purpose of a type predicate function in TypeScript?

easy

A. To convert one type to another automatically

B. To tell TypeScript the specific type of a variable after a check

C. To declare a new type alias

D. To throw an error if a type is incorrect

Solution

1. Step 1: Understand what a type predicate does

   A type predicate function returns a boolean and tells TypeScript the type of a variable when true.

2. Step 2: Identify the correct purpose

   It helps TypeScript narrow down types safely after a check, not convert or declare types.

3. Final Answer:

   To tell TypeScript the specific type of a variable after a check -> Option B

4. Quick Check:

   Type predicate = type narrowing [OK]

Hint: Type predicates confirm variable types after checks [OK]

Common Mistakes:

• Thinking type predicates convert types
• Confusing type predicates with type aliases
• Assuming type predicates throw errors

2.

Which of the following is the correct syntax for a type predicate function that checks if a value is a string?

function isString(value: unknown): ??? {
  return typeof value === 'string';
}

easy

A. value: string

B. string

C. boolean

D. value is string

Solution

1. Step 1: Recall type predicate syntax

   A type predicate function returns a boolean and uses the syntax paramName is Type in the return type.

2. Step 2: Match the syntax to the example

   The function returns true if value is a string, so the return type is value is string.

3. Final Answer:

   value is string -> Option D

4. Quick Check:

   Type predicate syntax = param is Type [OK]

Hint: Use 'param is Type' as return type for type predicates [OK]

Common Mistakes:

• Using just 'boolean' as return type
• Writing 'value: string' instead of 'value is string'
• Returning 'string' as type predicate

3.

What will be the output of this TypeScript code?

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

const data: unknown[] = [1, 'two', 3];
const numbers = data.filter(isNumber);
console.log(numbers);

medium

A. [1, 3]

B. [1, 'two', 3]

C. ['two']

D. []

Solution

1. Step 1: Understand the filter with type predicate

   The isNumber function returns true only for numbers, so filter keeps only numbers.

2. Step 2: Apply filter to the array

   From [1, 'two', 3], only 1 and 3 pass the check, so numbers is [1, 3].

3. Final Answer:

   [1, 3] -> Option A

4. Quick Check:

   Filter with type predicate keeps matching types [OK]

Hint: Filter with type predicate keeps only matching types [OK]

Common Mistakes:

• Assuming filter returns original array
• Thinking it returns only strings
• Confusing type predicate with type casting

4.

Identify the error in this type predicate function and choose the fix:

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

medium

A. Change return type to value is boolean

B. Change return type to boolean | undefined

C. Add explicit cast inside function

D. No error, function is correct

Solution

1. Step 1: Check the return type for type predicate

   The function returns a boolean but does not use the type predicate syntax value is boolean.

2. Step 2: Fix the return type

   To inform TypeScript about the type, the return type must be value is boolean, not just boolean.

3. Final Answer:

   Change return type to value is boolean -> Option A

4. Quick Check:

   Type predicate needs 'param is Type' return type [OK]

Hint: Use 'param is Type' for type predicate return type [OK]

Common Mistakes:

• Using plain boolean as return type
• Adding unnecessary casts
• Assuming no fix needed

5.

Given this code, what is the best way to safely extract all strings from a mixed array using a type predicate?

type Mixed = (string | number | boolean)[];

function isString(value: unknown): value is string {
  return typeof value === 'string';
}

const mixedArray: Mixed = ['hello', 42, true, 'world'];
// What code extracts only strings safely?

hard

A. const strings = mixedArray.map(x => x as string);

B. const strings = mixedArray.filter(x => typeof x === 'string');

C. const strings = mixedArray.filter(isString);

D. const strings = mixedArray.filter(x => x instanceof String);

Solution

1. Step 1: Understand the goal

   We want to get only strings from a mixed array safely, with TypeScript knowing the type.

2. Step 2: Use type predicate in filter

   Using filter(isString) uses the type predicate to narrow type safely, so strings is typed as string[].

3. Step 3: Compare other options

   const strings = mixedArray.filter(x => typeof x === 'string'); also works and does narrow type for TypeScript, but does not use the provided type predicate function. const strings = mixedArray.filter(x => x instanceof String); is incorrect because instanceof String checks object wrappers, not primitives. const strings = mixedArray.map(x => x as string); casts all elements to string unsafely.

4. Final Answer:

   const strings = mixedArray.filter(isString); -> Option C

5. Quick Check:

   Use type predicate function in filter for safe extraction [OK]

Hint: Filter with type predicate narrows type safely [OK]

Common Mistakes:

• Using instanceof String instead of typeof
• Casting all elements without filtering
• Not using type predicate for type safety