Exploring the narrowing capabilities of TypeScript within while loops

Question

Exploring the narrowing capabilities of TypeScript within while loops

When I write while loops, there are times when I know for sure that a certain value exists (connection in this case), but the control flow analysis is unable to narrow it down. Here's an illustration:

    removeVertex(vertex: string) {
        const connections = this.adjacencyList[vertex];
        while (connections.length) {
            const connection = connections.pop(); // <- This value can never be undefined
            this.removeEdge(connection!.node, vertex); // <- Avoiding unnecessary casting
        }
    }

Usually, my go-to solution is simply adding ! to indicate to the compiler that a specific type cannot be undefined. However, I am curious if there is a more elegant approach to addressing this issue.

Edit: adjusted placement of ! as per comments suggestion

typescript

Answer 1

Answer №1

Here are a couple of strategies you can employ:

You have the option to utilize a type assertion function
You can rework the loop (in this scenario)

Type Assertion Function

The type assertion function involves an assertion supported by runtime checking to ensure correctness:

function assertNotUndefined<T>(x: T): x is Exclude<T, undefined> {
    if (x === undefined) {
        throw new Error(`Value was undefined`);
    }
}

Subsequently, the loop becomes:

removeVertex(vertex: string) {
    const connections = this.adjacencyList[vertex];
    while (connections.length) {
        const connection = connections.pop();
        assertNotUndefined(connection);
        this.removeEdge(connection.node, vertex);
    }
}

Rewriting the Loop

In this particular situation, another alternative is to slightly modify the loop:

removeVertex(vertex: string) {
    const connections = this.adjacencyList[vertex];
    let connection: ConnectionType | undefined;
    while ((connection = connections.pop()) !== undefined) {
        this.removeEdge(connection.node, vertex);
    }
}

...however, this adjustment applies strictly to this specific loop. :-)

Answer 2

Here are a couple of strategies you can employ:

You have the option to utilize a type assertion function
You can rework the loop (in this scenario)

Type Assertion Function

The type assertion function involves an assertion supported by runtime checking to ensure correctness:

function assertNotUndefined<T>(x: T): x is Exclude<T, undefined> {
    if (x === undefined) {
        throw new Error(`Value was undefined`);
    }
}

Subsequently, the loop becomes:

removeVertex(vertex: string) {
    const connections = this.adjacencyList[vertex];
    while (connections.length) {
        const connection = connections.pop();
        assertNotUndefined(connection);
        this.removeEdge(connection.node, vertex);
    }
}

Rewriting the Loop

In this particular situation, another alternative is to slightly modify the loop:

removeVertex(vertex: string) {
    const connections = this.adjacencyList[vertex];
    let connection: ConnectionType | undefined;
    while ((connection = connections.pop()) !== undefined) {
        this.removeEdge(connection.node, vertex);
    }
}

...however, this adjustment applies strictly to this specific loop. :-)

Exploring the narrowing capabilities of TypeScript within while loops

Answer №1

Type Assertion Function

Rewriting the Loop

Similar questions

Do we need to import Vue in every component when using Nuxt with TypeScript?

What are some ways to conceal methods within a class so that they are not accessible outside of the constructor

An object resulting from the combination of two separate objects

Resolving TypeScript Problem: Showing Error Alerts from React Hook Form

Efficiently loading Ionic 3 components within a tab with lazy-loading functionality

Preventing Redundancy in Angular 2: Tips for Avoiding Duplicate Methods

Limit the selection of 'pickable' attributes following selections in the picking function (TypeScript)

Error in Radix UI encountered while attempting to use "react-accordion"

I can't figure out why I'm receiving undefined even though all the variables are populated with the necessary

Guide on dynamically applying a CSS rule to an HTML element using programming techniques

utilizing tabview for component replacement

React - Component not updating after Axios call in separate file

The function 'appendChild' is not recognized on the type 'unknown'.ts(2339)

The module has defined the component locally, however, it has not been made available for

What is the best method to locate an element<T> within an Array[T] when <T> is an enum?

What is causing the subscriber to receive the error message "Cannot access 'variable' before initialization" while referencing itself?

Answer found: How to effectively filter data arrays in a React client application

Refining strings to enum keys in TypeScript

Expanding constructor in TypeScript

Why does the property of {{hero.name}} function properly in a <h> tag but not in an <img> tag?