:rocket: TypeScript Decorator Validation :rocket:
:star: Class entity validations made easy with the help of
@Decorators
:star: Allows strict type checking when applying decorator validators
:star: Works perfectly with existing TypeScript-first applications
## Table of Contents
- [Installation](#installation)
- [Contribute](#contribute)
- [Documentation](#documentation)
- [Goals and TODOs](#goals-and-todos)
- [Examples](#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
```ts
{
"compilerOptions": {
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
/* ... */
}
}
```
3. Add babel configuration to your `tsconfig.json`.
This allows for type-safety checking
```ts
{
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
```bash
git clone https://github.com/brunotot/typescript-decorator-validation.git
```
4. Checkout a new branch
```bash
git checkout -b "[issue-number]-[issue-description]"
```
5. Commit and push changes
6. Open pull request
## Documentation
### [ValidationHandler](https://github.com/brunotot/typescript-decorator-validation/blob/main/src/handler/ValidationHandler.ts#L28)
| Method | Parameters | Returns | Description |
|---------------|------------|---------|-------------|
|`constructor` |`clazz`: [Class\](https://github.com/brunotot/typescript-decorator-validation/blob/main/src/handler/ValidationHandler.ts#L5)|[ValidationHandler\](https://github.com/brunotot/typescript-decorator-validation/blob/main/src/handler/ValidationHandler.ts#L28)|instantiates `ValidationHandler` class with the given decorated class to validate|
| `validationData` | | [ValidationData\](https://github.com/brunotot/typescript-decorator-validation/blob/main/src/handler/ValidationHandler.ts#L15) | 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](https://github.com/brunotot/typescript-decorator-validation/blob/main/src/handler/ValidationHandler.ts#L19) | returns object error state from the calculated validation metadata for the given state object |
| `validate` | `state`: Object | [StateValidationResult](https://github.com/brunotot/typescript-decorator-validation/blob/main/src/handler/ValidationHandler.ts#L23) | returns object state validation result from the calculated validation metadata for the given object state |
| `buildInstance` | `state`: Object | [T](https://github.com/brunotot/typescript-decorator-validation/blob/main/src/handler/ValidationHandler.ts#L36) | returns instantiated class `T` which is used to construct `ValidationHandler` |
## 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](https://github.com/brunotot/react-decorate-form)
- [ ] Angular
- [ ] Svelte
- [ ] Vue
- [ ] Solid
## Examples
A basic TypeScript form can look something like
```typescript
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:
