TypeScript: Building a Simple Data Validation Library

Written by

learnmodernjavascript

in

Data validation is a cornerstone of robust software development. It ensures that the data your application receives and processes conforms to the expected format and constraints. This is crucial for preventing errors, maintaining data integrity, and enhancing the overall reliability of your application. Think of it as a gatekeeper, carefully examining every piece of data that tries to enter your system and only allowing the well-formed ones to pass through. Without proper validation, your application could be vulnerable to various issues, from simple data entry errors to more serious security vulnerabilities. This tutorial will guide you through building a simple, yet powerful, data validation library in TypeScript, equipping you with the skills to confidently handle data in your projects.

Why Data Validation Matters

Imagine building a form for users to register on your website. You need to collect their email addresses. Without validation, a user could accidentally (or maliciously) enter an invalid email address like “abc” or even leave the field blank. Your system might then try to send emails to these invalid addresses, leading to bounces, frustrated users, and potentially damaging your sender reputation. Data validation prevents these issues by verifying that the input conforms to the expected format (e.g., a valid email address structure). It’s not just about user input; data validation applies to any data your application receives, whether from APIs, databases, or configuration files.

Setting Up Your TypeScript Project

Before diving into the code, let’s set up our TypeScript project. If you’re new to TypeScript, it’s a superset of JavaScript that adds static typing. This means you can specify the data types of variables, function parameters, and return values, which helps catch errors early in the development process. Here’s how to get started:

  1. Initialize a new project: Open your terminal and navigate to the directory where you want to create your project. Run the following command:
npm init -y
  1. Install TypeScript: Install TypeScript as a development dependency:
npm install --save-dev typescript
  1. Create a `tsconfig.json` file: This file configures the TypeScript compiler. Run the following command to generate a basic `tsconfig.json` file:
npx tsc --init

You can customize the `tsconfig.json` to fit your project’s needs. For example, you might want to specify the output directory for the compiled JavaScript files (e.g., `”outDir”: “./dist”`).

  1. Create your TypeScript files: Create a directory for your source files (e.g., `src`) and create a file named `index.ts` inside it. This is where we’ll write our validation logic.

Building the Validation Library

Now, let’s build the core of our data validation library. We’ll start by defining some basic validation functions for common data types and constraints. We’ll aim to make the library modular and extensible so that you can easily add more validation rules in the future.

1. Defining Basic Validation Functions

Let’s create functions to validate strings, numbers, and booleans. Each function will take a value and return a boolean indicating whether the value is valid.

// src/index.ts

/**
 * Validates if a value is a string.
 *
 * @param value The value to validate.
 * @returns True if the value is a string, false otherwise.
 */
function isString(value: any): boolean {
  return typeof value === 'string';
}

/**
 * Validates if a value is a number.
 *
 * @param value The value to validate.
 * @returns True if the value is a number, false otherwise.
 */
function isNumber(value: any): boolean {
  return typeof value === 'number';
}

/**
 * Validates if a value is a boolean.
 *
 * @param value The value to validate.
 * @returns True if the value is a boolean, false otherwise.
 */
function isBoolean(value: any): boolean {
  return typeof value === 'boolean';
}

These are simple but essential building blocks. The `isString`, `isNumber`, and `isBoolean` functions check the type of the input using the `typeof` operator. This provides a basic level of validation.

2. Adding More Complex Validation Rules

Let’s add more sophisticated validation rules, such as checking for email addresses and minimum/maximum lengths for strings. We’ll also start using regular expressions for more complex pattern matching.


/**
 * Validates if a string is a valid email address.
 *
 * @param value The string to validate.
 * @returns True if the string is a valid email, false otherwise.
 */
function isEmail(value: string): boolean {
  if (!isString(value)) {
    return false;
  }
  // Regular expression for a basic email validation
  const emailRegex = /^[w-.]+@([w-]+.)+[w-]{2,4}$/;
  return emailRegex.test(value);
}

/**
 * Validates if a string's length is within a specified range.
 *
 * @param value The string to validate.
 * @param min The minimum length.
 * @param max The maximum length.
 * @returns True if the string length is within the range, false otherwise.
 */
function isStringLength(value: string, min: number, max: number): boolean {
  if (!isString(value)) {
    return false;
  }
  const length = value.length;
  return length >= min && length = min && value <= max;
}

In the `isEmail` function, a regular expression (`emailRegex`) is used to check if the input string matches the pattern of a valid email address. The `isStringLength` and `isNumberInRange` functions provide a way to validate the length of strings and the range of numbers, respectively.

3. Creating a Validation Interface

