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

I'm in the process of putting together a node.js project using typescript, but I'm a little unsure about the steps needed to

React Component Fails to Refresh After Redux Modifications

Are there any more efficient methods to retrieve an object from an arrow function in TypeScript?

Fix the TypeScript issue encountered during a CDK upgrade process

Validating Forms in TypeScript

Guide on updating a table row upon clicking the edit button in an Angular 12 template-driven form

Is it possible to modify the content of an element with a click event in Angular/HTML?

Why is my Typescript event preventDefault function ineffective?

Indicate the type of content returned by a Controller

classes_1.Individual is not a callable

How can I verify the validity of a regular expression in Typescript without encountering a syntax error?

Incorporate a 'Select All' functionality into ion-select by adding a dedicated button

Is there a way to inform TypeScript that the process is defined rather than undefined?

Mastering the Implementation of Timetable.js in Angular with TypeScript

Which symbol or character corresponds to the public "get symbol" method?

How to access an element through the router-outlet in Angular 6?

Creating a React component with a reference using TypeScript

Troubleshooting problems with permissions when using the AWS IAM assumeRole function with session

Tips for successfully importing $lib in SvelteKit without encountering any TypeScript errors

Using useEffect with promises causing TypeScript errors