如何为Vuetify 3 v-btn的variant属性导入TypeScript类型？

问题描述 #

我正在基于Vuetify 3的v-btn构建Vue组件，需要给组件添加variant属性并传递给内部的v-btn，同时要正确指定该属性的类型。目前我手动定义了类型：

variant?: NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain"> | undefined,

但不想在代码库中重复复制这个变体列表，希望能直接从v-btn导入命名类型，写成：

variant?: Variant | undefined

以下是当前组件代码：

<template>
    <v-tooltip location="bottom">
        <template v-slot:activator="{ props }">
            <v-btn v-bind="props" icon class="icon-right" @click="$emit('onClick')" :variant="$props.variant" :density="$props.density">
            <v-icon> {{ $props.icon }} </v-icon>
            </v-btn>
        </template>
        <span> {{ $props.title }} </span>
    </v-tooltip>
</template>
  
<style scoped lang="scss">
.icon-right {
  position: absolute;
  right: 0;
  margin-bottom: 2rem;
}
</style>

<script lang="ts" setup>
const props = defineProps<{
  title: string,
  icon: string,
  variant?: NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain"> | undefined,
  density?: null | 'default' | 'comfortable' | 'compact',
}>();
const emit = defineEmits<{
  onClick: []
}>();
</script>

解决方案 #

Vuetify 3已经暴露了组件的Props类型，你可以直接从vuetify/components/VBtn导入VBtnProps，再从中提取需要的类型：

步骤1：导入VBtnProps类型 #

在script标签开头添加类型导入：

import type { VBtnProps } from 'vuetify/components/VBtn'

步骤2：定义Variant类型 #

基于VBtnProps提取variant的类型：

type Variant = VBtnProps['variant']

步骤3：替换手动定义的类型 #

修改defineProps中的类型定义，直接使用提取好的类型：

const props = defineProps<{
  title: string,
  icon: string,
  variant?: Variant,
  density?: VBtnProps['density'], // density也可以用同样方式复用类型
}>();

完整修改后的组件代码 #

<template>
    <v-tooltip location="bottom">
        <template v-slot:activator="{ props }">
            <v-btn v-bind="props" icon class="icon-right" @click="$emit('onClick')" :variant="$props.variant" :density="$props.density">
            <v-icon> {{ $props.icon }} </v-icon>
            </v-btn>
        </template>
        <span> {{ $props.title }} </span>
    </v-tooltip>
</template>
  
<style scoped lang="scss">
.icon-right {
  position: absolute;
  right: 0;
  margin-bottom: 2rem;
}
</style>

<script lang="ts" setup>
import type { VBtnProps } from 'vuetify/components/VBtn'

type Variant = VBtnProps['variant']

const props = defineProps<{
  title: string,
  icon: string,
  variant?: Variant,
  density?: VBtnProps['density'],
}>();
const emit = defineEmits<{
  onClick: []
}>();
</script>

内容的提问来源于stack exchange，提问作者allinonemovie