Type predicates in practice in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a type predicate function that checks if a value is a string.

Typescript

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

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

A"object"

B"number"

C"boolean"

D"string"

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'string' without quotes causes a syntax error.

Checking for 'number' instead of 'string' returns wrong results.

The typeof operator returns a string describing the type. To check for strings, use "string".

2fill in blank

medium

Complete the code to use the type predicate function in a conditional statement.

Typescript

function printLength(value: unknown) {
  if ([1](value)) {
    console.log(value.length);
  } else {
    console.log("Not a string");
  }
}

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

AisNumber

BisString

CisBoolean

DisObject

Attempts:

3 left

💡 Hint

Common Mistakes

Using a wrong predicate function like isNumber causes errors.

Not calling the function with parentheses causes syntax errors.

The function isString is the type predicate that checks if value is a string.

3fill in blank

hard

Fix the error in the type predicate function that checks if a value is an array of numbers.

Typescript

function isNumberArray(value: unknown): value is number[] {
  return Array.isArray(value) && value.every(item => typeof item === [1]);
}

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

A"number"

B"string"

C"boolean"

D"object"

Attempts:

3 left

💡 Hint

Common Mistakes

Checking for "string" instead of "number" causes wrong results.

Not using quotes around the type string causes syntax errors.

Each item in the array must be checked to be of type number using typeof item === "number".

4fill in blank

hard

Fill both blanks to create a type predicate that checks if a value is an object with a 'name' property of type string.

Typescript

function hasNameProperty(value: unknown): value is [1] {
  return typeof value === [2] && value !== null && 'name' in value && typeof (value as any).name === 'string';
}

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

Aobject

B"string"

C"object"

Dstring

Attempts:

3 left

💡 Hint

Common Mistakes

Using quotes around the type in the first blank causes errors.

Using 'object' without quotes in the second blank causes wrong runtime checks.

The type predicate returns true if value is an object (TypeScript type) and the runtime typeof is "object".

5fill in blank

hard

Fill all three blanks to create a type predicate that checks if a value is a function with a 'length' property greater than 1.

Typescript

function isFunctionWithLength(value: unknown): value is [1] {
  return typeof value === [2] && value !== null && (value as Function).length [3] 1;
}

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

AFunction

B"function"

C>

D<

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'function' without quotes in the second blank causes errors.

Using '<' instead of '>' in the third blank causes wrong logic.

The type predicate checks if value is a Function type, the runtime typeof is "function", and the function's length property is greater than 1.

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