How do I create a custom Vee-Validate rule in TypeScript?

Question

I'm trying to create a custom VeeValidate rule for my VueJS component written in TypeScript. The rule needs to validate two fields together following the guide at VeeValidate - Cross Field Validation - here's a snippet:

            <div class="form-group">
                <checkbox name="noBarcode" v-model="currentProduct.noBarcode" label=" " />
                <i class="info-icon btn-base-element-icon fa fa-info-circle" data-toggle="tooltip" data-placement="left" title="" data-original-title="Tick this checkbox if this product does not have a barcode."></i>
            </div>
            <div class="form-group">
              <text-input v-model="currentProdcut.barcode" label="BarCode" name="barcode" rules="barcode:@noBarcode" />
            </div>

Both text-input and checkbox are custom form components that incorporate ValidationProvider as per Advanced Input Fields.

My custom rule currently looks like this:


extend('barcode', {
  params: ['checkbox'],
  validate(value, { checkbox }) {
    return checkbox === true || value.length > 0
  },
  message: "Please enter a barcode. If this product does not have a barcode, tick the checkbox above."
})

The problem is this is currently being interpreted by TypeScript with Vetur throwing the following error message (rightly so):

Property 'checkbox' does not exist on type 'any[] | Record<string, any>'.

I haven't yet been able to find any examples of writing custom rules in TypeScript so looking for pointers there...

Tuấn Lê Tuấn Lê · Accepted Answer · 2020-08-26T03:52:19

Not sure if this is legit, but what help me get rid of the error message is add an interface to the 2nd argument. Something like this

interface ParamI {
 [index: string]: any
}

and then in your validate function

validate(value, { checkbox }: ParamI) {
    return checkbox === true || value.length > 0
  },

How do I create a custom Vee-Validate rule in TypeScript?

1 Answers