Understanding Validation Decorators in TypeScript

When building applications, data validation is an essential aspect to ensure the integrity and accuracy of user input. One way to perform data validation in TypeScript is by using validation decorators. In this article, we will explore the concept of validation decorators in TypeScript and how they can be used to perform data validation in an efficient and reusable manner.

What are Validation Decorators?

Validation decorators are a powerful feature in TypeScript that allow you to define validation rules for class properties. These decorators can be applied to properties to enforce specific validation constraints on the values assigned to them.

class User {
  @IsNotEmpty()
  @IsEmail()
  email: string;

  @IsNotEmpty()
  password: string;
}

In the example above, @IsNotEmpty() and @IsEmail() are validation decorators applied to the email property. These decorators ensure that the email property is not empty and is a valid email address.

How to Use Validation Decorators

To start using validation decorators, you need to install the class-validator library from NPM. This library provides a set of pre-built validation decorators that you can use in your TypeScript projects.

npm install class-validator

Once you have installed the class-validator library, you can import the necessary decorators and apply them to your class properties.

import { IsNotEmpty, IsEmail } from 'class-validator';

class User {
  @IsNotEmpty()
  @IsEmail()
  email: string;

  @IsNotEmpty()
  password: string;
}

In the example above, we import the IsNotEmpty and IsEmail decorators from the class-validator library and apply them to the email and password properties of the User class.

Performing Validation

To perform validation using decorators, you can utilize the validate() function provided by the class-validator library. This function takes an instance of the class and returns an array of validation errors, if any.

import { validate } from 'class-validator';

const user = new User();
user.email = 'test@example.com';
user.password = '';

validate(user).then(errors => {
  if (errors.length > 0) {
    console.log('Validation errors:', errors);
  } else {
    console.log('Validation successful');
  }
});

In the example above, we create an instance of the User class and assign values to the email and password properties. We then call the validate() function and handle the validation errors, if any.

Custom Validation Decorators

Apart from the pre-built decorators provided by the class-validator library, you can also create your own custom validation decorators. Custom decorators allow you to define validation rules specific to your application’s requirements.

To create a custom validation decorator, you need to declare a function that takes the value to be validated as an argument and returns a boolean indicating whether the value is valid or not.

function IsEvenNumber() {
  return function (target: Object, propertyName: string) {
    registerDecorator({
      name: 'isEvenNumber',
      target: target.constructor,
      propertyName: propertyName,
      validator: {
        validate(value: any) {
          return typeof value === 'number' && value % 2 === 0;
        },
        defaultMessage() {
          return 'The value must be an even number';
        },
      },
    });
  };
}

class NumberHolder {
  @IsEvenNumber()
  number: number;
}

In the example above, we define a custom validation decorator @IsEvenNumber() that validates if a number is even. This decorator uses the registerDecorator() function provided by the class-validator library to register the custom validator.

Conclusion

Validation decorators are a powerful feature in TypeScript that can greatly simplify the process of performing data validation. By using validation decorators, you can define validation rules for class properties and ensure the integrity of user input. The class-validator library provides a wide range of pre-built decorators and allows you to create your own custom decorators to suit your application’s needs.

In this article, we have explored the concept of validation decorators, how to use them for data validation, and how to create custom validation decorators. With this knowledge, you can now implement robust data validation in your TypeScript applications.

Happy coding!