Custom type guard functions in Typescript - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a custom type guard function in TypeScript?

A custom type guard function is a special function that checks if a value matches a specific type and tells TypeScript about this check, helping it understand the type better during code execution.

beginner

How do you define a custom type guard function signature?

You define it with a return type using the syntax: <code>paramName is Type</code>. For example, <code>function isString(value: any): value is string</code> means the function returns true if <code>value</code> is a string.

intermediate

Why use custom type guard functions instead of simple type checks?

Custom type guards help TypeScript narrow down types in complex situations, improving code safety and enabling better autocompletion and error checking.

beginner

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

This function checks if the input value is a number. If yes, it returns true and tells TypeScript that value is a number from that point on.

intermediate

How does TypeScript behave after a custom type guard returns true?

TypeScript narrows the type of the checked variable to the type specified in the guard, allowing safer access to properties or methods of that type.

What is the correct return type for a custom type guard function checking if a value is a string?

A boolean

B string

C value is string

D value: string

The return type for a custom type guard uses the syntax 'value is string' to tell TypeScript about the type narrowing.

Which keyword is used inside a custom type guard function to check the type of a variable?

A typeof or instanceof depending on the type

B instanceof

C typeof and instanceof together

D typeof

You can use 'typeof' for primitive types and 'instanceof' for class instances inside custom type guards.

What benefit does a custom type guard provide in TypeScript?

A Removes the need for type annotations

B Runs faster code

C Automatically converts types

D Improves type safety by narrowing types

Custom type guards help TypeScript narrow types, improving safety and developer experience.

Which of these is a valid custom type guard function signature?

A function isArray(value: any): boolean

B function isArray(value: any): value is any[]

C function isArray(value: any): any[]

D function isArray(value: any): void

The signature 'value is any[]' tells TypeScript this function narrows the type to an array.

After a custom type guard returns true, what can you safely do with the variable?

A Access properties or methods specific to the narrowed type

B Assign it to any type without error

C Ignore type checking

D Use it only as 'any' type

TypeScript knows the variable has the narrowed type, so you can safely use its specific properties or methods.

Explain what a custom type guard function is and how it helps TypeScript.

Think about how TypeScript understands variable types better after the guard.

Write a simple custom type guard function that checks if a value is an array.

Use Array.isArray to check the value inside the function.

Practice

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

easy

A. To declare a new type alias

B. To convert a value from one type to another

C. To check if a value matches a specific type and help TypeScript narrow types

D. To throw an error when a type mismatch occurs

Solution

1. Step 1: Understand what a type guard does

   A type guard checks if a value is of a certain type at runtime.

2. Step 2: Recognize the benefit in TypeScript

   It helps TypeScript narrow the type, making code safer and clearer.

3. Final Answer:

   To check if a value matches a specific type and help TypeScript narrow types -> Option C

4. Quick Check:

   Type guard = check type + narrow [OK]

Hint: Type guards confirm type and help TypeScript narrow it [OK]

Common Mistakes:

• Thinking type guards convert types
• Confusing type guards with error handling
• Believing type guards declare new types

2. Which of the following is the correct syntax for a custom type guard function named isString that checks if a value is a string?

easy

A. function isString(value: any): value is string { return typeof value === 'string'; }

B. function isString(value: any): boolean { return typeof value === 'string'; }

C. function isString(value: any): string { return typeof value === 'string'; }

D. function isString(value: any): value is boolean { return typeof value === 'string'; }

Solution

1. Step 1: Identify the return type for a type guard

   A custom type guard returns a type predicate like value is string.

2. Step 2: Check the function body

   The function should return true if typeof value === 'string'.

3. Final Answer:

   function isString(value: any): value is string { return typeof value === 'string'; } -> Option A

4. Quick Check:

   Type guard syntax = value is Type [OK]

Hint: Type guard return type uses 'value is Type' syntax [OK]

Common Mistakes:

• Using boolean instead of type predicate as return type
• Returning wrong type predicate
• Returning the type instead of a boolean

3. What will be the output of the following TypeScript code?

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

const input: any = 42;
if (isNumber(input)) {
  console.log(input.toFixed(2));
} else {
  console.log('Not a number');
}

medium

A. 42.00

B. Not a number

C. Error: toFixed is not a function

D. undefined

Solution

1. Step 1: Check the type guard function behavior

   The function isNumber returns true if value is a number.

2. Step 2: Analyze the if condition and output

   Since input is 42 (a number), the if block runs and input.toFixed(2) outputs '42.00'.

3. Final Answer:

   42.00 -> Option A

4. Quick Check:

   isNumber(42) = true, so prints 42.00 [OK]

Hint: If type guard true, use narrowed type safely [OK]

Common Mistakes:

• Assuming input is not a number
• Expecting runtime error on toFixed
• Confusing output with string conversion

4. Identify the error in this custom type guard function and choose the fix:

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

medium

A. Change function name to 'isArrayType'

B. Change return type to 'value is any[]' instead of 'value is Array'

C. Add explicit type annotation to parameter 'value: unknown'

D. Replace 'Array.isArray' with 'typeof value === "array"'

Solution

1. Step 1: Understand the return type syntax

   The return type should be a type predicate with a specific type, e.g., value is any[] for arrays.

2. Step 2: Identify the incorrect type usage

   Array alone is a constructor, not a type for arrays. Use any[] or a typed array instead.

3. Final Answer:

   Change return type to 'value is any[]' instead of 'value is Array' -> Option B

4. Quick Check:

   Array type predicate = value is any[] [OK]

Hint: Use 'value is Type[]' for arrays in type guards [OK]

Common Mistakes:

• Using 'Array' instead of 'any[]' or typed array
• Changing function name unnecessarily
• Using typeof 'array' which is invalid

5. Given the following types and function, which implementation correctly narrows the type to Dog using a custom type guard?

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

type Pet = Dog | Cat;

function isDog(pet: Pet): pet is Dog {
  // Which implementation is correct?
}

hard

A. return pet.meow === undefined;

B. return pet instanceof Dog;

C. return typeof pet.bark === 'function';

D. return (pet as Dog).bark !== undefined;

Solution

1. Step 1: Understand the interfaces and type guard goal

   We want to check if pet has a bark method to confirm it's a Dog.

2. Step 2: Evaluate the implementations

   Directly accessing pet.bark or pet.meow causes TypeScript compile errors because those properties do not exist on the union type Pet.
   pet instanceof Dog does not work because Dog is an interface, not a class with a constructor.
   Using (pet as Dog).bark !== undefined compiles due to the type assertion and performs a runtime check to see if the bark property exists.

3. Final Answer:

   return (pet as Dog).bark !== undefined; -> Option D

4. Quick Check:

   Type assertion enables property check in union type guards [OK]

Hint: Use type assertion inside type guards for union property checks [OK]

Common Mistakes:

• Using instanceof with interfaces
• Directly accessing properties on union types
• Checking absence of other type's method