📘 Input Validation: Type-Based Validation

🎯 Introduction

Welcome to this exciting tutorial on input validation using TypeScript’s powerful type system! 🎉 In this guide, we’ll explore how to leverage TypeScript’s types to create robust validation that catches errors before they reach your users.

You’ll discover how type-based validation can transform your application’s reliability. Whether you’re building APIs 🌐, processing forms 📝, or handling user data 👤, understanding type-based validation is essential for writing secure, maintainable code.

By the end of this tutorial, you’ll feel confident implementing rock-solid validation in your TypeScript projects! Let’s dive in! 🏊‍♂️

📚 Understanding Type-Based Validation

🤔 What is Type-Based Validation?

Type-based validation is like having a security guard 👮‍♂️ at the entrance of your application. Think of it as a bouncer at a club who checks IDs - but instead of checking ages, it’s checking if your data has the right shape and values!

In TypeScript terms, type-based validation uses the type system to ensure data conforms to expected structures at compile-time AND runtime. This means you can:

✨ Catch invalid data before it causes problems
🚀 Get compile-time safety for your validation logic
🛡️ Create reusable validation patterns
📖 Self-documenting validation rules

💡 Why Use Type-Based Validation?

Here’s why developers love type-based validation:

Type Safety 🔒: Validation rules are enforced by TypeScript
Better Developer Experience 💻: Autocomplete for valid values
Runtime Protection 🛡️: Catch bad data from external sources
Maintainability 🔧: Change validation in one place

Real-world example: Imagine building a user registration system 📋. With type-based validation, you can ensure emails are valid, passwords meet requirements, and ages are reasonable - all with type-safe guarantees!

🔧 Basic Syntax and Usage

📝 Simple Example

Let’s start with a friendly example:

// 👋 Hello, Type-Based Validation!
type Email = string & { __brand: "Email" };
type PositiveNumber = number & { __brand: "PositiveNumber" };

// 🎨 Creating validation functions
const isEmail = (value: string): value is Email => {
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return emailRegex.test(value);
};

const isPositiveNumber = (value: number): value is PositiveNumber => {
  return value > 0;
};

// 🔐 Type-safe validation
const validateEmail = (input: string): Email => {
  if (!isEmail(input)) {
    throw new Error("Invalid email! 📧");
  }
  return input;
};

💡 Explanation: We use branded types (nominal types) to create distinct types for validated data. The is keyword creates type predicates that TypeScript understands!

🎯 Common Patterns

Here are patterns you’ll use daily:

// 🏗️ Pattern 1: User input validation
interface UserInput {
  name: string;
  email: string;
  age: number;
}

interface ValidatedUser {
  name: string;
  email: Email;
  age: PositiveNumber;
}

// 🎨 Pattern 2: Validation result types
type ValidationResult<T> = 
  | { success: true; data: T }
  | { success: false; errors: string[] };

// 🔄 Pattern 3: Validation pipeline
const validateUser = (input: UserInput): ValidationResult<ValidatedUser> => {
  const errors: string[] = [];
  
  // 📝 Validate each field
  if (input.name.length < 2) {
    errors.push("Name too short! 📏");
  }
  
  if (!isEmail(input.email)) {
    errors.push("Invalid email! 📧");
  }
  
  if (!isPositiveNumber(input.age) || input.age > 120) {
    errors.push("Invalid age! 🎂");
  }
  
  if (errors.length > 0) {
    return { success: false, errors };
  }
  
  return {
    success: true,
    data: {
      name: input.name,
      email: input.email as Email,
      age: input.age as PositiveNumber
    }
  };
};

💡 Practical Examples

🛒 Example 1: E-Commerce Order Validation

Let’s build something real:

// 🛍️ Define our validated types
type ProductId = string & { __brand: "ProductId" };
type Quantity = number & { __brand: "Quantity" };
type Price = number & { __brand: "Price" };

// 🛒 Order validation system
interface OrderItem {
  productId: string;
  quantity: number;
  price: number;
}

interface ValidatedOrderItem {
  productId: ProductId;
  quantity: Quantity;
  price: Price;
}

class OrderValidator {
  // 🎯 Validate product ID format
  private isValidProductId(id: string): id is ProductId {
    return /^PROD-[0-9]{6}$/.test(id);
  }
  
