Vuetify 3.8.10版本下导入组件类型与接口的推荐方式及v-btn props类型定义问题

嘿，我来帮你搞定Vuetify 3.8+版本里的组件类型导入问题，再也不用靠any来糊弄TypeScript啦😉

官方推荐的正确姿势（3.8+专属优化） #

Vuetify在3.8版本之后，已经把每个组件的Props、Events等类型单独封装成了命名导出的接口，直接导入对应组件的Props类型就好，这比之前取$props的方式更清晰，也更符合TypeScript的最佳实践。

以你用到的v-btn为例，现在可以直接导入VBtnProps类型，代码示例如下：

<script setup lang="ts">
// 精准导入v-btn的Props类型
import type { VBtnProps } from 'vuetify/components/VBtn'

const btnProps: VBtnProps = {
  color: 'primary',
  variant: 'outlined'
  // 所有v-btn支持的合法props都会有完整的TS类型提示，写错属性名会直接报错
}
</script>

其他相关类型的导入（按需使用） #

除了Props，官方也贴心地暴露了Events、Slots对应的类型，如果你需要处理组件的事件回调或者插槽类型，也可以用同样的方式导入：

import type { VBtnEvents, VBtnSlots } from 'vuetify/components/VBtn'

和旧方式的对比 #

之前你用的VBtn['$props']在3.8+版本里其实也能正常工作，但官方更推荐直接导入VBtnProps——因为后者是专门对外暴露的公共稳定类型，不会包含组件内部的私有props；而$props可能会混入一些组件内部的非公开属性，长期来看稳定性不如前者。

为啥坚决不用any？ #

用any相当于直接给TypeScript“开绿灯”，完全丧失了类型检查的优势。用官方提供的类型不仅能获得实时的代码提示，还能在编译阶段就揪出props的拼写错误、属性值不合法等问题，早发现早解决，总比上线后出问题强对吧？

这样设置之后，你的btnProps就能完美匹配v-btn的所有合法props规则，TypeScript再也不会给你甩抱怨啦！

内容来源于stack exchange