How to import TypeScript types in Vuetify 3?

Question

I would like to use the type ValidationRule (see docs and source code) but I cannot find a way how to import them in my Vue.js component.

I tried import the type in ways like this:

import type { ValidationRule } from 'vuetify/types'

But this does not work

Answer 1

Currently, Vuetify does not export the type. But you can extract it from component declarations, similar to this answer:

import type { VTextField } from 'vuetify/components'

type UnwrapReadonlyArray<A> = A extends Readonly<Array<infer I>> ? I : A;
type ValidationRule = UnwrapReadonlyArray<VTextField['rules']>

Doesn't really matter which component you use, as long as it uses the ValidationRule type. VTextField has a :rules prop, so I am using that. Using the rules index gives the type readonly ValidationRule[].
Finally, the UnwrapReadonlyArray type is used to extract the array item type and remove the readonly modifier.

---

Before Vuetify 3.4, constructor functions were exported rather than types, so you had to build the type yourself:

type VTextFieldType = InstanceType<typeof VTextField>
type ValidationRule = UnwrapReadonlyArray<VTextFieldType['rules']>