  // 📦 Validate quantity
  private isValidQuantity(qty: number): qty is Quantity {
    return Number.isInteger(qty) && qty > 0 && qty <= 100;
  }
  
  // 💰 Validate price
  private isValidPrice(price: number): price is Price {
    return price > 0 && price <= 10000 && 
           Number(price.toFixed(2)) === price;
  }
  
  // ✅ Validate entire order item
  validateOrderItem(item: OrderItem): ValidationResult<ValidatedOrderItem> {
    const errors: string[] = [];
    
    if (!this.isValidProductId(item.productId)) {
      errors.push(`Invalid product ID: ${item.productId} 🚫`);
    }
    
    if (!this.isValidQuantity(item.quantity)) {
      errors.push(`Invalid quantity: ${item.quantity} 📦`);
    }
    
    if (!this.isValidPrice(item.price)) {
      errors.push(`Invalid price: $${item.price} 💸`);
    }
    
    if (errors.length > 0) {
      return { success: false, errors };
    }
    
    return {
      success: true,
      data: {
        productId: item.productId as ProductId,
        quantity: item.quantity as Quantity,
        price: item.price as Price
      }
    };
  }
}

// 🎮 Let's use it!
const validator = new OrderValidator();
const result = validator.validateOrderItem({
  productId: "PROD-123456",
  quantity: 5,
  price: 29.99
});

if (result.success) {
  console.log("✅ Order validated!", result.data);
} else {
  console.log("❌ Validation failed:", result.errors);
}

🎯 Try it yourself: Add validation for discount codes and shipping addresses!

🎮 Example 2: Game Character Creation

Let’s make it fun:

// 🏆 Character validation system
type CharacterName = string & { __brand: "CharacterName" };
type Level = number & { __brand: "Level" };
type SkillPoints = number & { __brand: "SkillPoints" };

interface CharacterInput {
  name: string;
  class: string;
  level: number;
  skills: {
    strength: number;
    agility: number;
    intelligence: number;
  };
}

class CharacterValidator {
  // 🎮 Valid character classes
  private readonly validClasses = ["warrior", "mage", "rogue", "healer"] as const;
  type CharacterClass = typeof this.validClasses[number];
  
  // 📝 Name validation
  private isValidName(name: string): name is CharacterName {
    return name.length >= 3 && 
           name.length <= 20 && 
           /^[a-zA-Z0-9_]+$/.test(name);
  }
  
  // 🎯 Level validation
  private isValidLevel(level: number): level is Level {
    return Number.isInteger(level) && level >= 1 && level <= 100;
  }
  
  // 💪 Skill points validation
  private isValidSkillPoints(points: number): points is SkillPoints {
    return Number.isInteger(points) && points >= 0 && points <= 100;
  }
  
  // 🏗️ Validate character creation
  validateCharacter(input: CharacterInput) {
    const errors: string[] = [];
    
    // 🎨 Validate name
    if (!this.isValidName(input.name)) {
      errors.push("Character name must be 3-20 alphanumeric characters! 📝");
    }
    
    // 🛡️ Validate class
    if (!this.validClasses.includes(input.class as any)) {
      errors.push(`Invalid class! Choose: ${this.validClasses.join(", ")} ⚔️`);
    }
    
    // 📊 Validate level
    if (!this.isValidLevel(input.level)) {
      errors.push("Level must be between 1-100! 🎯");
    }
    
    // 💪 Validate skills
    const totalSkills = Object.values(input.skills).reduce((a, b) => a + b, 0);
    const maxSkillPoints = input.level * 5; // 5 points per level
    
    if (totalSkills > maxSkillPoints) {
      errors.push(`Too many skill points! Max: ${maxSkillPoints} 🚫`);
    }
    
    Object.entries(input.skills).forEach(([skill, points]) => {
      if (!this.isValidSkillPoints(points)) {
        errors.push(`Invalid ${skill} points! 💔`);
      }
    });
    
    return errors.length === 0
      ? { success: true as const, character: input }
      : { success: false as const, errors };
  }
}

// 🎮 Create a character!
const characterValidator = new CharacterValidator();
const hero = characterValidator.validateCharacter({
  name: "DragonSlayer42",
  class: "warrior",
  level: 10,
  skills: { strength: 30, agility: 10, intelligence: 10 }
});

if (hero.success) {
  console.log("🎉 Character created!", hero.character);
} else {
  console.log("❌ Invalid character:", hero.errors);
}

