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.