🚀 TypeScript Validation Decorators 🚀

🔎 Frequently Asked Questions (FAQ)

tsvdec monorepo offers a more declarative way to manage model validation in TypeScript v5 using the latest Stage 3 decorators that now comes with built-in type-safety and control over the decorator's return type specificity.

class Stage2 {
  // ❌ inferred as: Factory() => DecoratorType
  @Factory()
  value: string;
}

class Stage3 {
  // ✅ inferred as: Factory<Stage3, string>() => DecoratorType<Stage3, string>
  @Factory()
  value: string;
}

TOC

• TOC
• Features
• Packages
• Installation
• Bundler configurations
  • TSC configuration
  • Vite configuration (React + Babel)
  • Babel configuration
  • Webpack configuration
• Quick start
• Documentation
• Contribution

Features

• provides clean and declarative way of validating classes and fields
• small in bundle size with no external dependencies
• built-in i18n localization support
• comprehensive documentation and extensive guides, making it easy to get started
• seamless integration with any native TypeScript v5+ project
• supported in both NodeJS and browser environment

Packages

• @tsvdec/core - core module responsible for manipulating class metadata
• @tsvdec/react - implementation of core module compatible with React v18+

Installation

1. Install dependencies

npm install -D typescript@latest
npm install @tsvdec/core

2. (Optional) Install frontend-specific implementation package if code is used in browser environment

npm install @tsvdec/react

Bundler configurations

TSC configuration

See: TypeScript 5.2 decorators metadata blog

// index.ts
Symbol.metadata ??= Symbol("Symbol.metadata");

{
  /* tsconfig.json */
  "compilerOptions": {
    "target": "es2022",
    "lib": ["es2022", "esnext.decorators", "dom"],
    "emitDecoratorMetadata": false,
    "experimentalDecorators": false
  }
}

Vite configuration (React + Babel)

npm install -D @vitejs/plugin-react

// vite.config.ts
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [
    react({
      babel: {
        presets: ["@babel/preset-typescript"],
        plugins: [["@babel/plugin-proposal-decorators", { version: "2023-05" }]],
      },
    }),
  ],
});

Babel configuration

See Babel: 7.19.0 Released: Stage 3 decorators and more RegExp features!

// babel.config.js
{
  presets: ["@babel/preset-typescript"],
  plugins: [["@babel/plugin-proposal-decorators", { version: "2023-05" }]],
}

Webpack configuration

See: NextJS: Typescript 5 decorators do not build #48360

npm i -D ts-loader

// webpack.config.js
{
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: "ts-loader",
        exclude: /node_modules/,
      },
    ];
  }
}

Quick start

import { Form, Required } from "@tsvdec/core";

class MyClass {
  @Required()
  value: string = "";
}

const form = new Form(MyClass);
const result = form.validate({ value: "" });
const errors = result.errors.value;
console.log(errors); // ["Field is required"]

Documentation

• API Documentation
• FAQ

Contribution

To contribute, simply clone the main branch, commit and push changes to a local branch, then open pull request.
Branch will be ready for merge after all CI tests pass and a review has been made.