TypeScript Tutorial: Creating a Simple Data Validation Library

Written by

learnmodernjavascript

in

Data validation is a critical aspect of software development. It ensures that the data your application receives and processes is accurate, reliable, and consistent. Without proper validation, your application could be vulnerable to security risks, data corruption, and unexpected behavior. This tutorial will guide you through creating a simple, yet effective, data validation library using TypeScript. We’ll cover the fundamental concepts, demonstrate practical examples, and provide you with the knowledge to build robust validation mechanisms in your projects.

Why Data Validation Matters

Imagine building an online store. Users enter their credit card details, shipping addresses, and other personal information. If you don’t validate this data, you could face:

  • Security vulnerabilities: Malicious actors could inject harmful code or exploit data input flaws.
  • Data integrity issues: Incorrect data could lead to failed transactions, incorrect shipping, or inaccurate reporting.
  • User experience problems: Invalid input could lead to frustration and a poor user experience.

Data validation helps prevent these issues by ensuring that the data meets predefined criteria. This can range from basic checks (e.g., ensuring an email address has a valid format) to more complex validations (e.g., verifying the consistency of related data fields).

Setting Up Your TypeScript Project

Before we dive into the code, let’s set up a basic TypeScript project. If you’re already familiar with this, feel free to skip ahead.

  1. Create a project directory: Open your terminal and create a new directory for your project, then navigate into it.
    2. mkdir data-validation-library
cd data-validation-library
  2. Initialize npm: Initialize an npm project using the npm init -y command. This creates a package.json file, which will manage your project’s dependencies.
    3. npm init -y
  3. Install TypeScript: Install TypeScript as a development dependency.
    4. npm install --save-dev typescript
  4. Initialize TypeScript configuration: Create a tsconfig.json file by running the tsc --init command. This file configures the TypeScript compiler.
    5. npx tsc --init
  5. Create source file: Create a file named index.ts in the root directory. This is where we’ll write our validation logic.

Building the Validation Library

Let’s start by defining some basic validation functions. We’ll focus on common data types and validation scenarios.

1. String Validation

We’ll create functions to validate strings for:

  • Required fields: Ensuring a string is not empty.
  • Minimum/maximum length: Checking string lengths.
  • Regular expression matching: Validating against patterns (e.g., email format).

Here’s the TypeScript code:

// index.ts

/**
 * Validates if a string is not empty.
 * @param value The string to validate.
 * @returns True if the string is not empty, false otherwise.
 */
function isRequired(value: string): boolean {
  return value.trim().length > 0;
}

/**
 * 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 isLength(value: string, min: number, max: number): boolean {
  const length = value.length;
  return length >= min && length <= max;
}

/**
 * Validates if a string matches a regular expression.
 * @param value The string to validate.
 * @param regex The regular expression to match against.
 * @returns True if the string matches the regex, false otherwise.
 */
function matchesRegex(value: string, regex: RegExp): boolean {
  return regex.test(value);
}

// Example usage
const name = "  John Doe  ";
const email = "john.doe@example.com";

console.log("Is name required?", isRequired(name)); // Output: true (because of trim())
console.log("Is name length valid?", isLength(name, 3, 50)); // Output: true
console.log("Is email valid?", matchesRegex(email, /^[w-.]+@([w-]+.)+[w-]{2,4}$/)); // Output: true

Explanation:

  • isRequired: Uses trim() to remove leading/trailing whitespace before checking the length.
  • isLength: Checks if the string’s length falls within the specified min and max values.
  • matchesRegex: Uses the test() method of the regular expression to check for a match.

2. Number Validation

Now, let’s create functions to validate numbers:

  • Is a number: Ensuring the value is a number and not NaN.
  • Minimum/maximum value: Checking the numeric range.
  • Is integer: Checking if the number is an integer.

Here’s the TypeScript code:

// index.ts (continued)

/**
 * 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' && !isNaN(value);
}

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

/**
 * Validates if a number is an integer.
 * @param value The number to validate.
 * @returns True if the number is an integer, false otherwise.
 */
function isInteger(value: number): boolean {
  return Number.isInteger(value);
}

// Example usage
const age = 30;
const price = 25.50;