🚀 Advanced Concepts

🧙‍♂️ Advanced Topic 1: Generic Validation Functions

When you’re ready to level up, try this advanced pattern:

// 🎯 Advanced generic validator
type Validator<T> = (value: unknown) => value is T;

// 🪄 Combine validators
const combine = <T>(...validators: Validator<any>[]): Validator<T> => {
  return (value: unknown): value is T => {
    return validators.every(validator => validator(value));
  };
};

// ✨ Create reusable validators
const minLength = (min: number): Validator<string> => {
  return (value: unknown): value is string => {
    return typeof value === "string" && value.length >= min;
  };
};

const maxLength = (max: number): Validator<string> => {
  return (value: unknown): value is string => {
    return typeof value === "string" && value.length <= max;
  };
};

const matches = (pattern: RegExp): Validator<string> => {
  return (value: unknown): value is string => {
    return typeof value === "string" && pattern.test(value);
  };
};

// 🏗️ Compose complex validators
type Username = string & { __brand: "Username" };
const isUsername = combine<Username>(
  minLength(3),
  maxLength(20),
  matches(/^[a-zA-Z0-9_]+$/)
);

🏗️ Advanced Topic 2: Schema-Based Validation

For the brave developers:

// 🚀 Type-safe schema validation
type Schema<T> = {
  [K in keyof T]: Validator<T[K]>;
};

const validateSchema = <T>(
  schema: Schema<T>,
  input: unknown
): ValidationResult<T> => {
  if (typeof input !== "object" || input === null) {
    return { success: false, errors: ["Input must be an object! 📦"] };
  }
  
  const errors: string[] = [];
  const result = {} as T;
  
  for (const [key, validator] of Object.entries(schema)) {
    const value = (input as any)[key];
    
    if (!validator(value)) {
      errors.push(`Invalid ${key}! 🚫`);
    } else {
      (result as any)[key] = value;
    }
  }
  
  return errors.length === 0
    ? { success: true, data: result }
    : { success: false, errors };
};

// 🎨 Use the schema validator
const userSchema: Schema<ValidatedUser> = {
  name: (v): v is string => typeof v === "string" && v.length > 0,
  email: isEmail,
  age: isPositiveNumber
};

const validated = validateSchema(userSchema, {
  name: "Alice",
  email: "[email protected]",
  age: 25
});

⚠️ Common Pitfalls and Solutions

😱 Pitfall 1: Trusting External Data

// ❌ Wrong way - trusting API data!
interface ApiResponse {
  user: ValidatedUser; // 😰 Assuming it's already validated!
}

const handleApiResponse = (response: ApiResponse) => {
  console.log(response.user.email); // 💥 Might not be valid!
};

// ✅ Correct way - always validate external data!
const handleApiResponse = (response: unknown) => {
  const result = validateUser(response as UserInput);
  
  if (result.success) {
    console.log("Valid user! ✅", result.data.email);
  } else {
    console.log("Invalid data! ⚠️", result.errors);
  }
};

🤯 Pitfall 2: Forgetting Edge Cases

// ❌ Dangerous - missing edge cases!
const isPositive = (n: number): n is PositiveNumber => {
  return n > 0; // 💥 What about NaN, Infinity?
};

// ✅ Safe - handle all cases!
const isPositive = (n: number): n is PositiveNumber => {
  return Number.isFinite(n) && n > 0;
};

// ❌ Incomplete email validation
const badEmailCheck = (email: string) => {
  return email.includes("@"); // 😱 Too simple!
};

// ✅ Proper email validation
const goodEmailCheck = (email: string): email is Email => {
  const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return regex.test(email) && email.length <= 254; // RFC limit! 📏
};

🛠️ Best Practices

🎯 Validate at Boundaries: Always validate data entering your system
📝 Clear Error Messages: Help users fix validation errors
🛡️ Defense in Depth: Multiple validation layers for critical data
🎨 Reusable Validators: Build a library of common validators
✨ Type-Safe Results: Use discriminated unions for validation results

🧪 Hands-On Exercise

🎯 Challenge: Build a Form Validation System

Create a type-safe form validation system:

📋 Requirements:

✅ Support multiple field types (text, email, number, date)
🏷️ Custom validation rules per field
👤 Real-time validation feedback
📅 Complex validations (date ranges, password strength)
🎨 Reusable validation components

