🚀 TypeScript Decorator Validation 🚀

⭐ Class entity validations made easy with the help of @Decorators

⭐ Allows strict type checking when applying decorator validators

⭐ Works perfectly with existing TypeScript-first applications

Table of Contents

• Installation
• Contribute
• Documentation
• Goals and TODOs
• Examples

Installation

1. Install library dependency

npm install typescript-decorator-validation

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

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

3. 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

1. Open bash terminal
2. Change directory to your desired position
3. Clone the repository main branch

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

4. Checkout a new branch

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

5. Commit and push changes
6. Open pull request

Documentation

ValidationHandler

Method	Parameters	Returns	Description
constructor	clazz: Class<T>	ValidationHandler<T>	instantiates ValidationHandler class with the given decorated class to validate
validationData		ValidationData<T>	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

• [x] Implement strict type checking
• [x] 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] React
  • [ ] 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: