Is it possible for TypeScript to automatically detect when an argument has been validated?

Question

Is it possible for TypeScript to automatically detect when an argument has been validated?

Currently, I am still in the process of learning Typescript and Javascript so please bear with me if I overlook something.

The issue at hand is as follows:

When calling this.defined(email), VSCode does not recognize that an error may occur if 'email' is undefined. This discrepancy arises from validateEmail() accepting a string? argument, leading the compiler to believe it could potentially receive an undefined value (as per my understanding). Is there a way to reassure the compiler that this scenario is acceptable? Or am I overlooking a crucial detail?

I intend to utilize Validate.validateEmail() in other classes as well, which poses the same problem in those scenarios too.

Validate.ts

export default class Validate {
    static validateEmail(email?: string) {
        // TODO: Properly test this regex.
        const emailRegex = new RegExp('^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$')

        this.defined(email);
        this.notEmpty(email);

        if (!emailRegex.test(email)) {
            throw new SyntaxError("The email entered is not valid");
        }
    }

    static defined(text?: string) {
        if (!text) {
            throw new SyntaxError("The text recieved was not defined.");
        }
    }

    static notEmpty(text: string) {
        if (text.length < 1) {
            throw new SyntaxError("The text entered is empty.");
        }
    }
}

javascript typescript validation visual-studio-code

Answer 1

Answer №1

If you want to ensure the type of a variable, consider using a type guard. This type guard helps in asserting the type of a specific variable by following this example:

export default class Validate {
  public static validateEmail(email?: string) {
    const emailRegex = new RegExp(
      '^(([^<>()[]\\.,;:s@"]+(.[^<>()[]\\.,;:s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$'
    );

    if (!Validate.defined(email)) {
      throw new SyntaxError('The text received was not defined.');
    }

    if (!emailRegex.test(email)) {
      throw new SyntaxError('The email entered is not valid');
    }
  }

  public static defined(text?: string): text is string {
    return !!text;
  }

  public static notEmpty(text: string) {
    if (text.length < 1) {
      throw new SyntaxError('The text entered is empty.');
    }
  }
}

The only drawback is that you will still require an if statement and the throw expression exists outside the function.

Alternatively, you can opt for another approach like this one, which solves those issues, but necessitates reassigning email to the function's outcome.

export default class Validate {
  public static validateEmail(email?: string) {
    const emailRegex = new RegExp(
      '^(([^<>()[]\\.,;:s@"]+(.[^<>()[]\\.,;:s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$'
    );

    email = Validate.defined(email);

    if (!emailRegex.test(email)) {
      throw new SyntaxError('The email entered is not valid');
    }
  }

  public static defined(text?: string): string {
    if (!text) {
      throw new SyntaxError('The text received was not defined.');
    }
    return text;
  }

  public static notEmpty(text: string) {
    if (text.length < 1) {
      throw new SyntaxError('The text entered is empty.');
    }
  }
}

Answer 2

If you want to ensure the type of a variable, consider using a type guard. This type guard helps in asserting the type of a specific variable by following this example:

export default class Validate {
  public static validateEmail(email?: string) {
    const emailRegex = new RegExp(
      '^(([^<>()[]\\.,;:s@"]+(.[^<>()[]\\.,;:s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$'
    );

    if (!Validate.defined(email)) {
      throw new SyntaxError('The text received was not defined.');
    }

    if (!emailRegex.test(email)) {
      throw new SyntaxError('The email entered is not valid');
    }
  }

  public static defined(text?: string): text is string {
    return !!text;
  }

  public static notEmpty(text: string) {
    if (text.length < 1) {
      throw new SyntaxError('The text entered is empty.');
    }
  }
}

The only drawback is that you will still require an if statement and the throw expression exists outside the function.

Alternatively, you can opt for another approach like this one, which solves those issues, but necessitates reassigning email to the function's outcome.

export default class Validate {
  public static validateEmail(email?: string) {
    const emailRegex = new RegExp(
      '^(([^<>()[]\\.,;:s@"]+(.[^<>()[]\\.,;:s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$'
    );

    email = Validate.defined(email);

    if (!emailRegex.test(email)) {
      throw new SyntaxError('The email entered is not valid');
    }
  }

  public static defined(text?: string): string {
    if (!text) {
      throw new SyntaxError('The text received was not defined.');
    }
    return text;
  }

  public static notEmpty(text: string) {
    if (text.length < 1) {
      throw new SyntaxError('The text entered is empty.');
    }
  }
}

Answer 3

Answer №2

It is possible for the compiler to identify that a variable has a narrower type than what is annotated or inferred based on the control flow analysis within the code. For instance, in the code snippet below, the compiler recognizes that if the control flow reaches the this.notEmpty() call, then the variable email cannot be undefined:

if (!email) {
    throw new SyntaxError("The text received was not defined.");
}

this.notEmpty(email); // no error

However, simply moving the check to a different function does not work as expected. The compiler typically does not follow control flow into functions and methods during its analysis process. This limitation is due to the fact that it's not practical for the compiler to simulate all potential inputs and control flow paths through function calls. Therefore, it uses a heuristic which assumes that function calls do not impact variable types. As a result, the call to this.defined(email) does not affect the type of email, leading to an error when invoking this.notEmpty(email).

Fortunately, TypeScript 3.7 introduced "assertion functions" which enable you to specify a special return type for a function to inform the compiler that a variable passed to the function will be narrowed by it. Although the compiler doesn't infer such signatures automatically, you can manually add annotations to indicate that defined() asserts something about its argument:

static defined(text?: string): asserts text {
    if (!text) {
        throw new SyntaxError("The text received was not defined.");
    }
}

The return type of defined() is asserts text, indicating that text will be truthy after calling defined(). Applying this to your original example resolves the issue:

this.defined(email);
this.notEmpty(email); // now works!

Great! I hope this explanation helps. Good luck!

Check out the code on the TypeScript Playground.

Answer 4

It is possible for the compiler to identify that a variable has a narrower type than what is annotated or inferred based on the control flow analysis within the code. For instance, in the code snippet below, the compiler recognizes that if the control flow reaches the this.notEmpty() call, then the variable email cannot be undefined:

if (!email) {
    throw new SyntaxError("The text received was not defined.");
}

this.notEmpty(email); // no error

However, simply moving the check to a different function does not work as expected. The compiler typically does not follow control flow into functions and methods during its analysis process. This limitation is due to the fact that it's not practical for the compiler to simulate all potential inputs and control flow paths through function calls. Therefore, it uses a heuristic which assumes that function calls do not impact variable types. As a result, the call to this.defined(email) does not affect the type of email, leading to an error when invoking this.notEmpty(email).

Fortunately, TypeScript 3.7 introduced "assertion functions" which enable you to specify a special return type for a function to inform the compiler that a variable passed to the function will be narrowed by it. Although the compiler doesn't infer such signatures automatically, you can manually add annotations to indicate that defined() asserts something about its argument:

static defined(text?: string): asserts text {
    if (!text) {
        throw new SyntaxError("The text received was not defined.");
    }
}

The return type of defined() is asserts text, indicating that text will be truthy after calling defined(). Applying this to your original example resolves the issue:

this.defined(email);
this.notEmpty(email); // now works!

Great! I hope this explanation helps. Good luck!

Check out the code on the TypeScript Playground.

Answer 5

Answer №3

Your code is failing to compile because the notEmpty function needs to accept a nullable string parameter. This is necessary because you are passing a nullable string as an argument at the call site. The corrected code below addresses the issues in your original code.

export default class Validate {
    static validateEmail(email?: string) {
        // TODO: Properly test this regex.
        const emailRegex = new RegExp('^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$')

        this.defined(email);
        this.notEmpty(email);

        if (email && !emailRegex.test(email)) {
            throw new SyntaxError("The email entered is not valid");
        }
    }

    static defined(text?: string) {
        if (!text) {
            throw new SyntaxError("The text received was not defined.");
        }
    }

    static notEmpty(text?: string) {
        if (text && text.length < 1) {
            throw new SyntaxError("The text entered is empty.");
        }
    }
}

Answer 6

Your code is failing to compile because the notEmpty function needs to accept a nullable string parameter. This is necessary because you are passing a nullable string as an argument at the call site. The corrected code below addresses the issues in your original code.

export default class Validate {
    static validateEmail(email?: string) {
        // TODO: Properly test this regex.
        const emailRegex = new RegExp('^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$')

        this.defined(email);
        this.notEmpty(email);

        if (email && !emailRegex.test(email)) {
            throw new SyntaxError("The email entered is not valid");
        }
    }

    static defined(text?: string) {
        if (!text) {
            throw new SyntaxError("The text received was not defined.");
        }
    }

    static notEmpty(text?: string) {
        if (text && text.length < 1) {
            throw new SyntaxError("The text entered is empty.");
        }
    }
}

Is it possible for TypeScript to automatically detect when an argument has been validated?

Validate.ts

Answer №1

Answer №2

Answer №3

Similar questions

Acquire JSON information from PHP utilizing JavaScript

waiting for the import statement in a React/NextJS/Typescript project to resolve

Error: Unable to access $rootScope in the http interceptor response function

Tips for accessing the following element within an array using a for loop with the syntax for (let obj of objects)

Guide to substituting the index value with the user's specific choice

Navigate to a particular section in the webpage

The AWS API Gateway quickly times out when utilizing child_process within Lambda functions

Out of nowhere, an error popped up indicating an undefined Python version in my Jupyter Notebook within Visual Studio Code

Generate visual representations of data sorted by category using AngularJS components

What is the best location in my redux store to store my socket connection?

Accessing iframe's HTML using a server-side solution by circumventing the Cross-Domain Policy

Exploring JSON with JavaScript

Adjust the height for just one md-tab

Trouble persists in saving local images from Multer array in both Express and React

Arrange fixed-position elements so that they adhere to the boundaries of their adjacent siblings

Eliminate a specific element from the dataset

Unit testing Firebase function with Jest for mocking

Tips for changing input field type from "password" to "text" in Angular?

How can I change :hover to a clickable element instead?

Tips for customizing the AjaxComplete function for individual ajax calls