Custom type guard functions in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of a custom type guard function

What is the output of the following TypeScript code when run with console.log(isStringOrNumber(42));?

Typescript

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

console.log(isStringOrNumber(42));

A false

B undefined

C TypeError

D true

💡 Hint

Think about what the function checks for the input value.

The function checks if the input is a string or a number. Since 42 is a number, it returns true.

🧠 Conceptual

intermediate

Purpose of custom type guard functions

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

A To declare a new type alias

B To convert a variable from one type to another

C To check the type of a variable at runtime and inform the compiler about it

D To throw an error if a type is incorrect

💡 Hint

Think about how TypeScript uses these functions to help with type safety.

Custom type guard functions check types at runtime and tell the compiler about the type, enabling safer code.

🔧 Debug

advanced

Identify the error in this custom type guard

What error will this TypeScript code produce when compiled?

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

const test = isArrayOfStrings(['hello', 5]);

Typescript

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

const test = isArrayOfStrings(['hello', 5]);

A No error, test is false

B TypeError at runtime

C test is true

D SyntaxError

💡 Hint

Check what the function returns for the given input.

The function returns false because not all items are strings. No compile or runtime error occurs.

📝 Syntax

advanced

Correct syntax for a custom type guard

Which option shows the correct syntax for a custom type guard function that checks if a value is a boolean?

A

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

B

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

C

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

D

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

💡 Hint

Remember the exact syntax for type predicates in TypeScript.

Option B uses the correct syntax: value is boolean as the return type.

🚀 Application

expert

Using a custom type guard in conditional code

Given the custom type guard below, what will be the output of the code?

interface Cat { meow: () => void; }
interface Dog { bark: () => void; }

type Pet = Cat | Dog;

function isCat(pet: Pet): pet is Cat {
  return (pet as Cat).meow !== undefined;
}

const pet: Pet = { bark: () => console.log('Woof!') };

if (isCat(pet)) {
  pet.meow();
} else {
  pet.bark();
}

Typescript

interface Cat { meow: () => void; }
interface Dog { bark: () => void; }

type Pet = Cat | Dog;

function isCat(pet: Pet): pet is Cat {
  return (pet as Cat).meow !== undefined;
}

const pet: Pet = { bark: () => console.log('Woof!') };

if (isCat(pet)) {
  pet.meow();
} else {
  pet.bark();
}

A Woof!

B Error: pet.meow is not a function

C No output

D Woof! Woof!

💡 Hint

Check what the type guard returns and which branch runs.

The pet object has only bark, so isCat returns false. The else branch runs and prints 'Woof!'.