How can one assert that a variable in TypeScript will not be null after a specific function is invoked?

Question

How can one assert that a variable in TypeScript will not be null after a specific function is invoked?

One of the challenges I am facing is dealing with lazy initialization in a particular class.

class LazyWorker {
    private state: string | undefined;

    lazyInit() {
        if (this.state === undefined) {
            //Numerous statements go here
            //That will ultimately initialize the this.state property
            this.state = 'aaa'

            //I want to avoid repeating those statements...
            //Following the DRY principle, correct? 
        }
    }

    doSomething() {
        this.lazyInit();

        this.state.startsWith('doSomething');
    }

    doSomethingElse() {
        this.lazyInit();

        this.state.endsWith('doSomethingElse');
    }
}

However, the issue arises when using the doSomething methods as the compiler warns that this.state could be undefined.

I found a workaround by defining the property like this, but it feels clumsy and can give the wrong impression that the property is never undefined.

class LazyWorker {
    private state: string = undefined as any as string;

Is there a more elegant solution to overcome this issue?

typescript

Answer 1

Answer №1

If the variable state is typically not set to undefined, you may want to remove the undefined type and use a definite assignment assertion:

class LazyWorker {
    private state!: string;
    // ...
}

Alternatively, you can choose to use a not null assertion each time you access the state property:

class LazyWorker {
    private state: string | undefined;

    initializeState() {
        //Many statements here
        //That are sure to initialize the this.state property
        this.state = 'aaa'

        //Avoiding repetition of these statements...
        //Following the DRY principle, correct? 
    }

    doSomething() {
        this.initializeState();

        this.state!.startsWith('doSomething');
    }

    doSomethingElse() {
        this.initializeState();

        this.state!.endsWith('doSomethingElse');
    }
}

Both of these approaches are not type-safe and could lead to runtime errors.

Custom assertion functions are not supported by TypeScript; it only supports type guards that require an if statement to function correctly, but only for public properties. It's possible to make it work, but it might be overly complex:

class LazyWorker {
    state: string | undefined;

    initializeState(): this is this & { state: string } {
        //Many statements here
        //That are sure to initialize the this.state property
        this.state = 'aaa'

        //Avoiding repetition of these statements...
        //Following the DRY principle, correct? 
        return true;
    }

    doSomething() {
        if(!this.initializeState()) return;

        this.state.startsWith('doSomething');
    }

    doSomethingElse() {
        if(!this.initializeState()) return;

        this.state.endsWith('doSomethingElse');
    }
}

Answer 2

If the variable state is typically not set to undefined, you may want to remove the undefined type and use a definite assignment assertion:

class LazyWorker {
    private state!: string;
    // ...
}

Alternatively, you can choose to use a not null assertion each time you access the state property:

class LazyWorker {
    private state: string | undefined;

    initializeState() {
        //Many statements here
        //That are sure to initialize the this.state property
        this.state = 'aaa'

        //Avoiding repetition of these statements...
        //Following the DRY principle, correct? 
    }

    doSomething() {
        this.initializeState();

        this.state!.startsWith('doSomething');
    }

    doSomethingElse() {
        this.initializeState();

        this.state!.endsWith('doSomethingElse');
    }
}

Both of these approaches are not type-safe and could lead to runtime errors.

Custom assertion functions are not supported by TypeScript; it only supports type guards that require an if statement to function correctly, but only for public properties. It's possible to make it work, but it might be overly complex:

class LazyWorker {
    state: string | undefined;

    initializeState(): this is this & { state: string } {
        //Many statements here
        //That are sure to initialize the this.state property
        this.state = 'aaa'

        //Avoiding repetition of these statements...
        //Following the DRY principle, correct? 
        return true;
    }

    doSomething() {
        if(!this.initializeState()) return;

        this.state.startsWith('doSomething');
    }

    doSomethingElse() {
        if(!this.initializeState()) return;

        this.state.endsWith('doSomethingElse');
    }
}

Answer 3

Answer №2

Utilize the non-null assertion (exclamation mark) to handle potential null values

this.state!.startsWith('doSomething');

If feasible, ensure state is initialized in the constructor method

private state: string;

constructor() {
  this.state = 'aaa';
}

Typescript is continuously evolving and may require adjustments like these for optimal functionality.

In this scenario, I believe your proposed approach is viable, and remember - don’t let TypeScript slow you down

Answer 4

Utilize the non-null assertion (exclamation mark) to handle potential null values

this.state!.startsWith('doSomething');

If feasible, ensure state is initialized in the constructor method

private state: string;

constructor() {
  this.state = 'aaa';
}

Typescript is continuously evolving and may require adjustments like these for optimal functionality.

In this scenario, I believe your proposed approach is viable, and remember - don’t let TypeScript slow you down

How can one assert that a variable in TypeScript will not be null after a specific function is invoked?

Answer №1

Answer №2

Similar questions

Using TypeScript classes along with functions to capture JSON data

Ways to invoke a function in an angular component from a separate component located in a different .ts file

Angular2 - Utilizing modules in Angular applications

Encountering the error message "React child is not valid as a Gatsby wrapRootElement" while using TypeScript with Gatsby

Trying out MUI checkbox functionality with react-testing-library

Iterating through an object using the forEach method (uncommon practice)

The Intl.DateTime formatter consistently generates incorrect times even after refreshing the component in a React application

Utilize React to iterate through an object using the .map

Error encountered while building with Next.js using TypeScript: SyntaxError - Unexpected token 'export' in data export

What is the reason behind having to refresh the page or switch to another tab for the field to display?

Best practices for annotating component props that can receive either a Component or a string representing an HTML tag

What is the best way to create a type that can accept either a string or a

I am attempting to update the URL of an iframe dynamically, but I am encountering an issue: the Error message stating that an Unsafe value is being

Why is it necessary to re-export both * and { default } in zustand.js?

Display a loading spinner while refreshing a list

Winston's createLogger function is not defined

Restricting Method Arguments in TypeScript to a Specific Type

Updating the model in Angular 2 using two-way binding

Angular 5: dynamic component swapping

Prisma: choose from numerous options in a many-to-many relationship with various criteria