tessl/npm-vue-types

Prop type definitions for Vue.js components with runtime validation and TypeScript support

—

Pending

Overview

Eval results

Files

Native Type Validators

Name: tessl/npm-vue-types
Author: tessl

Native type validators provide validation for JavaScript's built-in types with sensible default values and runtime type checking.

Capabilities

Any Type Validator

Accepts any value without type checking. Useful for props that can accept multiple types.

/**
 * Creates a validator that accepts any value
 * @returns VueTypeValidableDef that accepts any type
 */
static get any(): VueTypeValidableDef<any>;

// Standalone function
function any<T = any>(): VueTypeValidableDef<T>;

Usage Examples:

import VueTypes, { any } from "vue-types";

// Via VueTypes class
const anyProp = VueTypes.any;
const anyRequired = VueTypes.any.isRequired;

// Via standalone function  
const anyStandalone = any();
const anyWithDefault = any().def('default value');

Function Validator

Validates function values with default function support.

/**
 * Creates a validator for function types
 * @returns VueTypeValidableDef for function types
 */
static get func(): VueTypeValidableDef<Function>;

// Standalone function with generic support
function func<T extends (...args: any[]) => any>(): VueTypeValidableDef<T>;

Usage Examples:

import VueTypes, { func } from "vue-types";

// Basic function validation
const onClick = VueTypes.func.isRequired;
const onUpdate = VueTypes.func.def(() => {});

// With type constraints
const typedHandler = func<(value: string) => void>().isRequired;

Boolean Validator

Validates boolean values with configurable default.

/**
 * Creates a validator for boolean types
 * @returns VueTypeValidableDef for boolean values
 */
static get bool(): VueTypeValidableDef<boolean>;

// Standalone function
function bool(): VueTypeValidableDef<boolean>;

Usage Examples:

import VueTypes, { bool } from "vue-types";

// Boolean with sensible default (true)
const isActive = VueTypes.bool;
const isRequired = VueTypes.bool.isRequired;

// Custom default
const isVisible = bool().def(false);

String Validator

Validates string values with empty string as default.

/**
 * Creates a validator for string types
 * @returns VueTypeValidableDef for string values
 */
static get string(): VueTypeValidableDef<string>;

// Standalone function with generic constraint support
function string<T extends string = string>(): VueTypeValidableDef<T>;

Usage Examples:

import VueTypes, { string } from "vue-types";

// Basic string validation
const title = VueTypes.string.isRequired;
const description = VueTypes.string.def('');

// With type constraints for literal types
const theme = string<'light' | 'dark'>().def('light');

Number Validator

Validates numeric values with zero as default.

/**
 * Creates a validator for number types
 * @returns VueTypeValidableDef for number values
 */
static get number(): VueTypeValidableDef<number>;

// Standalone function with generic constraint support
function number<T extends number = number>(): VueTypeValidableDef<T>;

Usage Examples:

import VueTypes, { number } from "vue-types";

// Basic number validation
const count = VueTypes.number.def(0);
const price = VueTypes.number.isRequired;

// With custom validation
const positiveNumber = number().validate((value) => value > 0);

Array Validator

Validates array values with empty array factory as default.

/**
 * Creates a validator for array types
 * @returns VueTypeValidableDef for array values
 */
static get array(): VueTypeValidableDef<any[]>;

// Standalone function with generic element type support
function array<T>(): VueTypeValidableDef<T[]>;

Usage Examples:

import VueTypes, { array } from "vue-types";

// Basic array validation
const items = VueTypes.array.def(() => []);
const tags = VueTypes.array.isRequired;

// With element type constraint
const stringArray = array<string>().def(() => []);

Object Validator

Validates plain object values with empty object factory as default.

/**
 * Creates a validator for object types  
 * @returns VueTypeValidableDef for object values
 */
static get object(): VueTypeValidableDef<Record<string, any>>;

// Standalone function with generic constraint support
function object<T extends Record<string, any>>(): VueTypeValidableDef<T>;

Usage Examples:

import VueTypes, { object } from "vue-types";

// Basic object validation
const config = VueTypes.object.def(() => ({}));
const user = VueTypes.object.isRequired;

// With type constraints
const settings = object<{ theme: string; lang: string }>().isRequired;

Integer Validator

Validates integer values using Number type with custom validator for integer checking.

/**
 * Creates a validator for integer types
 * @returns VueTypeDef for integer values (includes built-in validator)
 */
static get integer(): VueTypeDef<number>;

// Standalone function with generic constraint support  
function integer<T extends number = number>(): VueTypeDef<T>;

Usage Examples:

import VueTypes, { integer } from "vue-types";

// Integer validation with default
const pageSize = VueTypes.integer.def(10);
const currentPage = VueTypes.integer.isRequired;

// Standalone usage
const itemCount = integer().def(0);

Symbol Validator

Validates symbol values with custom validator function.

/**
 * Creates a validator for symbol types
 * @returns VueTypeDef for symbol values
 */
static get symbol(): VueTypeDef<symbol>;

// Standalone function
function symbol(): VueTypeDef<symbol>;

Usage Examples:

import VueTypes, { symbol } from "vue-types";

// Symbol validation
const key = VueTypes.symbol.isRequired;
const identifier = symbol().def(Symbol('default'));

Nullable Validator

Validates null values specifically, rejecting all other values including undefined.

/**
 * Creates a validator that only accepts null values
 * @returns PropOptions for null values
 */
static get nullable(): PropOptions<null>;

// Standalone function  
function nullable(): PropOptions<null>;

Usage Examples:

import VueTypes, { nullable } from "vue-types";

// Null validation
const emptyValue = VueTypes.nullable;
const resetValue = nullable();

Common Patterns

Chaining Modifiers

All native validators support method chaining for configuration:

// Required validation
const requiredString = VueTypes.string.isRequired;

// Default value
const stringWithDefault = VueTypes.string.def('hello');

// Custom validation (for validable types)
const emailString = VueTypes.string.validate((value) => value.includes('@'));

// Combined modifiers
const validatedRequired = VueTypes.string
  .validate((value) => value.length > 0)
  .isRequired;

Default Value Factories

For complex default values, use factory functions to avoid reference sharing:

// Arrays and objects should use factories
const items = VueTypes.array.def(() => []);
const config = VueTypes.object.def(() => ({ theme: 'light' }));

// Primitives can use direct values
const count = VueTypes.number.def(0);
const title = VueTypes.string.def('Untitled');

TypeScript Integration

Native validators provide full TypeScript support:

// Generic constraints for more specific types
const theme = string<'light' | 'dark'>().def('light');
const count = number<1 | 2 | 3 | 4 | 5>().def(1);

// Function type constraints
const handler = func<(event: MouseEvent) => void>().isRequired;

Install with Tessl CLI