🚀 Bonus Points:

Add async validation (checking username availability)
Implement cross-field validation (password confirmation)
Create a validation rule builder

💡 Solution

🔍 Click to see solution

// 🎯 Our type-safe form validation system!
type FieldValidator<T> = {
  validate: (value: T) => ValidationResult<T>;
  message: string;
};

type FormSchema<T> = {
  [K in keyof T]: FieldValidator<T[K]>[];
};

class FormValidator<T> {
  constructor(private schema: FormSchema<T>) {}
  
  // 🔄 Validate single field
  validateField<K extends keyof T>(
    field: K,
    value: T[K]
  ): string[] {
    const validators = this.schema[field];
    const errors: string[] = [];
    
    for (const validator of validators) {
      const result = validator.validate(value);
      if (!result.success) {
        errors.push(validator.message);
      }
    }
    
    return errors;
  }
  
  // ✅ Validate entire form
  validateForm(data: T): {
    isValid: boolean;
    errors: Partial<Record<keyof T, string[]>>;
  } {
    const errors: Partial<Record<keyof T, string[]>> = {};
    let isValid = true;
    
    for (const field in this.schema) {
      const fieldErrors = this.validateField(field, data[field]);
      if (fieldErrors.length > 0) {
        errors[field] = fieldErrors;
        isValid = false;
      }
    }
    
    return { isValid, errors };
  }
}

// 🏗️ Common validators
const required = <T>(): FieldValidator<T> => ({
  validate: (value) => ({
    success: value !== null && value !== undefined && value !== "",
    errors: []
  }),
  message: "This field is required! 📝"
});

const email = (): FieldValidator<string> => ({
  validate: (value) => ({
    success: /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value),
    errors: []
  }),
  message: "Please enter a valid email! 📧"
});

const minLength = (min: number): FieldValidator<string> => ({
  validate: (value) => ({
    success: value.length >= min,
    errors: []
  }),
  message: `Must be at least ${min} characters! 📏`
});

const passwordStrength = (): FieldValidator<string> => ({
  validate: (value) => {
    const hasUpper = /[A-Z]/.test(value);
    const hasLower = /[a-z]/.test(value);
    const hasNumber = /[0-9]/.test(value);
    const hasSpecial = /[!@#$%^&*]/.test(value);
    const isLongEnough = value.length >= 8;
    
    return {
      success: hasUpper && hasLower && hasNumber && hasSpecial && isLongEnough,
      errors: []
    };
  },
  message: "Password must be 8+ chars with uppercase, lowercase, number, and special char! 🔐"
});

// 🎮 Test it out!
interface SignupForm {
  username: string;
  email: string;
  password: string;
  age: number;
}

const signupValidator = new FormValidator<SignupForm>({
  username: [required(), minLength(3)],
  email: [required(), email()],
  password: [required(), passwordStrength()],
  age: [
    required(),
    {
      validate: (age) => ({ success: age >= 18 && age <= 120, errors: [] }),
      message: "Must be between 18-120! 🎂"
    }
  ]
});

// 🚀 Validate a form
const formData: SignupForm = {
  username: "coder123",
  email: "[email protected]",
  password: "Secure123!",
  age: 25
};

const result = signupValidator.validateForm(formData);
console.log(result.isValid ? "✅ Form is valid!" : "❌ Form has errors:", result.errors);

🎓 Key Takeaways

You’ve learned so much! Here’s what you can now do:

✅ Create type-safe validators with confidence 💪
✅ Avoid common validation mistakes that trip up beginners 🛡️
✅ Apply validation patterns in real projects 🎯
✅ Debug validation issues like a pro 🐛
✅ Build secure applications with TypeScript! 🚀

Remember: Validation is your first line of defense against bad data. TypeScript makes it type-safe AND powerful! 🤝

🤝 Next Steps

Congratulations! 🎉 You’ve mastered type-based validation!

Here’s what to do next:

💻 Practice with the exercises above
🏗️ Build a validation library for your projects
📚 Move on to our next tutorial: Authentication and Authorization with Types
🌟 Share your validation patterns with the community!

Remember: Every secure application starts with proper validation. Keep coding, keep validating, and most importantly, have fun! 🚀

Happy coding! 🎉🚀✨

Prerequisites

What you'll learn