Vue - vuetify - 对象字面量只能指定已知属性，而 'ComponentOptions<Vue, DefaultData<Vue> 类型中不存在 'vuetify'答案

【问题标题】：Vue - vuetify - Object literal may only specify known properties, and 'vuetify' does not exist in type 'ComponentOptions<Vue, DefaultData<Vue>Vue - vuetify - 对象字面量只能指定已知属性，而 'ComponentOptions<Vue, DefaultData<Vue> 类型中不存在 'vuetify'
【发布时间】：2020-07-19 09:42:12
【问题描述】：

使用以下指南使用 TypeScript 创建了一个新的 Vue 项目：

https://vuejs.org/v2/guide/typescript.html

安装 Vue CLI（如果尚未安装）

npm install --global @vue/cli
创建一个新项目，然后选择“手动选择功能”选项

vue 创建我的项目名称

用npm run serve 测试了这个项目，它没有问题。

然后我通过运行vue add vuetify 添加了vuetify

https://vuetifyjs.com/en/getting-started/quick-start/

然而，这导致了一些错误：

错误 C:/Test/vue-test/src/main.ts(13,3): 13:3 没有重载匹配此调用。重载 1 of 3, '(options?: ThisTypedComponentOptionsWithArrayProps | undefined): CombinedVueInstance>'，给出以下错误。 '{ router: VueRouter; 类型的参数商店：商店； vuetify：任何；渲染：（h：CreateElement）=> VNode； }' 不可分配给 'ThisTypedComponentOptionsWithArrayProps' 类型的参数。对象字面量只能指定已知属性，并且在类型“ThisTypedComponentOptionsWithArrayProps”中不存在“vuetify”。重载 2 of 3, '(options?: ThisTypedComponentOptionsWithRecordProps | undefined): CombinedVueInstance>'，给出以下错误。 '{ router: VueRouter; 类型的参数商店：商店； vuetify：任何；渲染：（h：CreateElement）=> VNode； }' 不可分配给 'ThisTypedComponentOptionsWithRecordProps' 类型的参数。对象字面量只能指定已知属性，并且在类型“ThisTypedComponentOptionsWithRecordProps”中不存在“vuetify”。重载 3 of 3, '(options?: 组件选项，默认方法， DefaultComputed, PropsDefinition>, Record<...>> | undefined): CombinedVueInstance<...>'，给出了以下错误。 '{ router: VueRouter; 类型的参数商店：商店； vuetify：任何；渲染：（h：CreateElement）=> VNode； }' 不可分配给 'ComponentOptions 类型的参数， DefaultMethods、DefaultComputed、PropsDefinition>、Record<...>>'。对象字面量只能指定已知属性，而 'vuetify' 不存在于类型 'ComponentOptions, DefaultMethods、DefaultComputed、PropsDefinition>、Record<...>>'。 11 |路由器， 12 |商店，

13 |验证， | ^ 14 |渲染：h => h(App) 15 | }).$mount('#app') 16 | C:/Test/vue-test/src/plugins/vuetify.ts(2,21) 中的错误： 2:21 找不到模块“vuetify/lib”的声明文件。 'C:/Test/vue-test/node_modules/vuetify/lib/index.js' 隐含地具有“任何”类型。试试npm install @types/vuetify 存在或添加包含declare module 'vuetify/lib'; 的新声明 (.d.ts) 文件 1 |从'vue'导入Vue； 2 |从 'vuetify/lib' 导入 Vuetify； | ^ 3 | 4 | Vue.use(Vuetify); 5 |版本：typescript 3.8.3 时间：1997ms

【问题讨论】：

标签： typescript vue.js vuejs2 vuetify.js

【解决方案1】：

在这里找到了一个很好的答案：

https://github.com/vuetifyjs/vue-cli-plugins/issues/112#issuecomment-562935079

但无需添加typeRoots。

只需在tsconfig.json. 中的compilerOptions 下将vuetify 添加到types

例子：

"types": [
  "webpack-env",
  "mocha",
  "chai",
  "vuetify"
],

【讨论】：

我能够通过为相关库安装@types 包（未修改tsconfig）来解决类似的问题（使用Vuelidate）。