Examples/documentation for using vuelidate with TypeScript

Hello!

First off, thank you to the Vuelidate creators for making this amazing little validation library. Second, thank you to @mrellipse for contributing type definitions in #47.

I have been trying to figure out how to use Vuelidate with TypeScript from the PR history, by perusing the PR code, and by just generally futzing around. I see that the changes should extend the Vue interface declaration with enough information to know that the validations field is an available option.

However, I can’t for the life of me figure out what I need to do to make this all play nicely. I tried using the @Component syntax from the tests (component.spec.ts) but get this error:

ERROR in […]\src\calculator\Calculator.vue.ts (96,5): error TS2345: Argument of type ‘{ mixins: any[]; name: string; template: string; validations: any; }’ is not assignable to parameter of type ‘VueClass’. Object literal may only specify known properties, and ‘mixins’ does not exist in type ‘VueClass’.

corresponding to this code (mostly borrowed from the test file, and embedded in a .vue single file component):

<script lang="ts">

import Vue = require('vue');
import Component from 'vue-class-component';
import { IVuelidate, ValidationRuleset, Vuelidate, validationMixin } from 'vuelidate';

interface IComplexProp {
    value1: string;
    value2?: number;
}

type SimpleProp = string;

interface IComponentData {
    simpleProp: SimpleProp;
    complexProp: IComplexProp;
    simpleCollection: Array<SimpleProp>;
    complexCollection: Array<IComplexProp>;
    validationGroup: string[];
};

function predicate(value: any): boolean {
    return value ? true : false;
}

function predicateFactory(param: number): (value: any) => boolean {
    return (value) => predicate(value);
}

let validations: ValidationRuleset<IComponentData> = {
    simpleProp: {
        predicate
    },
    complexProp: {
        value1: {
            predicate,
            funcGen: predicateFactory(1)
        },
        value2: {
            predicate,
            funcGen: predicateFactory(1)
        }
    },
    simpleCollection: {
        $each: {
            predicate
        }
    },
    complexCollection: {
        $each: {
            value1: {
                predicate,
                funcGen: predicateFactory(1)
            }
        }
    },
    validationGroup: ['simpleProp', 'complexProp.value2']
};

@Component({
    mixins: [validationMixin],
    name: 'RulesetTest',
    template: '<div></div>',
    validations: validations
})
class TestComponent extends Vue implements IVuelidate<IComponentData> {

    constructor() {
        super();
    }

    simpleProp: string = 'true';

    complexProp: IComplexProp = {
        value1: '',
        value2: 1
    }

    simpleCollection: SimpleProp[] = ['A', 'B', 'C'];

    complexCollection: IComplexProp[] = [
        { value1: 'A' },
        { value1: 'B' },
        { value1: 'C' }
    ];

    simpleMethod(): boolean {
        return this.$v.complexProp.$dirty;
    }

    $v: Vuelidate<IComponentData>
}

</script>

Is there a guide for how to use Vuelidate with Vue Single File Components written in TypeScript? I’ve been trying to piece it together from the documentation embedded with the .ts code, but as I’m new to TypeScript and ES6, this has been a bit of a challenge for me.

[victorgarciaesgi]

@jacek-jablonski With vue-property-decorator you can use the method registerHooks to do that

In your main.ts

import { Component } from 'vue-property-decorator'

Component.registerHooks(['validations'])

Then on your components

import { Component, Vue } from 'vue-property-decorator';

@Component
export default class Blank extends Vue {
    validations() {
       return {
        ...
       }
    }
  }
}

[ozguruysal]

Looking forward to official typescript support!