For more complex validation scenarios, let’s create an interface to define a validation rule. This will allow us to create reusable validation logic. This is also useful for creating a more consistent API for your validation functions.


interface ValidationRule {
  isValid: (value: any) => boolean;
  message: string; // Optional message to explain why validation failed
}

This interface defines the structure for a validation rule. The `isValid` property is a function that takes a value and returns a boolean indicating whether the value is valid. The `message` property provides a way to explain why a validation failed, making it easier to provide meaningful error messages to the user.

4. Implementing Validation Rules with the Interface

Now, let’s implement some validation rules using our `ValidationRule` interface. This will allow us to encapsulate validation logic in a more structured way.


// Example: Validating a minimum length for a string
const minLengthRule = (minLength: number): ValidationRule => ({
  isValid: (value: any) => isString(value) && value.length >= minLength,
  message: `Must be at least ${minLength} characters long`,
});

// Example: Validating a maximum value for a number
const maxValueRule = (maxValue: number): ValidationRule => ({
  isValid: (value: any) => isNumber(value) && value <= maxValue,
  message: `Must be no more than ${maxValue}`,
});

Here, `minLengthRule` and `maxValueRule` are functions that return objects conforming to the `ValidationRule` interface. They encapsulate the validation logic and provide a message explaining the validation criteria. This approach allows for easy reuse and customization of validation rules.

5. Combining Validation Rules

Often, you’ll need to apply multiple validation rules to the same piece of data. Let’s create a function to combine multiple validation rules. This will make it easier to define complex validation logic with multiple checks.


interface ValidationResult {
  isValid: boolean;
  message?: string; // Optional error message if invalid
}

/**
 * Validates a value against multiple validation rules.
 *
 * @param value The value to validate.
 * @param rules An array of ValidationRule objects.
 * @returns A ValidationResult object.
 */
function validate(value: any, rules: ValidationRule[]): ValidationResult {
  for (const rule of rules) {
    if (!rule.isValid(value)) {
      return {
        isValid: false,
        message: rule.message,
      };
    }
  }
  return {
    isValid: true,
  };
}

The `validate` function takes a value and an array of `ValidationRule` objects. It iterates through the rules, and if any rule fails, it returns a `ValidationResult` object indicating the validation failure and the corresponding error message. If all rules pass, it returns a `ValidationResult` object indicating success.

Using the Validation Library

Let’s see how to use our validation library in a practical example. We’ll validate a user registration form with fields for email, password, and a terms-of-service agreement.


// Example usage:
const registrationData = {
  email: 'test@example.com',
  password: 'P@sswOrd123',
  termsAccepted: true,
};

const emailRules: ValidationRule[] = [
  { isValid: isString, message: 'Email must be a string' },
  { isValid: isEmail, message: 'Invalid email format' },
];

const passwordRules: ValidationRule[] = [
  minLengthRule(8),
  { isValid: (value: any) => /[A-Z]/.test(value), message: 'Must contain at least one uppercase letter' },
  { isValid: (value: any) => /[0-9]/.test(value), message: 'Must contain at least one number' },
];

const termsRules: ValidationRule[] = [
  { isValid: isBoolean, message: 'Must be a boolean' },
  { isValid: (value: boolean) => value === true, message: 'Must agree to terms' },
];

const validateRegistration = (data: any) => {
  const results = {
    email: validate(data.email, emailRules),
    password: validate(data.password, passwordRules),
    termsAccepted: validate(data.termsAccepted, termsRules),
  };

  const isValid = Object.values(results).every((result) => result.isValid);
  return {
    isValid,
    results,
  };
};

const validationResult = validateRegistration(registrationData);

if (validationResult.isValid) {
  console.log('Registration data is valid!');
} else {
  console.log('Registration data is invalid:');
  for (const field in validationResult.results) {
    const result = validationResult.results[field as keyof typeof validationResult.results];
    if (!result.isValid) {
      console.log(`${field}: ${result.message}`);
    }
  }
}

In this example, we define validation rules for the email, password, and terms-of-service fields. We then use the `validate` function to check each field against its corresponding rules. The `validateRegistration` function consolidates the results and returns an object indicating whether the entire registration data is valid and any specific error messages. This setup provides a clear and organized way to validate complex data structures.

Common Mistakes and How to Fix Them

Building a data validation library can be tricky. Here are some common mistakes and how to avoid them:

1. Not Handling Edge Cases

Mistake: Not considering all possible input scenarios. For example, not handling null, undefined, or empty strings correctly.

Fix: Always consider edge cases in your validation functions. Add checks for null, undefined, and empty strings. For instance:


