π 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;
}
- 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
- @tsvdec/core - core module responsible for manipulating class metadata
- @tsvdec/react - implementation of core module compatible with React v18+
- Install dependencies
npm install -D typescript@latest
npm install @tsvdec/core
- (Optional) Install frontend-specific implementation package if code is used in browser environment
npm install @tsvdec/react
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
}
}
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" }]],
},
}),
],
});
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" }]],
}
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/,
},
];
}
}
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"]
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.