Understanding Type Guards in TypeScript: A Deep Dive into User Defined Functions

Learn how to effectively use `type guards` in TypeScript for type narrowing, featuring solutions to common challenges faced in type checking.
---

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: User defined type guard function and type narrowing to more specific type

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Exploring Type Guards in TypeScript

In TypeScript, type guards are a powerful tool that help developers ensure correctness in data handling by checking types at runtime. One common scenario is the need to differentiate between various types when working with union types. But what happens when you encounter issues with type narrowing in your else block? In this guide, we'll address a specific problem related to this and explore the concept of “type branding” that can help solve it.

The Problem Statement

Let's consider a situation where you have a user-defined type guard function to check if a value is a number greater than 1000. Here's a simplified example of that function:

[[See Video to Reveal this Text or Code Snippet]]

You might use this function as follows:

[[See Video to Reveal this Text or Code Snippet]]

The issue arises in the else block: Even though we know that strOrNum is not a number, TypeScript narrows its type, which may not be the desired behavior. The question now is: Are type guards meant only for type checking, or can they provide additional context for the values they are applied to?

Solution: Type Branding

To address this challenge, we can use a technique called type branding. This concept allows you to create nominal types in TypeScript's structural type system. While TypeScript inherently manages structural types (i.e., the shape of an object), type branding provides a way to add unique identifiers to types.

How Type Branding Works

The core idea behind type branding is to create a type that typescript recognizes distinctly, even if its structure is similar to another type. Here’s how we can implement our solution:

Create a Type for Big Numbers:
Define a custom type that includes a brand identifier. For this example, we will use a class called As:

[[See Video to Reveal this Text or Code Snippet]]

Redefine the Type Guard Function:
Modify the isBigNumber function to reflect this new conditional logic:

[[See Video to Reveal this Text or Code Snippet]]

Implementing the Function:
Now, let’s create a function that operates on BigNumbers:

[[See Video to Reveal this Text or Code Snippet]]

Using the Type Guard:
Now in our conditional logic, we can use this type guard without losing context:

[[See Video to Reveal this Text or Code Snippet]]

Understanding the As Class

The As class is implemented abstractly to provide type branding. Here's a simplified version:

[[See Video to Reveal this Text or Code Snippet]]

Key Concepts:

declare: Indicates to TypeScript that this class does not generate compiled JavaScript code.

abstract: Prevents instantiation of the As class which helps maintain the conceptual structure.

Record<Tag, true>: Allows us to create brands that can coexist, enabling multiple types to be recognized uniquely.

Conclusion

In summary, user defined type guard functions are a crucial part of ensuring type safety in TypeScript. By implementing type branding, we can create more robust and usable type checks that avoid unintended narrowing. This allows us to maintain the integrity of our type systems while preserving the usability and flexibility we desire in our code. So, next time you face a similar issue, consider utilizing type branding for a neat solution!