Type predicates in practice in Typescript - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a type predicate in TypeScript?

A type predicate is a special return type in a function that tells TypeScript the type of a variable when the function returns true. It helps the compiler narrow down types in conditional checks.

beginner

How do you write a type predicate function signature?

You write it as <code>function isType(value: any): value is Type</code>. The <code>value is Type</code> part is the type predicate telling TypeScript what type <code>value</code> has if the function returns true.

intermediate

Why use type predicates instead of simple boolean functions?

Type predicates inform TypeScript about the type of a variable after a check, enabling better type safety and autocompletion. Simple boolean functions do not provide this type information.

beginner

Example: What does this function do?<br><pre>function isString(value: unknown): value is string { return typeof value === 'string'; }</pre>

This function checks if value is a string. If it returns true, TypeScript knows value is a string from that point on.

intermediate

Can type predicates be used with custom types or interfaces?

Yes! You can write type predicates to check if a value matches a custom interface or type, helping TypeScript narrow complex types in your code.

What does the syntax value is Type in a function return type mean?

A It tells TypeScript that if the function returns true, <code>value</code> has type <code>Type</code>.

B It means the function always returns a value of type <code>Type</code>.

C It declares a new type called <code>value is Type</code>.

D It restricts the function to accept only <code>Type</code> values.

The value is Type syntax is a type predicate telling TypeScript that when the function returns true, value is of type Type.

Which of these is a valid type predicate function signature?

A function isNumber(value: number): boolean

B function isNumber(value: any): boolean

C function isNumber(value: any): value is number

D function isNumber(value: any): number

Only option C uses the type predicate syntax value is number to inform TypeScript about the type.

What benefit do type predicates provide in TypeScript?

A They automatically convert types.

B They speed up program execution.

C They allow functions to return multiple types.

D They improve type safety by narrowing types after checks.

Type predicates help TypeScript understand the type of a variable after a check, improving type safety and developer experience.

Can type predicates be used to check if an object matches a custom interface?

A Yes, they can check any type including custom interfaces.

B No, only primitive types can be checked.

C Only arrays can be checked with type predicates.

D Type predicates only work with strings.

Type predicates can be written to check any type, including custom interfaces or complex types.

What happens if a type predicate function returns false?

A TypeScript throws a compile error.

B TypeScript assumes the variable is NOT of the specified type.

C The variable is automatically converted to the specified type.

D The function must be called again.

If the type predicate returns false, TypeScript knows the variable does not have the specified type.

Explain what a type predicate is and how it helps TypeScript with type checking.

Think about how TypeScript knows the type of a variable after a check.

Write a simple type predicate function that checks if a value is an array of numbers.

Use 'value is number[]' as the return type and check elements inside the array.

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