or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

complex-validators.mdconfig-utilities.mdindex.mdnative-validators.mdtype-system.md
tile.json

tessl/npm-vue-types

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

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/vue-types@6.0.x

To install, run

npx @tessl/cli install tessl/npm-vue-types@6.0.0

index.mddocs/

Vue Types

Vue Types provides a comprehensive collection of configurable prop type definitions for Vue.js components, inspired by React's prop-types. It offers type-safe prop validation utilities that help developers define and validate component props with runtime checks and TypeScript support.

Package Information

  • Package Name: vue-types
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install vue-types
  • Peer Dependency: Vue 3.x (optional)

Core Imports

import VueTypes from "vue-types";

For named imports:

import { string, number, bool, array, object, shape, oneOf } from "vue-types";

For CommonJS:

const VueTypes = require("vue-types");
const { string, number, bool } = require("vue-types");

For production builds (shim version):

import VueTypes from "vue-types/shim";

Basic Usage

import VueTypes from "vue-types";

// Define component props with validation
export default {
  props: {
    // Basic types with sensible defaults
    title: VueTypes.string.isRequired,
    count: VueTypes.number.def(0),
    isActive: VueTypes.bool.def(false),
    
    // Complex validation
    items: VueTypes.arrayOf(VueTypes.string).def(() => []),
    user: VueTypes.shape({
      name: VueTypes.string.isRequired,
      age: VueTypes.number,
      email: VueTypes.string
    }).isRequired,
    
    // Enum-style validation
    status: VueTypes.oneOf(['pending', 'success', 'error']).def('pending')
  }
};

Architecture

Vue Types is built around several key components:

  • Core Class: VueTypes class providing all validators as static properties and methods
  • Type Definitions: Comprehensive TypeScript interfaces for all prop types
  • Validation System: Runtime prop validation with detailed error messages
  • Default Values: Sensible default system for common use cases
  • Production Shim: Lightweight version for production builds
  • Configuration: Global settings for warning behavior and logging

Capabilities

Native Type Validators

Basic prop validators for JavaScript native types with built-in validation and default value support.

// Basic type validators
static get any(): VueTypeValidableDef<any>;
static get func(): VueTypeValidableDef<Function>;
static get bool(): VueTypeValidableDef<boolean>;
static get string(): VueTypeValidableDef<string>;
static get number(): VueTypeValidableDef<number>;
static get array(): VueTypeValidableDef<any[]>;
static get object(): VueTypeValidableDef<Record<string, any>>;
static get integer(): VueTypeDef<number>;
static get symbol(): VueTypeDef<symbol>;
static get nullable(): PropOptions<null>;

Native Type Validators

Complex Validators

Advanced validators for custom types, enums, collections, and object structures.

// Custom validation
static custom<T>(validatorFn: ValidatorFunction<T>, warnMsg?: string): VueTypeDef<T>;

// Enum-style validation
static oneOf<T extends readonly any[]>(arr: T): VueTypeDef<T[number]>;
static oneOfType<T extends VueProp<any>[]>(arr: T): VueTypeDef<InferType<T[number]>>;

// Collection validation  
static arrayOf<T extends VueProp<any>>(type: T): VueTypeDef<InferType<T>[]>;
static objectOf<T extends VueProp<any>>(type: T): VueTypeDef<Record<string, InferType<T>>>;

// Instance validation
static instanceOf<C extends Constructor>(constructor: C): VueTypeDef<InstanceType<C>>;

// Object structure validation
static shape<T extends object>(obj: ShapeObject<T>): VueTypeShape<T>;

Complex Validators

Type Definition System

Core utilities for creating, extending, and managing prop type definitions.

// Create type definitions
function toType<T>(name: string, obj: PropOptions<T>): VueTypeDef<T>;
function toValidableType<T>(name: string, obj: PropOptions<T>): VueTypeValidableDef<T>;

// Extend existing types
function fromType<T extends VueTypeDef<any>>(
  name: string, 
  source: T, 
  props?: PropOptions<InferType<T>>
): T;

// Validate values
function validateType<T, U>(type: T, value: U, silent?: boolean): string | boolean;

// Create custom VueTypes classes
function createTypes(defs?: Partial<VueTypesDefaults>): VueTypesInterface;

Type Definition System

Configuration & Utilities

Configuration options and utility functions for customizing behavior and validation.

// Global configuration
interface VueTypesConfig {
  silent: boolean;
  logLevel: 'log' | 'warn' | 'error' | 'debug' | 'info';
}

const config: VueTypesConfig;

// Utility methods
static utils: {
  validate<T, U>(value: T, type: U): boolean;
  toType<T>(
    name: string,
    obj: PropOptions<T>,
    validable?: boolean
  ): VueTypeDef<T> | VueTypeValidableDef<T>;
};

Configuration & Utilities

Type Definitions

// Core type definition interfaces  
interface VueTypeDef<T = unknown> extends VueTypeBaseDef<T> {}

interface VueTypeValidableDef<T = unknown> extends VueTypeBaseDef<T> {
  readonly validate: (fn: ValidatorFunction<T>) => this & { validator: ValidatorFunction<T> };
}

interface VueTypeBaseDef<T = unknown> extends PropOptions<T> {
  _vueTypes_name: string;
  readonly def: (def?: DefaultType<T>) => this & { default: DefaultType<T> };
  readonly isRequired: this & { required: true };
}

// Shape validator types
interface VueTypeShape<T> extends VueTypeBaseDef<T> {
  readonly loose: VueTypeLooseShape<T>;
}

interface VueTypeLooseShape<T> extends VueTypeBaseDef<T> {
  readonly loose: VueTypeLooseShape<T>;
  readonly _vueTypes_isLoose: true;
}

// Utility types
type ValidatorFunction<T> = (value: T, props?: Record<string, unknown>) => boolean;
type DefaultType<T> = T extends NativeType ? T : DefaultFactory<T>;
type DefaultFactory<T> = (() => T) | T;

Error Handling

Vue Types includes comprehensive error handling and warning systems:

  • Runtime Validation: All validators perform runtime type checking with detailed error messages
  • Silent Mode: Global configuration to suppress validation warnings
  • Custom Messages: Support for custom error messages in validators
  • Development Mode: Full validation in development, optional lightweight mode for production
  • TypeScript Integration: Compile-time type checking alongside runtime validation