console.log("Is age a number?", isNumber(age)); // Output: true
console.log("Is age in range?", isNumberInRange(age, 0, 100)); // Output: true
console.log("Is price an integer?", isInteger(price)); // Output: false

Explanation:

  • isNumber: Checks if the typeof is ‘number’ and uses isNaN() to handle potential NaN values.
  • isNumberInRange: Checks if the number falls within the specified min and max values.
  • isInteger: Uses the built-in Number.isInteger() method.

3. Boolean Validation

Boolean validation is relatively straightforward. We often want to ensure a value is indeed a boolean.

// index.ts (continued)

/**
 * 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';
}

// Example usage
const isActive = true;

console.log("Is active a boolean?", isBoolean(isActive)); // Output: true

Explanation:

  • isBoolean: Simply checks if the typeof is ‘boolean’.

4. Date Validation

Date validation often involves checking if a value is a valid date and optionally, checking its range.

// index.ts (continued)

/**
 * Validates if a value is a valid Date object.
 * @param value The value to validate.
 * @returns True if the value is a valid Date object, false otherwise.
 */
function isValidDate(value: any): boolean {
  return value instanceof Date && !isNaN(value.getTime());
}

/**
 * Validates if a date is within a specified range.
 * @param value The date to validate.
 * @param min The minimum date (Date object).
 * @param max The maximum date (Date object).
 * @returns True if the date is within the range, false otherwise.
 */
function isDateInRange(value: Date, min: Date, max: Date): boolean {
  return value >= min && value <= max;
}

// Example usage
const today = new Date();
const futureDate = new Date(2024, 11, 31); // December 31, 2024

console.log("Is today a valid date?", isValidDate(today)); // Output: true
console.log("Is futureDate in range?", isDateInRange(futureDate, today, new Date(2025, 0, 1))); // Output: true

Explanation:

  • isValidDate: Checks if the value is an instance of the Date object and uses getTime() to check if the date is valid (not NaN).
  • isDateInRange: Compares the date with the min and max dates using standard comparison operators.

Creating a Validation Class

To make our validation library more organized and reusable, let’s create a class that encapsulates our validation functions. This class will provide a consistent interface for performing validation.

// index.ts (continued)

class Validator {
  /**
   * Validates a string based on specified rules.
   * @param value The string to validate.
   * @param rules An object containing validation rules.
   * @returns An array of error messages, or an empty array if validation passes.
   */
  static validateString(value: string, rules: {
    required?: boolean;
    minLength?: number;
    maxLength?: number;
    regex?: RegExp;
  }): string[] {
    const errors: string[] = [];

    if (rules.required && !isRequired(value)) {
      errors.push("This field is required.");
    }

    if (rules.minLength !== undefined && !isLength(value, rules.minLength, Infinity)) {
      errors.push(`Must be at least ${rules.minLength} characters long.`);
    }

    if (rules.maxLength !== undefined && !isLength(value, 0, rules.maxLength)) {
      errors.push(`Must be at most ${rules.maxLength} characters long.`);
    }

    if (rules.regex && !matchesRegex(value, rules.regex)) {
      errors.push("Invalid format.");
    }

    return errors;
  }

  /**
   * Validates a number based on specified rules.
   * @param value The number to validate.
   * @param rules An object containing validation rules.
   * @returns An array of error messages, or an empty array if validation passes.
   */
  static validateNumber(value: number, rules: {
    min?: number;
    max?: number;
    integer?: boolean;
  }): string[] {
    const errors: string[] = [];

    if (rules.min !== undefined && !isNumberInRange(value, rules.min, Infinity)) {
      errors.push(`Must be at least ${rules.min}.`);
    }

    if (rules.max !== undefined && !isNumberInRange(value, -Infinity, rules.max)) {
      errors.push(`Must be at most ${rules.max}.`);
    }

    if (rules.integer && !isInteger(value)) {
      errors.push("Must be an integer.");
    }

    return errors;
  }

  /**
   * Validates a boolean value.
   * @param value The boolean value to validate.
   * @returns An array of error messages, or an empty array if validation passes.
   */
  static validateBoolean(value: boolean): string[] {
    const errors: string[] = [];
    if (!isBoolean(value)) {
      errors.push("Must be a boolean value.");
    }
    return errors;
  }

  /**
   * Validates a date based on specified rules.
   * @param value The date to validate.
   * @param rules An object containing validation rules.
   * @returns An array of error messages, or an empty array if validation passes.
   */
  static validateDate(value: Date, rules: {
    min?: Date;
    max?: Date;
  }): string[] {
    const errors: string[] = [];

    if (!isValidDate(value)) {
      errors.push("Invalid date.");
    }

    if (rules.min && !isDateInRange(value, rules.min, new Date())) {
      errors.push(`Must be after ${rules.min.toLocaleDateString()}.`);
    }

    if (rules.max && !isDateInRange(value, new Date(), rules.max)) {
      errors.push(`Must be before ${rules.max.toLocaleDateString()}.`);
    }

    return errors;
  }
}

// Example usage
const nameErrors = Validator.validateString("", { required: true, minLength: 5, maxLength: 20 });
const ageErrors = Validator.validateNumber(25, { min: 18, max: 60, integer: true });
const isActiveErrors = Validator.validateBoolean(123);
const birthDateErrors = Validator.validateDate(new Date('2024-01-01'), { max: new Date() });

console.log("Name errors:", nameErrors);
console.log("Age errors:", ageErrors);
console.log("Is Active errors:", isActiveErrors);
console.log("Birthdate errors:", birthDateErrors);

Explanation:

  • The Validator class encapsulates all validation logic.
  • It provides static methods (validateString, validateNumber, validateBoolean, and validateDate) for different data types.
  • Each validation method accepts the value to validate and an optional object containing validation rules.
  • It returns an array of error messages. If the array is empty, validation passed.

Using the Validation Library

To use the library, import the Validator class and call the appropriate validation methods. Here’s an example of how you might use it in a form:

// index.ts (continued)

// Assuming you have form data
const formData = {
  name: "",
  age: 17,
  email: "invalid-email",
  birthDate: new Date('2025-01-01'),
  isActive: "true"
};

// Validate the form data
const nameErrors = Validator.validateString(formData.name, { required: true, minLength: 3, maxLength: 50 });
const ageErrors = Validator.validateNumber(formData.age, { min: 18, max: 100, integer: true });
const emailErrors = Validator.validateString(formData.email, { regex: /^[w-.]+@([w-]+.)+[w-]{2,4}$/ });
const birthDateErrors = Validator.validateDate(formData.birthDate, { max: new Date() });
const isActiveErrors = Validator.validateBoolean(formData.isActive);

// Aggregate all errors
const allErrors = {
  name: nameErrors,
  age: ageErrors,
  email: emailErrors,
  birthDate: birthDateErrors,
  isActive: isActiveErrors
};

// Display the errors (e.g., in your UI)
for (const field in allErrors) {
  if (allErrors.hasOwnProperty(field)) {
    if (allErrors[field].length > 0) {
      console.log(`${field} errors:`, allErrors[field]);
    }
  }
}

In this example, we:

  • Define a formData object representing the data from a form.
  • Call the appropriate Validator methods for each field, passing in the value and the validation rules.
  • Collect all errors into an allErrors object.
  • Iterate through the allErrors object and display any errors to the user (e.g., in a UI).

Common Mistakes and How to Fix Them

1. Incorrect Regular Expressions

Regular expressions can be tricky. A common mistake is using an incorrect pattern, which can lead to false positives (validating invalid data) or false negatives (rejecting valid data).

Solution:

  • Test your regex thoroughly: Use online regex testers (like regex101.com) to test your patterns against various test cases.
  • Keep it simple: Start with a basic regex and add complexity only when necessary.
  • Understand the syntax: Familiarize yourself with the common regex metacharacters and syntax.

2. Not Handling Edge Cases

Failing to consider edge cases (e.g., empty strings, very large numbers, unusual date formats) can lead to unexpected behavior and validation failures.

Solution:

  • Think about extreme values: Consider the minimum and maximum possible values for each field.
  • Test with boundary conditions: Test your validation with values at the boundaries (e.g., minimum length, maximum length).
  • Provide clear error messages: Make your error messages specific and helpful, so users know exactly what’s wrong.

3. Not Escaping Input Properly

If you’re using user input directly in your regular expressions or other validation logic, you need to be careful to escape the input to prevent security vulnerabilities, such as Regular Expression Denial of Service (ReDoS) attacks.

Solution:

  • Escape special characters: Before using user input in regex, escape any special regex characters.
  • Use parameterized queries: If you’re building SQL queries, use parameterized queries to prevent SQL injection.
  • Validate and sanitize input: Always validate and sanitize user input before using it in any operation.

4. Ignoring Error Messages

The validation library is useless if the application doesn’t *do* anything with the error messages. The errors must be displayed to the user in a meaningful way.

Solution:

  • Display errors in the UI: Integrate the error messages into your user interface, highlighting the fields with errors.
  • Provide clear feedback: Make sure the user understands what went wrong and how to correct it.
  • Handle errors gracefully: Prevent the application from crashing due to invalid data.

5. Over-Validation

While data validation is critical, over-validation can lead to a poor user experience. For instance, overly strict validation on a free-text field can frustrate users.

Solution:

  • Consider the context: Determine the level of validation needed based on the field’s importance and the potential risks.
  • Provide flexibility where appropriate: Allow some flexibility in fields where strict validation isn’t essential.
  • Use client-side and server-side validation: Perform basic validation on the client-side for immediate feedback, and more comprehensive validation on the server-side for security.

Summary / Key Takeaways

In this tutorial, we’ve covered the essentials of building a data validation library in TypeScript. We’ve explored string, number, boolean, and date validation, and provided practical examples using a Validator class. Remember these key takeaways:

  • Data validation is crucial: It prevents security vulnerabilities, data corruption, and improves user experience.
  • Choose the right validation rules: Define validation rules that align with your application’s requirements.
  • Organize your code: Create a reusable class to encapsulate your validation logic.
  • Handle errors gracefully: Display error messages to the user and prevent application crashes.
  • Test thoroughly: Test your validation library with various inputs, including edge cases.

FAQ

  1. How can I extend the validation library to support other data types?

    You can easily add support for other data types (e.g., arrays, objects) by creating new validation functions and adding them to your Validator class. For arrays, you might validate the contents of the array or the array’s length. For objects, you might validate the properties of the object.

  2. Should I perform client-side and server-side validation?

    Yes, you should always perform both client-side and server-side validation. Client-side validation provides immediate feedback to the user and improves the user experience. Server-side validation is essential for security, as it prevents malicious users from bypassing client-side validation and submitting invalid data.

  3. How do I handle complex validation rules (e.g., validating the relationship between two fields)?

    For complex validation rules, you can create custom validation functions that take multiple values as input. You can also use the Validator class to chain multiple validation checks together. In addition, consider using a validation library that supports more advanced features, such as conditional validation and schema validation.

  4. Are there any third-party TypeScript validation libraries I should consider?

    Yes, there are several excellent third-party TypeScript validation libraries that offer more advanced features and functionality. Some popular choices include:

    • Yup: A schema-based validation library that is easy to use and provides a fluent API.
    • Zod: Another schema-based validation library that is designed for TypeScript and offers strong type safety.
    • class-validator: A library that allows you to validate objects using decorators.

    These libraries can save you time and effort by providing pre-built validation logic and advanced features.

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

    Performance is generally not a major concern for most validation scenarios. However, if you are working with large datasets or complex validation rules, you can consider the following optimizations:

    • Avoid unnecessary computations: Only perform validation checks that are required.
    • Use memoization: Cache the results of expensive validation functions.
    • Optimize regular expressions: Ensure your regular expressions are efficient.
    • Consider asynchronous validation: If a validation check is time-consuming, perform it asynchronously to avoid blocking the user interface.

Data validation is more than just a coding task; it’s a commitment to building reliable and trustworthy applications. By understanding the principles, implementing effective validation techniques, and staying mindful of potential pitfalls, you can significantly enhance the quality and security of your projects. As you continue to build and refine your validation practices, remember that the goal is not merely to prevent errors, but to foster a positive and secure experience for your users. The careful crafting of your validation logic is an investment in the long-term health and success of your software, ensuring that it remains robust, secure, and a pleasure to use for years to come.

More posts