Typing rules schema

Computed rules

When defining your rules schema in a separate computed property, you may lose autocompletion and detailed type checking for your rules. While useRegle will still perform type checks, the feedback will be less informative.

To avoid this, it is recommended to use the inferRules utility. This ensures that the rules schema aligns perfectly with the state, preventing extra or mismatched properties.

Example: Using inferRules

The inferRules utility requires that your state be declared independently of useRegle.

import { ,  } from '@regle/core';

const  = ({ : '' });

const  = (() =>
  (, {
    n
  })
);

const {  } = (, );

Example: Typing Without inferRules

If you prefer not to use inferRules, you can type your rules explicitly using RegleComputedRules. To ensure type safety while retaining type inference, use the satisfies operator.

import { , type  } from '@regle/core';

const  = ({ : '' });

const  = (() => ({
  : {
    : () => true
  }
} satisfies <typeof >))

const {  } = (, );

TIP

If you don’t want to write your rules in a separate computed property, you can still define them inline.

const min = ref(1);
useRegle({ name: '' }, () => ({
  name: { minLength: minLength(min.value) }
}))

Typing external nested properties

inferRules can be used for any nested properties and chained inside the same schema.

import { ,  } from '@regle/core';
import {  } from '@regle/rules';
import { ,  } from 'vue';

const  = ({ : { : '', : '' } });

const  = (() =>
  (.., {
    : {  },
    : { r },
  })
);

const  = (() =>
  (, {
    : .,
  })
);

const {  } = (, );

TIP

Zod and Valibot also have their own inferSchema exported.

Typing external nested field

inferRules can also accept plain values to autocomplete the available rules.

import { ,  } from '@regle/core';
import {  } from '@regle/rules';
import { ,  } from 'vue';

const  = ({ : { : '', : '' } });

const  = (() =>
  (..., {
    ,
  })
);

const  = (() =>
  (, {
    : {
      : .,
    },
  })
);

const {  } = (, );