Type predicates in practice in Typescript

Introduction

Type predicates help your program know exactly what type a value is. This makes your code safer and easier to understand.

When you want to check if a value is a specific type before using it.

When you have a variable that could be one of many types and you want to handle each type differently.

When you want to tell TypeScript about a custom check that narrows down types.

When working with data from outside your program, like user input or API responses.

When you want to avoid errors by making sure a value is the right type before using it.

Syntax

Typescript

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

The value is string part is the type predicate. It tells TypeScript what type the value has if the function returns true.

Type predicates always return a boolean (true or false).

Examples

This function checks if a value is a number.

Typescript

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

This function checks if a value is an array.

Typescript

function isArray(value: unknown): value is any[] {
  return Array.isArray(value);
}

This function checks if an object looks like a User with name and age.

Typescript

function isUser(obj: any): obj is { name: string; age: number } {
  return typeof obj.name === 'string' && typeof obj.age === 'number';
}

Sample Program

This program uses a type predicate function isUser to check if each item in the data array is a User. It prints user info only for valid users.

Typescript

type User = { name: string; age: number };

function isUser(obj: any): obj is User {
  return typeof obj === 'object' && obj !== null &&
         typeof obj.name === 'string' && typeof obj.age === 'number';
}

const data: unknown[] = [
  { name: 'Alice', age: 30 },
  { name: 'Bob', age: 'unknown' },
  'hello',
  { name: 'Charlie', age: 25 }
];

for (const item of data) {
  if (isUser(item)) {
    console.log(`${item.name} is ${item.age} years old.`);
  } else {
    console.log('Not a valid user:', item);
  }
}

Important Notes

Type predicates help TypeScript understand your code better and catch mistakes early.

Always return a boolean from your type predicate functions.

Use type predicates when you want to safely work with values that might have different types.

Summary

Type predicates tell TypeScript what type a value has after a check.

They return true or false and help avoid errors.

Use them to safely handle values with uncertain types.

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