function isString(value: any): boolean {
  return typeof value === 'string' && value.trim().length > 0; // Added check for empty string
}

2. Using Inefficient Regular Expressions

Mistake: Using overly complex or inefficient regular expressions, which can slow down validation, especially for large datasets.

Fix: Test your regular expressions for performance. Use online tools to analyze their efficiency. Keep the regex as simple as possible while still accurately validating the data. Consider breaking down complex validation requirements into multiple simpler checks.

3. Not Providing Clear Error Messages

Mistake: Returning vague or unhelpful error messages that don’t give the user enough information about what went wrong.

Fix: Provide specific and informative error messages in your `ValidationRule` interface. The messages should clearly indicate what the user needs to correct. For example, instead of “Invalid format,” say “Invalid email format. Please use a valid email address.”

4. Forgetting to Sanitize Data

Mistake: Only validating data without sanitizing it. Validation confirms the format, while sanitization cleans the data to prevent security vulnerabilities (like XSS attacks) and ensure consistency.

Fix: Incorporate data sanitization into your validation process. For example, remove extra whitespace, escape special characters, or convert input to a consistent format. Consider using libraries like `DOMPurify` for HTML sanitization.

5. Not Considering Type Safety

Mistake: Not using TypeScript’s type system effectively. For example, using `any` for input types when more specific types could be used.

Fix: Leverage TypeScript’s type system to ensure type safety throughout your validation library. Use specific types instead of `any` whenever possible. Define interfaces and types to represent the expected data structures. This helps catch errors during development and makes your code more maintainable.

Key Takeaways

  • Data validation is essential: It prevents errors and ensures data integrity.
  • TypeScript enhances validation: It allows static typing, improving code quality and catching errors early.
  • Modular design is key: Create reusable validation functions and rules.
  • Error messages matter: Provide clear and helpful feedback to users.
  • Consider edge cases: Always account for null, undefined, and other boundary conditions.

FAQ

1. Can I use this library in a React or Angular application?

Yes, absolutely! This validation library is written in TypeScript and can be used in any JavaScript project, including React, Angular, and Vue. You can import the validation functions and apply them to your form inputs or data objects.

2. How do I handle asynchronous validation (e.g., checking if a username is available)?

You can adapt the `validate` function to handle asynchronous validation by making the `isValid` property of the `ValidationRule` interface an asynchronous function (e.g., `isValid: (value: any) => Promise<boolean>`). You would then need to handle the asynchronous operations (e.g., making API calls) inside the `isValid` function and await the result. The `validate` function would also need to be modified to handle the `Promise` returned from the `isValid` function.

3. How can I extend this library to support custom data types?

Extending the library is straightforward. You can add new validation functions for custom data types (e.g., validating a date format, a credit card number, or a phone number). You can also create custom `ValidationRule` objects to encapsulate specific validation logic for your custom data types. Simply define the validation logic within the `isValid` function of your `ValidationRule`.

4. What are some good libraries for data validation in JavaScript/TypeScript?

While building your own validation library is a great learning experience, there are also excellent pre-built libraries available that you can use or learn from. Some popular choices include:

  • Yup: A schema-based validation library with a fluent API.
  • Joi: A powerful schema description language and validator.
  • Zod: A TypeScript-first schema declaration and validation library.
  • Validator.js: A library with a wide range of validation functions.

These libraries often provide more advanced features and are well-maintained, but understanding how to build your own library provides a strong foundation.

5. How can I improve the performance of my validation library?

Performance optimization depends on the complexity of your validation rules and the size of the data you’re validating. Here are some tips:

  • Optimize Regular Expressions: Use efficient regular expressions. Test your regexes and avoid unnecessary complexity.
  • Avoid Unnecessary Iterations: If possible, combine validation rules to reduce the number of iterations through the data.
  • Cache Results: If a validation result is expensive to compute and the data is unlikely to change, consider caching the result.
  • Lazy Validation: If possible, defer validation until it’s needed (e.g., on form submission instead of on every keystroke).
  • Use Web Workers: For very computationally intensive validation tasks, consider using Web Workers to perform the validation in a separate thread, preventing the UI from freezing.

Building a robust data validation library in TypeScript is a valuable skill. It not only improves the quality and reliability of your applications but also provides a deeper understanding of data integrity and software design principles. By following the steps outlined in this tutorial, you can create a flexible and extensible validation library tailored to your specific needs. Remember to always consider edge cases, provide clear error messages, and leverage the power of TypeScript to create a type-safe and maintainable codebase. Continuous learning and improvement are key in software development, so don’t hesitate to explore different validation techniques and experiment with various libraries to enhance your skillset and create even more effective data validation solutions.

More posts