Typescript-decorator-validation NPM

Installation

Install library dependency

npm install typescript-decorator-validation

Allow experimental decorators configuration in your tsconfig.json. This removes IDE errors which could pop-up

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    /* ... */
  }
}

Add babel configuration to your tsconfig.json. This allows for type-safety checking

{
  plugins: [
    "babel-plugin-transform-typescript-metadata",
    ["@babel/plugin-proposal-decorators", { legacy: true }],
    ["@babel/plugin-proposal-class-properties", { loose: true }],
  ],
  presets: ["@babel/preset-typescript"],
}

Contribute

Open bash terminal
Change directory to your desired position
Clone the repository main branch

git clone https://github.com/brunotot/typescript-decorator-validation.git

Checkout a new branch

git checkout -b "[issue-number]-[issue-description]"

Commit and push changes
Open pull request

Documentation

ValidationHandler

Method	Parameters	Returns	Description
`constructor`	`clazz`: Class\	ValidationHandler\	instantiates `ValidationHandler` class with the given decorated class to validate
`validationData`		ValidationData\	returns calculated validation data for given class through its metadata decorators
`hasErrors`	`state`: Object	`boolean`	returns `true` if state object has errors
`getErrors`	`state`: Object	ErrorData	returns object error state from the calculated validation metadata for the given state object
`validate`	`state`: Object	StateValidationResult	returns object state validation result from the calculated validation metadata for the given object state
`buildInstance`	`state`: Object	T	returns instantiated class `T` which is used to construct `ValidationHandler<T>`

Goals and TODOs

Implement strict type checking
Implement predefined decorator validators
Write documentation
Implement the logic so the library can be used easily in CI tests
Implement tests for predefined decorator validators
Write implementation libraries for popular front-end frameworks - x(https://github.com/brunotot/react-decorate-form) - Angular - Svelte - Vue - Solid

Examples

A basic TypeScript form can look something like

import { validators } from 'react-decorate-form';

export type UserFormFields = {
  confirmPassword: string;
  firstName: string;
  lastName: string;
  password: string;
  url: string;
  age: number;
};

export default class UserForm implements UserFormFields {
  @validators.string.Size({ min: 5 })
  @validators.string.NotEmpty()
  firstName!: string;

  @validators.string.NotEmpty()
  lastName!: string;

  @validators.string.NotEmpty()
  @validators.string.Password()
  password!: string;

  confirmPassword!: string;

  @validators.string.URL()
  url!: string;

  @validators.number.Range({ min: 18, max: 100 })
  age!: number;

  @validators.boolean.AssertTrue('Passwords must match')
  get passwordsMatch(): boolean {
    return this.password === this.confirmPassword;
  }
}

And with some styling we can display the form which can look something like:

example form