vue.js - Hur man importerar TypeScript-typer i Vuetify 3?

Jag skulle vilja använda typen ValidationRule (se dokumentation och källkod) men jag kan inte hitta ett sätt att importera dem i min Vue.js-komponent.

Jag försökte importera typen på sätt som detta:

import type { ValidationRule } from 'vuetify/types'

Men detta fungerar inte

Svar #1

För närvarande exporterar inte Vuetify typen. Men du kan extrahera den från komponentdeklarationer, liknande detta svar:

import type { VTextField } from 'vuetify/components'

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

Det spelar egentligen ingen roll vilken komponent du använder, så länge den använder typen ValidationRule. VTextField har en :rules-egenskap, så jag använder den. Att använda rules-indexet ger typen readonly ValidationRule[].
Slutligen används typen UnwrapReadonlyArray för att extrahera arrayens elementtyp och ta bort readonly-modifikatorn.

Innan Vuetify 3.4 exporterades konstruktionsfunktioner istället för typer, så du var tvungen att bygga typen själv:

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

Relaterade artiklar